求助：Socket.io无法与Express.js服务器建立连接问题排查

看起来你的连接失败大概率是因为Socket.io中间件里使用express-session的方式有误，再加上客户端事件注册的小问题，咱们一步步来解决：

1. 修复客户端connect事件的回调写法 #

你现在的代码：

socket.on('connect', console.log(socket.connected) )

这里的console.log(socket.connected)会立即执行（在注册事件的时候就打印了当前的false），而不是等到连接成功时才执行。正确的写法应该是把它包在一个箭头函数里：

socket.on('connect', () => {
  console.log(socket.connected); // 连接成功后这里会打印true
});

这个修改能让你看到真实的连接状态，但这不是连接失败的根本原因，接下来解决核心问题。

2. 修复Socket.io中express-session的使用方式 #

你的后端代码里，直接把express-session的中间件传给了Socket.io的use方法，但express-session的中间件签名是(req, res, next)，而Socket.io的socket.request虽然是类HTTP请求对象，但你传了空对象作为res，这会导致session中间件无法正常工作（比如无法设置cookie、处理会话），进而触发服务器内部错误，导致连接失败。

这里提供两种可行方案：

方案一：使用express-socket.io-session包（推荐） #

这个包专门用来在Socket.io中集成express-session，步骤如下：

1. 安装包：

npm install express-socket.io-session

2. 修改后端代码：

const express = require('express');
const cors = require('cors');
const app = express();
const session = require('./db/session'); // 假设这是你初始化好的express-session实例
const { createServer } = require('http');
const { Server } = require('socket.io');
const sharedsession = require("express-socket.io-session"); // 导入适配包
const PORT = process.env.PORT || 5000;
const httpServer = createServer(app);

app.use(cors({
  origin: process.env.DEV_ORIGIN,
  credentials: true,
}));

app.use(session); // 先让Express应用使用session中间件

const io = new Server(httpServer, {
  cors: {
    origin: process.env.DEV_ORIGIN,
    methods: ["GET", "POST"],
    credentials: true
  }
});

// 使用sharedsession把Express的session共享给Socket.io
io.use(sharedsession(session, {
  autoSave:true
}));

httpServer.listen(PORT, () => console.log(`Server running on port ${PORT}`));

io.on('connection', function(socket) {
  console.log('Connected');
  // 现在你可以通过socket.handshake.session访问会话数据
});

方案二：手动适配session中间件（不推荐，易出错） #

如果你不想额外安装包，可以手动模拟res对象的必要方法，但这种方式可能存在兼容性问题：

io.use((socket, next) => {
  // 创建模拟的res对象，实现session中间件需要的基础方法
  const mockRes = {
    getHeader: () => {},
    setHeader: () => {},
    end: () => {}
  };
  session(socket.request, mockRes, (err) => {
    if (err) return next(err);
    next();
  });
});

3. 排查版本兼容性问题 #

确保Socket.io客户端和服务器版本兼容，比如服务器用socket.io@4.x，客户端就要用socket.io-client@4.x，版本不匹配也会导致连接失败。可以通过以下命令查看版本：

# 查看服务器版本
npm list socket.io
# 查看客户端版本
npm list socket.io-client

如果版本不一致，升级或降级到相同大版本即可。

4. 验证CORS配置 #

虽然你的CORS配置看起来没问题，但可以再确认：

• 确保process.env.DEV_ORIGIN确实是http://localhost:3000，没有拼写错误
• Socket.io的CORS配置和Express的CORS配置保持一致，避免冲突

按照以上步骤修改后，应该就能解决连接失败的问题，后端的connection事件也会正常触发。

内容的提问来源于stack exchange，提问作者A-PSquestions