为什么socketio客户端没有连接到nextjs自定义服务器

Question

这是我第一次使用websocket。我有一个自定义的nextjs服务器，这是代码：

const { Server } = require("socket.io");
const express = require("express");
const { createServer } = require("http");
const next = require("next");
const dev = process.env.NODE_ENV !== "production";
const hostname = "localhost";
const PORT = process.env.PORT || 3000;
const { MongoClient, ServerApiVersion } = require("mongodb");
const user = require("./server/api/userAPI");
const game = require("./server/api/gameAPI");
// Vanilla API routes
const app = next({ dev, hostname, PORT });
const handle = app.getRequestHandler();
app
.prepare()
.then(() => {
const expressApp = express();
const httpServer = createServer(expressApp);
const io = new Server(httpServer);
expressApp.use(express.json());
expressApp.use("/user", user);
expressApp.use("/game", game);
expressApp.get("*", (req, res) => {
return handle(req, res);
});

io.on("connection", (socket) => {
console.log("socket connected");
const count = io.engine.clientsCount;
console.log(count);
});
expressApp.listen(3000, (err) => {
if (err) throw err;
console.log("> Ready on http://localhost:3000");
});
})
.catch((ex) => {
console.error(ex.stack);
process.exit(1);
});

这是app.js 中的客户端

import { io } from "socket.io-client";
function MyApp({ Component, pageProps }: AppProps) {
const socket = io();
socket.on("connect", () => {
console.log(socket.id); // x8WIv7-mJelg7on_ALbx
});

return (
<WagmiConfig client={wagmiClient}>
<ChakraProvider theme={theme}>
<Page>
<Component {...pageProps} />
</Page>
</ChakraProvider>
</WagmiConfig>
);
}
export default MyApp;

在服务器端和客户端，我都期望控制台记录连接消息。然而，两者都没有进行日志记录。

编辑：

我在浏览器控制台中得到以下错误：

WebSocket connection to 'ws://localhost/socket.io/?EIO=4&transport=websocket' failed:

Answer 1

您必须为两端指定路径，以便它们相遇。

客户：

const socket = io({path: "/api/socketio"});

服务器：

const io = new Server(httpServer, {path: "/api/socketio"});