如何在开发模式下在下一个 js 自定义服务器中运行 websocket 服务器

Question

假设我想运行一个自定义的下一个 js 服务器，并在同一台服务器上接受 websocket 连接，我怎样才能避免破坏下一个 js 开发服务器热重载，它也在同一台服务器上使用 websockets...

const { createServer } = require('http')
const WebSocket = require("ws")
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
    const server = createServer((req, res) => handle(req, res, parse(req.url, true)))
    // pass the same server instance that is used by next js to the websocket server
    const wss = new WebSocket.Server({ server })

    wss.on("connection", async function connection(ws) {
      console.log('incoming connection', ws);    
      ws.onclose = () => {
        console.log('connection closed', wss.clients.size);
      };
    });

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

我相信该服务器应该在生产构建版本中工作，以便在用于处理下一个 js 请求的同一服务器实例上创建 websocket 服务器，但是当我尝试这样做时，热模块重新加载停止工作，并且错误出现在 chrome 开发工具控制台中，因为它期望由 webpack 处理的 websocket 连接现在由我的自定义 websocket 服务器处理。

我怎样才能以某种方式将开发服务器的 websocket 连接路由到 next 以及 webpack 和其他服务器到我自己的处理程序？

我知道我可以在另一个端口上运行我的 websocket 服务器，但我想在与下一个 js 相同的服务器实例和相同的端口上运行它。

Answer 1

所以诀窍是创建一个 noServer 属性设置为 true 的 websocket 服务器，然后监听服务器升级事件，并根据路径名，不做任何事情以允许下一个 js 做它的事情，或者传递请求到我们创建的 websocket 服务器...

const wss = new WebSocket.Server({ noServer: true })

server.on('upgrade', function (req, socket, head) {
    const { pathname } = parse(req.url, true);
    if (pathname !== '/_next/webpack-hmr') {
        wss.handleUpgrade(req, socket, head, function done(ws) {
            wss.emit('connection', ws, req);
        });
    }
});

...所有这些都像这样...

const { createServer } = require('http')
const WebSocket = require("ws")
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
    const server = createServer((req, res) => handle(req, res, parse(req.url, true)))
    const wss = new WebSocket.Server({ noServer: true })

    wss.on("connection", async function connection(ws) {
      console.log('incoming connection', ws);
      ws.onclose = () => {
        console.log('connection closed', wss.clients.size);
      };
    });

    server.on('upgrade', function (req, socket, head) {
        const { pathname } = parse(req.url, true);
        if (pathname !== '/_next/webpack-hmr') {
            wss.handleUpgrade(req, socket, head, function done(ws) {
                wss.emit('connection', ws, req);
            });
        }
    });

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

Answer 2

这是我使用 api 路由而不是创建自定义服务器在 Next.js 上创建 webSocket 服务器的答案。

/pages/api/websocketserverinit.js:

import { WebSocketServer } from 'ws';

const SocketHandler = async (req, res) => {
    if (res.socket.server.wss) {
        console.log('Socket is already running')
    } else {
        console.log('Socket is initializing')
        const server = res.socket.server
        const wss = new WebSocketServer({ noServer: true })
        res.socket.server.wss = wss
        
        server.on('upgrade', (req, socket, head) => {
            console.log("upgrade", req.url)
        
            if (!req.url.includes('/_next/webpack-hmr')) {
                wss.handleUpgrade(req, socket, head, (ws) => {
                    wss.emit('connection', ws, req);
                });
            }

        });

        wss.on('connection', (ws)=> {
            console.log("connection", ws);
            ws.on('message', (data) => {
                console.log('received: %s', data);
            })

            ws.send('something');
        });

    }
    res.end()
}

export default SocketHandler

您必须调用 api 路由才能从客户端（或服务器初始化脚本）启动 websocket 服务器：

fetch("http://localhost:3000/api/websocketserverinit")  

然后连接到它：

const ws = new WebSocket("ws://localhost:3000")

不是很好，但在某些情况下可能有用