NestJS WebSocket连接成功但无法接收消息问题排查

一、消息无法被后端接收的问题 #

• 前端通过Chrome开发者工具建立WebSocket连接：let socket = new WebSocket('ws://localhost:3000');，连接状态正常（readyState为1），后端handleConnection方法的断点可正常触发。
• 但调用socket.send('hello testing');发送消息后，后端handleMessage方法的断点从未触发，消息未被后端接收。

二、关于WsAdapter配置的疑问 #

代码中app.useWebSocketAdapter(new WsAdapter(app));这行是否正确且必要？部分在线示例里没有这行代码，但移除它后无法建立WebSocket连接。

相关代码文件 #

app.gateway.ts

import { Logger } from '@nestjs/common';
import {
  SubscribeMessage,
  WebSocketGateway,
  OnGatewayInit,
  OnGatewayConnection,
  OnGatewayDisconnect,
  WebSocketServer,
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway()
export class AppGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer()
  private wss: Server;
  private logger: Logger = new Logger('AppGateway');

  afterInit(server: Server) {
    this.logger.log('Initialized!');
  }
  handleDisconnect(client: Socket) {
    this.logger.log(`Client connected: ${client.id}`);
  }

  handleConnection(client: Socket, ...args: any[]) {
    this.logger.log(`Client disconnected: ${client.id}`);
  }

  @SubscribeMessage('*')
  handleMessage(client: Socket, text: string): void {
    this.wss.emit('msgToClient', text);  // 未执行到该行
  }
}

main.ts

import { join } from 'path';
import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { WsAdapter } from '@nestjs/platform-ws' // 添加该行

import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.enableCors();
  app.useWebSocketAdapter(new WsAdapter(app)); // 添加该行
  await app.listen(3000);
}
bootstrap();

app.module.ts

import { Module } from '@nestjs/common';
import { AppGateway } from './app.gateway';

@Module({
  imports: [],
  controllers: [],
  providers: [AppGateway],
})
export class AppModule {}

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