如何在 Nest.js 中使用 WebSockets 构建实时应用程序

实时应用程序（如聊天应用程序或协作工具）需要一种允许服务器和客户端之间即时交换数据的通信机制。流行的 Node.js 框架 Nest.js 为使用 WebSockets 构建实时应用程序提供了出色的支持。在本文中，我们将探讨如何在 Nest.js 中使用 WebSockets 构建实时应用程序，并演示代码示例和最佳实践。

前提条件

要跟上本文中的示例，请确保已安装以下软件：

Node.js 和 npm
Nest.js CLI（命令行界面）

设置 Nest.js 应用程序

首先，让我们使用 Nest CLI 设置一个基本的 Nest.js 应用程序。打开终端并运行以下命令：

nest new realtime-app

此命令创建一个名为“realtime-app”的新 Nest.js 项目。更改到项目目录：

cd realtime-app

创建 WebSocket 网关

WebSocket 网关是服务器和客户端之间的中介。它处理 WebSocket 连接并实现实时通信。要创建 WebSocket 网关，请运行以下命令：

nest generate gateway chat

这会在 “src “目录下生成一个名为 “chat.gateway.ts “的新 WebSocket 网关。打开生成的文件并按以下步骤更新：

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

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

这段代码定义了一个名为 ChatGateway 的 WebSocket 网关和一个 WebSocket 服务器实例。

处理 WebSocket 事件

接下来，我们来处理 WebSocket 事件，如连接和断开。更新 ChatGateway 类如下：

import { OnGatewayConnection, OnGatewayDisconnect } from '@nestjs/websockets';

@WebSocketGateway()
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer()
  server: Server;

  handleConnection(client: any) {
    // Handle connection event
  }

  handleDisconnect(client: any) {
    // Handle disconnection event
  }
}

在 handleConnection 和 handleDisconnect 方法中，您可以定义处理新客户端连接和断开连接的逻辑。

发送和接收消息

要通过 WebSocket 发送和接收消息，请使用 @SubscribeMessage 装饰器。更新 ChatGateway 类如下：

import { SubscribeMessage, MessageBody, ConnectedSocket } from '@nestjs/websockets';
import { Socket } from 'socket.io';

@WebSocketGateway()
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer()
  server: Server;

  handleConnection(client: Socket) {
    // Handle connection event
  }

  handleDisconnect(client: Socket) {
    // Handle disconnection event
  }

  @SubscribeMessage('message')
  handleMessage(@MessageBody() data: string, @ConnectedSocket() client: Socket) {
    // Handle received message
    this.server.emit('message', data); // Broadcast the message to all connected clients
  }
}

在上述代码中，我们添加了一个用 @SubscribeMessage('message') 装饰的新方法 handleMessage。它会处理收到的消息，并使用 this.server.emit() 向所有连接的客户端广播。

与 Nest.js 应用程序集成

要将 WebSocket 网关与 Nest.js 应用程序集成，请打开 src/app.module.ts 文件并按如下方式更新：

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

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

这段代码将 ChatGateway 添加到 providers 数组中，使其可以注入到其他组件中。

测试实时功能

为了测试实时功能，让我们使用 JavaScript 的 WebSocket API 创建一个基本的客户端应用程序。创建一个新的 HTML 文件 index.html，并添加以下代码：

<!DOCTYPE html>
<html>
  <body>
    <script>
      const socket = new WebSocket('ws://localhost:3000');

      socket.addEventListener('open', (event) => {
        console.log('Connected to WebSocket server');
        socket.send('Hello, server!');
      });

      socket.addEventListener('message', (event) => {
        console.log('Message from server:', event.data);
      });
    </script>
  </body>
</html>

在终端中执行以下命令，确保 Nest.js 应用程序正在运行：

npm run start:dev

在Web浏览器中打开 index.html 文件，并打开浏览器的开发人员控制台。在控制台中看到打印出连接消息，表明 WebSocket 连接成功。客户端应用程序发送的信息将被服务器接收，并广播回所有已连接的客户端。

结论

在本文中，我们探讨了如何在 Nest.js 中利用 WebSockets 构建实时应用程序。我们学习了如何创建 WebSocket 网关、处理 WebSocket 事件、发送和接收消息以及将网关与 Nest.js 应用程序集成。按照提供的代码示例和最佳实践，您现在就可以使用 Nest.js 和 WebSockets 构建强大的实时应用程序。

本文来自作者投稿，版权归原作者所有。如需转载，请注明出处：https://www.nxrte.com/jishu/im/33416.html