Socket.io + TypeScript 项目中Socket.io无法监听新连接问题排查

问题核心原因 #

io.on("connection") 事件仅会在Socket.IO客户端主动发起Socket.IO协议的连接请求时触发。你直接通过浏览器访问 http://localhost:3001/ 发起的是普通HTTP GET请求，走标准HTTP响应流程，不会初始化Socket.IO长连接，自然不会触发对应的连接日志。

验证连接逻辑的方法 #

你可以按以下步骤验证功能是否正常：

• 第一步：给express添加静态资源托管规则，在server.ts的app.use(router)前添加如下代码：

app.use(express.static('public'))

• 第二步：项目根目录新建public文件夹，在文件夹内新建index.html测试页，内容如下：

<!DOCTYPE html>
<html>
<body>
  <!-- 引入服务端内置的Socket.IO客户端 -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    // 主动发起Socket.IO连接请求
    const socket = io()
  </script>
</body>
</html>

• 第三步：重启服务后，用浏览器访问http://localhost:3001/index.html，此时服务端就会正常打印连接相关的日志。

如果是前后端分离架构的场景，需要额外配置Socket.IO的跨域规则，初始化Server时修改配置即可：

const io = new Server(server, {
  cors: {
    origin: "*" // 生产环境请替换为实际的前端域名
  }
});

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