javascript - NextJS，Express，WebSocket 握手期间出错 : Unexpected response code: 200

Question

基本问题可以概括如下:使用 ws 在 Node 中创建 Websocket 服务器时使用由 Express 服务器填充的服务器选项(如 this 示例)，同时使用同一 Express 服务器来处理 NextJS 的路由(如 this 示例)，升级 header 似乎无法正确解析。

express 不会将请求路由到 Websocket 服务器，而是发回 HTTP 200 OK 响应。

我一直在寻找这个问题的答案，可能是我根本不明白这个问题。 issue 中提出了一个可能相关的问题。在 NextJS 的 github 上。他们建议在本地 next.config.js 中设置 WebsocketPort 和 WebsocketProxyPort 选项，但我已经尝试过，但没有成功。

下面是相关服务器代码的最小示例。您可能会找到完整的示例 here .

const express = require('express')
const next = require('next')
const SocketServer = require('ws').Server;
const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
    const server = express()

    server.all('*', (req, res) => {
    return handle(req, res)
    })

    server.listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
    })

    const wss = new SocketServer({ server });

    wss.on('connection', function connection(ws, request) {
        console.log('Client connected');
        ws.on('close', () => console.log('Client disconnected'));
    });
    wss.on('error', function (error) {
        console.log(error);
    });

    setInterval(() => {
        wss.clients.forEach((client) => {
          client.send(new Date().toTimeString());
        });
      }, 1000);    

}).catch(ex => {
    console.error(ex.stack);
    process.exit(1);
});

当然，预期的结果是与 websocket 服务器的连接。相反，我收到以下错误:

WebSocket connection to 'ws://localhost:3000/' failed: Error during WebSocket handshake: Unexpected response code: 200

有人可以在这里为我解释一下吗？

Answer 1

好的，经过更多的挖掘，我已经解决了这个问题。很简单，我试图向其提供 server = express() 对象的 ws.Server 对象严格来说并不是一个 http 服务器对象。然而，server.listen()返回这样一个http服务器对象。在这样的对象上，我们可以监听“升级”调用，我们可以将其传递给 ws.Server 对象的 handleUpgrade() 事件监听器，通过它我们可以进行连接。我将更新问题中链接的示例，但相关代码如下:

app.prepare().then(() => {
    const server = express()

    server.all('*', (req, res) => {
    return handle(req, res)
    })

    const wss = new SocketServer({ server });

    wss.on('connection', function connection(ws, request) {
        console.log('Client connected');
        ws.on('close', () => console.log('Client disconnected'));
    });
    wss.on('error', function (error) {
        console.log(error);
    });

    let srv = server.listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
    })

    srv.on('upgrade', function(req, socket, head) {
        wss.handleUpgrade(req, socket, head, function connected(ws) {
            wss.emit('connection', ws, req);
        })
    });