NestJS WebSocket初始化失败，客户端连接报错求助

1. 修复依赖版本不兼容问题 #

你的@nestjs/core是9.x版本，但@nestjs/platform-socket.io使用了10.x版本，NestJS核心包与附属包版本必须保持一致，否则会出现初始化异常（比如afterInit方法不执行）。

执行以下命令降级Socket.IO相关包到匹配9.x的版本：

npm install @nestjs/platform-socket.io@^9.0.0 socket.io@^4.6.0

2. 修正WebSocket客户端连接方式 #

NestJS的@nestjs/platform-socket.io基于Socket.IO实现，并非原生WebSocket协议，不能直接用new WebSocket()连接，必须使用Socket.IO客户端。

修改测试HTML页面如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket Test</title>
  <!-- 引入Socket.IO客户端CDN -->
  <script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
</head>
<body>
  <h1>WebSocket Test</h1>
  <script>
    // 连接Socket.IO服务器，指定端口和命名空间
    const socket = io('http://localhost:4040/chat');

    socket.on('connect', () => {
      console.log('Socket.IO connection established');
      // 发送消息到服务器的newMessage事件
      socket.emit('newMessage', { message: 'Hello Server!' });
    });

    socket.on('message', (data) => {
      console.log('Message from server:', data);
    });

    socket.on('disconnect', () => {
      console.log('Socket.IO connection closed');
    });

    socket.on('connect_error', (error) => {
      console.error('Socket.IO connection error:', error);
    });
  </script>
</body>
</html>

3. 完善网关配置（可选但推荐） #

如果需要使用/chat命名空间，需在网关装饰器中明确配置，同时添加CORS支持避免跨域问题：

修改chat.gateway.ts的@WebSocketGateway装饰器：

@WebSocketGateway(4040, {
  namespace: 'chat', // 指定命名空间为/chat
  cors: {
    origin: '*', // 开发环境允许所有来源，生产环境请指定具体域名
    credentials: true,
  },
})

4. 验证修复效果 #

重新启动应用：

npm run start:dev

此时控制台应该会打印WebSocket server initialized，打开测试页面后，控制台会显示连接成功的日志，并且能收到服务器返回的消息。

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