Nest.js 如何使用 WebSockets？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 Nest.js 中使用 WebSockets 可以通过 @nestjs/websockets 模块来实现。以下是使用 WebSockets 的基本步骤：

安装依赖：首先需要安装 @nestjs/websockets 和 socket.io 包。
```
npm install @nestjs/websockets socket.io
```

创建 WebSocket 网关：使用 @WebSocketGateway() 装饰器创建一个 WebSocket 网关类。这个类将处理 WebSocket 连接、消息和事件。

// www.javascriptcn.com code example
import { WebSocketGateway, WebSocketServer, SubscribeMessage, MessageBody } from '@nestjs/websockets';
import { Server } from 'socket.io';

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

  @SubscribeMessage('message')
  handleMessage(@MessageBody() data: string): void {
    this.server.emit('message', data);
  }
}

注册网关：在模块中注册 WebSocket 网关。

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

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

配置 WebSocket 选项：可以通过 @WebSocketGateway() 装饰器的参数来配置 WebSocket 选项，例如端口、CORS 等。
```
@WebSocketGateway({ cors: true })
export class ChatGateway {
  // ...
}
```

客户端连接：在客户端使用 socket.io-client 或其他 WebSocket 客户端库连接到服务器。

// www.javascriptcn.com code example
const io = require('socket.io-client');
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', 'Hello, server!');

本题详细解读

WebSocket 网关的作用

WebSocket 网关是 Nest.js 中处理 WebSocket 连接的核心部分。它通过 @WebSocketGateway() 装饰器标记为一个 WebSocket 网关类，并使用 @WebSocketServer() 装饰器来访问底层的 WebSocket 服务器实例（通常是 socket.io 的 Server 实例）。

消息处理

在 WebSocket 网关中，可以使用 @SubscribeMessage() 装饰器来订阅特定的消息事件。当客户端发送消息时，网关会调用相应的方法来处理消息。例如，handleMessage 方法会接收客户端发送的消息，并通过 this.server.emit() 方法将消息广播给所有连接的客户端。

配置选项

@WebSocketGateway() 装饰器可以接受一个配置对象，用于设置 WebSocket 服务器的行为。常见的配置选项包括：

port: 指定 WebSocket 服务器监听的端口。
namespace: 指定 WebSocket 的命名空间。
cors: 配置跨域资源共享（CORS）选项。

客户端连接

客户端可以使用 socket.io-client 或其他 WebSocket 客户端库连接到 Nest.js 的 WebSocket 服务器。连接成功后，客户端可以发送消息并监听服务器广播的消息。

示例代码

以下是一个完整的示例代码，展示了如何在 Nest.js 中使用 WebSockets：

// www.javascriptcn.com code example
// chat.gateway.ts
import { WebSocketGateway, WebSocketServer, SubscribeMessage, MessageBody } from '@nestjs/websockets';
import { Server } from 'socket.io';

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

  @SubscribeMessage('message')
  handleMessage(@MessageBody() data: string): void {
    this.server.emit('message', data);
  }
}

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

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

// main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

客户端代码

// www.javascriptcn.com code example
// client.js
const io = require('socket.io-client');
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', 'Hello, server!');

通过以上步骤，你可以在 Nest.js 中轻松实现 WebSocket 功能，并处理客户端与服务器之间的实时通信。