如何使用快速服务器将 socket.io 连接到 Sapper 应用程序？答案

【问题标题】：How can I connect socket.io to a Sapper app using an express server?如何使用快速服务器将 socket.io 连接到 Sapper 应用程序？
【发布时间】：2020-11-20 22:08:51
【问题描述】：

问题

我正在尝试使用 express 和 webpack 在 Sapper 应用程序上启动和运行 socket.io。我的网站服务正常且没有错误，但是当我尝试通过 socket.io 连接前端时，它只会抛出 404s。

我相信我遇到的问题是 socket.io 需要拦截 /socket.io 请求 (similar to this issue) 但 Sapper 似乎不允许这样做。据我了解，我们可以在应用 sapper 中间件之前注册路由，但 socket.io 不是中间件。

我已经使用我的设置副本创建了一个公共存储库 here

我可以在 Chrome 的网络选项卡中看到正在发出请求（大约每秒一个），但响应是默认的 _error.svelte 404 页面：

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <meta name='theme-color' content='#333333'>

    <base href="/">

    <link rel='stylesheet' href='global.css'>
    <link rel='manifest' href='manifest.json' crossorigin='use-credentials'>
    <link rel='icon' type='image/png' href='favicon.png'>

    <!-- Sapper generates a <style> tag containing critical CSS
         for the current page. CSS for the rest of the app is
         lazily loaded when it precaches secondary pages -->
    <style>main.svelte-1uhnsl8{position:relative;max-width:56em;background-color:white;padding:2em;margin:0 auto;box-sizing:border-box}
nav.svelte-1dbd5up{border-bottom:1px solid rgba(255,62,0,0.1);font-weight:300;padding:0 1em}ul.svelte-1dbd5up{margin:0;padding:0}ul.svelte-1dbd5up::after{content:'';display:block;clear:both}li.svelte-1dbd5up{display:block;float:left}[aria-current].svelte-1dbd5up{position:relative;display:inline-block}[aria-current].svelte-1dbd5up::after{position:absolute;content:'';width:calc(100% - 1em);height:2px;background-color:rgb(255,62,0);display:block;bottom:-1px}a.svelte-1dbd5up{text-decoration:none;padding:1em 0.5em;display:block}
h1.svelte-8od9u6,p.svelte-8od9u6{margin:0 auto}h1.svelte-8od9u6{font-size:2.8em;font-weight:700;margin:0 0 0.5em 0}p.svelte-8od9u6{margin:1em auto}@media(min-width: 480px){h1.svelte-8od9u6{font-size:4em}}</style>

    <!-- This contains the contents of the <svelte:head> component, if
         the current page has one -->
    <noscript id='sapper-head-start'></noscript><title>404</title><noscript id='sapper-head-end'></noscript>
</head>
<body>
    <!-- The application will be rendered inside this element,
         because `src/client.js` references it -->
    <div id='sapper'>


<nav class="svelte-1dbd5up"><ul class="svelte-1dbd5up"><li class="svelte-1dbd5up"><a href="." class="svelte-1dbd5up">index</a></li></ul></nav>

<main class="svelte-1uhnsl8">

<h1 class="svelte-8od9u6">404</h1>

<p class="svelte-8od9u6">Not found</p>

</main></div>

    <!-- Sapper creates a <script> tag containing `src/client.js`
         and anything else it needs to hydrate the app and
         initialise the router -->
    <script>__SAPPER__={error:{message:"Not found"},status:404,baseUrl:"",preloaded:[void 0,{}]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/service-worker.js');</script><script src="/client/ffd658007fc78219636d/main.js"></script>
</body>
</html>

代码

我的 server.js：

import express from 'express' 
import http from 'http'
import sirv from 'sirv'

import compression from 'compression'
import * as sapper from '@sapper/server';
import socketIO from 'socket.io-client'

const app = express()
const server = http.createServer(app)

const io = socketIO(server)

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

io.on('connection', (socket) => {
    console.log('connected')
})

app
    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )

server.listen(PORT, err => {
    if (err) console.log('error', err);
});

我的 _layout.svelte 脚本：

<script>
    import io from 'socket.io-client'
    import Nav from '../components/Nav.svelte';

    const socket = io()

    export let segment;
</script>

我正在为 Sapper 使用 default webpack configuration

【问题讨论】：

标签： express socket.io sapper

【解决方案1】：

server.js

import sirv from 'sirv';
import compression from 'compression';
import * as sapper from '@sapper/server';
import socketIo from 'socket.io';
import express from 'express';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

const app = express();

const server = app
    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .listen(PORT, err => {
        if (err) console.log('error', err);
    });

const io = socketIo(server);

io.on('connection', function(socket) {
    console.log('connected')
});

【讨论】：