Socket.io服务端connection监听事件未触发 无法打印连接日志问题求助

问题根因 #

• 无效事件监听：connect_error是Socket.IO客户端专属事件，绑定在服务端io实例上不会触发，属于无效配置
• 日志误导：服务端监听端口用PORT || this.port，但启动日志打印固定的this.port，如果环境变量PORT存在，会导致你误以为服务监听的是this.port，客户端连错端口自然无法触发连接事件
• 初始化时机问题：Socket服务事件绑定早于HTTP服务启动，极端场景下会丢失初始连接事件

修复步骤 #

1. 修正SocketServer类代码 #

移除无效的connect_error监听，补充服务端错误和客户端断连监听方便排查：
注：原代码方法名拼写为startSever（少了字母r），如果你保留原拼写，调用时保持一致即可

import { Server } from 'socket.io';

class SocketServer {
  public io;
  constructor(server: any) {
    this.io = new Server(server, {
      cors: {
        origin: '*',
      },
    });
  }

  startServer() {
    // 服务端错误监听
    this.io.on('error', (err) => {
      console.log(`Socket服务错误: ${err.message}`);
    });

    this.io.on('connection', (socket) => {
      console.log('Socket connected successfully，连接ID：', socket.id);
      // 客户端断连监听
      socket.on('disconnect', (reason) => {
        console.log('客户端断开连接，原因：', reason);
      });
    });
  }
}

export default SocketServer;

2. 修正入口初始化逻辑 #

调整启动顺序，先启动HTTP服务监听端口，再初始化Socket服务，同时打印实际监听的端口避免误导：

const { PORT } = process.env;
const runPort = PORT || this.port;
const server = http.createServer(this.app);

server.listen(runPort, () => {
  // 打印实际监听的端口，和客户端连接地址对齐
  console.log(`App listening on the port ${runPort}`);
  const io = new SocketServer(server);
  io.startServer();
});

3. 客户端连接验证 #

可以用以下代码快速验证服务端是否正常，确保连接地址端口和服务端runPort完全一致：

// 客户端测试代码
import { io } from "socket.io-client";
// 替换为你服务端实际的访问地址
const socket = io("http://localhost:你的实际端口");
socket.on("connect", () => {
  console.log("客户端连接成功，ID：", socket.id);
});
socket.on("connect_error", (err) => {
  console.log("客户端连接失败，错误：", err);
});

额外排查要点 #

• 本地调试时不要混用localhost和127.0.0.1，两端地址保持完全一致
• 如果使用了Nginx等反向代理，需要添加WebSocket转发配置，开启Upgrade和Connection请求头的透传
• 确认服务端和客户端的Socket.IO大版本一致，跨大版本（比如v2和v4）会出现无法连接的问题

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