socket.io请求localhost:500/socket.io返回404 NOT FOUND问题咨询

404的核心原因是Socket.IO挂载的HTTP服务器和实际处理前端请求的HTTP服务器不是同一个实例：

• 你手动创建了server变量存储HTTP服务器实例，并且把Socket.IO绑定到了这个实例上，但创建这个server时没有传入Express的app作为请求处理器，这个server本身根本处理不了Express配置的静态资源路由。
• 如果你启动服务时调用的是app.listen(500)，这个方法会在内部新建一个独立的HTTP服务器来跑Express逻辑，这个新服务器没有挂载Socket.IO的路由处理逻辑，当前端请求/socket.io路径时，自然返回404。

统一使用同一个HTTP服务器实例同时承载Express服务和Socket.IO服务，不要拆分两个独立server，修正后的服务端代码如下：

const express = require("express");
const http = require("http");
const { Server } = require("socket.io");

const app = express();
// 将Express app作为请求处理器传入http.createServer
const server = http.createServer(app);
// Socket.IO挂载到同一个server实例上
const io = new Server(server);

// 原有Express路由配置
app.use("/", express.static("dist"));

// Socket.IO连接逻辑
io.on("connection", (socket) => {
    console.log("new socket connection");
});

// 必须用挂载了Socket.IO的server实例监听端口，不要调用app.listen
server.listen(500, () => {
    console.log("服务已启动在 http://localhost:500");
});

补充说明：

• 同域同端口部署场景下，客户端写的const socket = io()不需要修改，默认会自动请求当前域名端口下的Socket.IO服务。
• 不要混用app.listen()和手动创建的HTTP server：app.listen()会返回一个全新的、未挂载Socket.IO的HTTP实例，必然导致路由找不到的问题。
• 确认监听端口和前端访问端口一致，你报错中请求的是500端口，监听时不要写错端口号。

内容的提问来源于stack exchange，提问作者Devepation