Nestjs教程实时通信与WebSocket的支持

我正在学习Nestjs的实时通信功能,遇到了一些关于WebSocket实现的问题:

  1. 在Nestjs中如何快速搭建一个WebSocket服务器?官方文档的Gateway部分有些概念不太理解,能否用更简单的例子说明?

  2. WebSocket连接成功后,如何高效地广播消息给所有客户端?我看到有@SubscribeMessage@WebSocketServer,但不确定最佳实践是什么。

  3. 与前端建立连接时经常遇到跨域问题,Nestjs的WebSocket模块应该如何配置CORS?

  4. 实际项目中如何维护WebSocket的连接状态?比如用户掉线后怎么自动重连或清理资源?

  5. 有没有性能优化的建议?比如大量并发连接时需要注意哪些配置?

希望有经验的大佬能分享具体代码示例和实战心得!


3 回复

NestJS对WebSocket提供了很好的支持,可以轻松构建实时通信应用。首先安装依赖:npm install --save @nestjs/websockets socket.io

创建WebSocket服务,例如chat.service.ts,使用@WebSocketGateway()装饰器定义一个网关:

import { WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway()
export class ChatGateway {
  @WebSocketServer() server: Server;

  handleConnection(client: Socket) {
    console.log(`Client connected: ${client.id}`);
  }

  handleDisconnect(client: Socket) {
    console.log(`Client disconnected: ${client.id}`);
  }
}

配置模块,在app.module.ts中引入@nestjs/websockets模块,并注册网关:

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ChatGateway } from './chat.gateway';

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

运行应用后,WebSocket功能就准备好了,你可以通过Socket.IO客户端连接并与服务器交互。这种模式非常适合聊天室、在线游戏等需要实时通信的场景。


在NestJS中实现WebSocket支持非常方便。首先,安装依赖:npm install @nestjs/websockets socket.io

创建一个WebSocket服务,使用@WebSocketGateway()装饰器定义网关。例如:

import { WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
import { Server } from 'socket.io';

@WebSocketGateway()
export class ChatGateway {
  @WebSocketServer() server: Server;

  handleConnection(client: any) {
    console.log(`Client connected: ${client.id}`);
  }

  handleDisconnect(client: any) {
    console.log(`Client disconnected: ${client.id}`);
  }

  handleMessage(message: string) {
    this.server.emit('response', `Received: ${message}`);
  }
}

在模块文件中引入网关:

import { Module } from '@nestjs/common';
import { ChatGateway } from './chat.gateway';

@Module({
  providers: [ChatGateway],
})
export class AppModule {}

客户端可以通过Socket.IO连接到服务器并发送消息。这种方式非常适合实时通信场景,比如聊天室、在线游戏等。

NestJS实时通信与WebSocket支持教程

NestJS提供了对WebSocket的良好支持,主要通过两种方式实现实时通信:

  1. 基于socket.io的集成
  2. 使用原生WebSocket

1. 安装必要依赖

npm install @nestjs/websockets @nestjs/platform-socket.io
# 或使用原生WebSocket
npm install @nestjs/websockets @nestjs/platform-ws

2. 创建WebSocket网关

// src/chat/chat.gateway.ts
import { SubscribeMessage, WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway({
  cors: {
    origin: '*',
  },
})
export class ChatGateway {
  @WebSocketServer()
  server: Server;

  afterInit(server: Server) {
    console.log('WebSocket Gateway initialized');
  }

  handleConnection(client: Socket) {
    console.log(`Client connected: ${client.id}`);
  }

  handleDisconnect(client: Socket) {
    console.log(`Client disconnected: ${client.id}`);
  }

  @SubscribeMessage('message')
  handleMessage(client: Socket, payload: any): void {
    this.server.emit('message', payload);
  }
}

3. 注册网关模块

// src/chat/chat.module.ts
import { Module } from '@nestjs/common';
import { ChatGateway } from './chat.gateway';

@Module({
  providers: [ChatGateway],
})
export class ChatModule {}

4. 客户端连接示例

// 前端代码
const socket = io('http://localhost:3000');

socket.on('connect', () => {
  console.log('Connected to server');
});

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

// 发送消息
socket.emit('message', { text: 'Hello, WebSocket!' });

进阶功能

房间支持

@SubscribeMessage('joinRoom')
handleJoinRoom(client: Socket, room: string): void {
  client.join(room);
}

@SubscribeMessage('roomMessage')
handleRoomMessage(client: Socket, { room, message }): void {
  this.server.to(room).emit('roomMessage', message);
}

认证与中间件

@WebSocketGateway()
export class ChatGateway implements OnGatewayConnection {
  constructor(private authService: AuthService) {}

  async handleConnection(client: Socket) {
    try {
      const token = client.handshake.headers.authorization?.split(' ')[1];
      const user = await this.authService.verifyToken(token);
      client.user = user;
    } catch (e) {
      client.disconnect();
    }
  }
}

NestJS的WebSocket支持非常灵活,可以满足各种实时通信需求。

回到顶部