实时应用程序（如聊天应用程序或协作工具）需要一种允许服务器和客户端之间即时交换数据的通信机制。流行的 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
