React/Express项目Socket.io无法接收消息且返回404问题咨询

问题1：/socket.io/?EIO=4&transport=polling&t=****格式的GET请求相关说明 #

• 这个请求是Socket.io客户端默认发起的握手+降级传输请求，Socket.io为了兼容不支持WebSocket的运行环境，不会直接发起WebSocket连接，会先走HTTP协议完成两端握手，协商支持的传输方式，确认可用后再升级为WebSocket连接，如果WebSocket连接失败就会直接用HTTP长轮询完成数据传输。
• 参数说明：EIO=4代表使用的Engine.IO协议版本为4，transport=polling代表当前使用轮询传输模式，t是随机参数，用来防止浏览器缓存请求。
• 持续触发的原因：当前请求返回404，握手流程失败，Socket.io客户端会按照默认的重连策略，不断发起新的请求尝试建立连接。

问题2：Express报socket.io路由不存在的解决方法 #

出现这个错误的核心原因是Socket.io的请求被Express的路由逻辑拦截，没有进入Socket.io的处理栈，按以下步骤排查修复：

1. 调整中间件和Socket.io的初始化顺序
   所有的路由兜底、404类中间件必须放在Socket.io绑定服务之后注册，你当前代码中的自定义中间件如果包含RouteNotFound相关的逻辑，放在Socket.io初始化之前就会直接拦截走/socket.io路径的请求，返回404。
2. 适配高版本Socket.io的CORS配置
   Socket.io v3及以上版本不会复用Express的CORS配置，需要单独配置跨域：

// 替换原来的require('socket.io').listen(server)写法
import { Server } from 'socket.io'
const io = new Server(server, {
  cors: {
    origin: "*" // 生产环境替换为你的前端实际访问地址，比如http://localhost:3000
  }
})

3. 对齐前后端Socket.io大版本
   如果前端用的是Socket.io v4，服务端也要用v4版本，跨大版本会出现握手失败的问题。
4. 可选优化：客户端可以强制走WebSocket传输，跳过轮询环节：

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

问题3：WebSocket消息避开HTTP中间件的方法 #

• 正常情况下Socket.io的WebSocket数据帧不会进入Express的中间件处理链，只有最开始的HTTP握手请求会走Express的全局中间件。
• 如果需要过滤握手请求，不需要修改原有HTTP中间件，只要给中间件加路径判断即可，例如：

app.use((req, res, next) => {
  // 跳过socket.io相关请求
  if(req.path.startsWith('/socket.io')) return next();
  // 原有仅适配HTTP的中间件逻辑写在这里
})

• 如果需要给Socket.io连接加专属的校验逻辑，直接用Socket.io提供的io.use()方法注册专属中间件即可，和Express中间件完全隔离。

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