React集成socket.io-client后每5秒重复创建连接问题求助

1. 先校验两端版本兼容性 #

Socket.IO 客户端和服务端的大版本必须完全匹配，否则会出现握手失败反复重连的问题：

• 查看服务端版本：执行npm list socket.io
• 查看客户端版本：执行npm list socket.io-client
• 若版本不一致，卸载重装为同一大版本即可，比如均使用v4.x版本。

2. 检查跨域配置 #

你当前的服务端代码没有配置Socket.IO的跨域规则，React开发环境默认运行在http://localhost:3000，和服务端端口3001不同，跨域会导致握手被拦截，触发自动重连。
在服务端初始化Socket.IO时添加跨域配置即可：

const io = require('socket.io')(server, {
  cors: {
    origin: "http://localhost:3000", // 允许React开发地址访问
    credentials: true
  }
});

3. 查看客户端报错与连接状态 #

打开浏览器开发者工具排查：

• 查看Console标签页，有没有CORS报错、网络报错
• 查看Network标签页，筛选ws类型请求，看WebSocket握手是否成功；如果没有WebSocket请求，只有大量polling接口请求，说明没有成功升级到WebSocket协议
• 在客户端添加事件监听，打印断开原因：

socket.on('disconnect', (reason) => {
  console.log('连接断开原因：', reason)
})
socket.on('connect_error', (err) => {
  console.log('连接错误：', err)
})

4. 排查React开发环境特性影响 #

• React 18 开发环境下默认开启严格模式，会触发两次组件挂载，如果你将socket实例声明在组件内部，会重复初始化；你当前代码是声明在组件外部，可排除该问题，但如果开启了热重载（HMR），代码更新时可能会重新创建socket实例，可打包后在生产环境测试是否还会重连
• 可以写一个不含React的纯HTML测试页面，直接引入socket.io客户端连接服务端，排查是否是React生态导致的问题

5. 排查网络与环境问题 #

• 测试是否是传输协议被拦截：客户端初始化时强制指定WebSocket传输，看是否能连接成功：

const socket = io('http://localhost:3001', {
  transports: ['websocket']
});

如果强制走WebSocket后连接失败，说明本地环境的防火墙、代理、VPN等工具拦截了WebSocket协议

• 检查3001端口是否被其他程序占用，或者端口被防火墙限制访问

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