NestJS WebSocketGateway同端口无法触发，异端口正常求助

核心原因 #

当不指定端口时，WebSocketGateway 默认需要附着在已有的 HTTP 服务器实例上才能复用 API 端口。如果没有正确关联 HTTP 服务器，Gateway 会尝试启动独立服务器但失败，导致无法触发。

具体解决步骤 #

1. 在 main.ts 中关联 HTTP 服务器与 Socket.IO #

确保 Nest 应用的 HTTP 服务器与 Socket.IO 适配器绑定，让 Gateway 自动复用 API 端口：

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { IoAdapter } from '@nestjs/platform-socket.io';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  
  // 全局配置 CORS（与 Gateway 配置保持一致，避免冲突）
  app.enableCors({
    origin: '*',
    credentials: true,
  });
  
  // 绑定 Socket.IO 到当前 HTTP 服务器实例
  app.useWebSocketAdapter(new IoAdapter(app.getHttpServer()));
  
  await app.listen(3000); // 这里替换为你的 API 端口
}
bootstrap();

2. 调整 WebSocketGateway 配置 #

移除端口参数，仅保留路径和 CORS 配置（如果全局已配置 CORS，可省略 Gateway 内的 CORS 配置）：

import { WebSocketGateway, SubscribeMessage, MessageBody } from '@nestjs/websockets';

@WebSocketGateway({
  path: '/socket-chat',
  // 若全局已配置 CORS，可删除下方配置
  cors: {
    origin: '*',
    credentials: true,
  },
})
export class ChatGateway {
  @SubscribeMessage('message')
  handleMessage(@MessageBody() data: string): string {
    return `Received: ${data}`;
  }
}

3. 前端连接配置 #

前端使用与 API 相同的端口，指定对应路径：

import { io } from 'socket.io-client';

// 替换为你的 API 域名/端口
const socket = io('http://localhost:3000', {
  path: '/socket-chat',
});

socket.on('connect', () => {
  console.log('WebSocket 连接成功');
});

4. 排查中间件冲突 #

如果 API 端口有自定义中间件，确保不会拦截 WebSocket 的 Upgrade 请求。例如 Express 中间件需允许携带 Upgrade 头的请求通过，避免过滤掉 WebSocket 握手请求。

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