Socket.io客户端连接404错误求助：服务端与客户端配置排查

问题根源 #

核心错误在于：你创建了绑定Socket.io的http服务器，但最终启动的是Express的app实例，而非这个http服务器。Socket.io是挂载在http服务器上的，用app.listen()启动时，Socket.io的端点不会被加载，导致客户端请求/socket.io/时返回404。

修复步骤 #

修改server.js的最后一行：
将

app.listen(3000);

替换为

http.listen(3000, () => {
  console.log("Server running on port 3000");
});

修复后的完整server.js代码 #

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http, {cors: {origin: "*"}});
const path = require('path');

app.set('view engine', 'ejs');

app.use(express.json({extended: true, limit: '1mb'}));

io.on('connection', (socket) => {
 console.log("new connection " + socket.id); // 改用socket.id输出更清晰的连接标识
});

app.get("/", (req, res, next) => {
 res.render('index');
});

console.log("Ready");

http.listen(3000, () => {
  console.log("Server running on port 3000");
});

额外说明 #

• 客户端无需额外配置io的URL，因为客户端与服务端同域，io()会自动请求当前域名的/socket.io/端点。
• 你安装的socket.io-client属于冗余依赖，浏览器端已通过CDN加载socket.io.min.js，该包仅适用于Node.js环境的客户端。

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