使用自定义NextJS服务器创建Websocket

Question

我正在使用自定义服务器运行NextJS应用程序，以便在前端和自定义后端之间建立websocket。

这是自定义服务器：

const express = require("express");
const next = require("next");
const emitter = require("./lib/eventEmitter");
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
const server = express();
const http = require('http')
const socketIo = require("socket.io");
const wbServer = http.createServer(server)
const io = socketIo(wbServer);
io.on("connection", (socket) => {
console.log("client connected: ", socket.id);
});
app.prepare().then(() => {
server.all("*", (req, res) => {
return handle(req, res);
});
server.listen(port, () => {
console.log(`> Ready on http://localhost:${port}`);
});
});

这是前端连接：

useEffect(() => {
(async () => {
let socket = io("http://localhost:3000");
socket.on("connected", () => {
console.log("Connected");
});
})();
});

但它没有连接React显示404错误，如下所示：

XHR GET http://localhost:3000/socket.io?EIO=4&transport=polling&t=ODFLYBM
[HTTP/1.1 404 Not Found 8ms]

Answer 1

答案是监听wbServer而不是server，如下所示：

const server = require("http").Server(app);
server.listen(port, () => {
console.log(`> Ready on http://localhost:${port}`);
});