使用Socket.io+TypeScript+React：Node服务端this.io.on()未执行问题排查

嘿，看起来你在Node和React之间的Socket.io连接上卡壳了——服务器只输出了listen日志，但完全没捕获到客户端连接，对吧？我碰到过好多次这种情况，大概率是连接链路的某个环节没打通，给你梳理几个最常见的排查方向：

1. 前端用错了连接方式 #

Socket.io不是原生WebSocket，它有自己的一套连接协议，绝对不能用new WebSocket()直接连！必须用官方的socket.io-client库，而且连接地址得和服务器的HTTP地址完全匹配：

比如React项目里正确的写法是这样的：

// 先安装依赖：npm install socket.io-client
import { io } from 'socket.io-client';

// 注意这里用的是HTTP地址，Socket.io会自动处理WebSocket升级
const socket = io('http://localhost:你的Node服务器端口');

// 先在前端打个日志，确认客户端自己有没有连上
socket.on('connect', () => {
  console.log('客户端成功连到服务器啦！');
});

如果前端用了原生WebSocket或者地址写错（比如漏了端口、硬写ws://协议），服务器的connection事件根本不会被触发。

2. 服务器端的Socket.io初始化有问题 #

从你给出的代码片段看，你应该是用http模块创建的服务器，然后绑定Socket.io？这里有两个很容易踩的坑：

• 必须把Socket.io正确挂载到HTTP服务器实例上
• 跨域配置绝对不能少（React默认跑3000端口，Node如果是其他端口，浏览器会因为跨域阻止连接）

正确的服务器初始化代码应该是这样的：

import * as http from 'http';
import * as socketIo from 'socket.io';
import App from './App';

// 先创建HTTP服务器
const server = http.createServer(App);
// 把Socket.io挂载到这个服务器上，同时配置跨域
const io = new socketIo.Server(server, {
  cors: {
    origin: "http://localhost:3000", // 你的React项目地址
    methods: ["GET", "POST"]
  }
});

// 现在再监听connection事件
io.on('connection', (socket) => {
  console.log('Connected client on port %s.', 你的Node端口);
  // 其他业务逻辑...
});

// 最后启动服务器
const PORT = process.env.PORT || 5000;
server.listen(PORT, () => {
  console.log('listen'); // 你看到的这条日志
});

如果你的SocketIO类里没有把io实例和HTTP服务器绑定，或者漏了跨域配置，客户端连都连不上，服务器自然不会触发connection事件。

3. 端口不匹配或代理拦截 #

• 要确保前端连接的端口和Node服务器监听的端口完全一致，Socket.io是依附于HTTP服务器的，不会单独开端口。
• 如果你的Node服务器在容器里跑，或者用了Nginx代理，要确保代理配置正确转发WebSocket请求。比如Nginx需要加这段配置：

location /socket.io/ {
    proxy_pass http://localhost:你的Node端口;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

本地开发的话，也有可能是浏览器插件（比如广告拦截器）阻止了WebSocket连接，可以试试禁用插件再测试。

快速验证小技巧 #

先在浏览器控制台执行fetch('http://localhost:你的Node端口/socket.io/')，如果返回类似{"code":0,"message":"Transport unknown"}的JSON，说明服务器的Socket.io服务是正常的；如果返回404或跨域错误，先把这个问题解决掉再说。另外，尽量保证客户端socket.io-client的版本和服务器socket.io的大版本一致（比如都是4.x），版本不兼容也会导致连接失败。

内容的提问来源于stack exchange，提问作者Johan Söderlund