[NsetJs] 使用websocket简单介绍

最新推荐文章于 2025-04-21 08:00:58 发布

coderJason2020

最新推荐文章于 2025-04-21 08:00:58 发布

阅读量692

点赞数

文章标签： websocket 网络协议网络

本文链接：https://blog.youkuaiyun.com/wuzhangting/article/details/132424020

版权

WebSocket 是一种基于 TCP 的协议，它提供了双向实时通信的能力。相比传统的 HTTP 协议，WebSocket 具有更低的延迟和更高的性能。以下是 WebSocket 的一些特点和优势：

双向通信：WebSocket 允许客户端和服务器之间进行双向通信，可以在任何一方发送消息而无需等待请求和响应的过程。
持久连接：WebSocket 连接会在客户端和服务器之间保持长时间打开，与传统的 HTTP 请求/响应模型不同，不需要每次通信都建立新的连接。
较低的延迟：由于持久连接和双向通信的特性，WebSocket 提供了较低的延迟，可以更快地进行实时通信。
更少的数据开销：WebSocket 使用二进制数据格式进行通信，相对于传统的基于文本的 HTTP 通信，它可以减少数据传输的开销。
跨域支持：WebSocket 支持跨域通信，使得客户端能够与不同域名下的服务器进行实时通信。
灵活性和扩展性：WebSocket 具有灵活的握手协议，可以进行自定义的握手过程，并且支持扩展协议，可用于满足特定应用需求。

WebSocket 协议包含了一个标准化的握手过程，通过 HTTP 协议进行升级请求，一旦握手成功，连接将升级到 WebSocket，之后的通信交换将遵循 WebSocket 协议规范。

在 Web 开发中，你可以使用 JavaScript 的 WebSocket API 在浏览器中创建 WebSocket 客户端。对于服务器端，有许多编程语言和框架提供了对 WebSocket 的支持。

总结一下，WebSocket 提供了一种简单、高效且实时的双向通信方式，使得客户端和服务器能够实时地交换数据，广泛应用于实时聊天、在线游戏、股票行情、推送通知等领域。

在 NestJS 中使用 WebSocket，你可以使用 @nestjs/websockets 模块来实现实时双向通信。下面是使用 WebSocket 的详细介绍：

安装 @nestjs/websockets 模块：使用 npm 或者 yarn 安装 @nestjs/websockets 模块。

npm install --save @nestjs/websockets

创建 WebSocket 模块：在你的 NestJS 应用中创建一个 WebSocket 模块，用于处理 WebSocket 相关的逻辑。创建一个新的文件，命名为 websocket.module.ts。

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

@WebSocketGateway()
export class WebSocketModule {}

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

在这个示例中，我们创建了 WebSocketModule 并通过 @WebSocketGateway() 装饰器将其标记为 WebSocket 网关。AppGateway 是一个 WebSocket 网关的类，我们稍后会实现它。

实现 WebSocket 网关：在 app.gateway.ts 文件中实现 WebSocket 网关。WebSocket 网关负责处理客户端与服务器之间的实时通信。

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

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

  handleConnection(client: any) {
    console.log('New client connected');
  }

  handleDisconnect(client: any) {
    console.log('Client disconnected');
  }
}

在这个示例中，我们实现了 OnGatewayConnection 和 OnGatewayDisconnect 接口，分别处理客户端连接和断开连接的事件。@WebSocketServer() 装饰器用于将 server 属性绑定到 WebSocket 服务器对象上。

处理 WebSocket 消息：在 app.gateway.ts 中添加处理 WebSocket 消息的方法。

@WebSocketGateway()
export class AppGateway implements OnGatewayConnection, OnGatewayDisconnect {
  // ...

  @SubscribeMessage('message')
  handleMessage(client: Socket, payload: any): string {
    const message = `Received message: ${payload}`;
    this.server.emit('message', message);
    return message;
  }
}

在这个示例中，我们使用 @SubscribeMessage() 装饰器来定义一个处理名为 'message' 的消息的方法。当客户端发送 message 消息时，会触发 handleMessage() 方法，并将接收到的消息发送给所有连接的客户端。

使用 WebSocket 网关：在需要使用 WebSocket 功能的控制器、服务或模块中注入 AppGateway 并使用它。

@Controller()
export class AppController {
  constructor(private readonly appGateway: AppGateway) {}

  @Get()
  sendMessage(): string {
    this.appGateway.server.emit('message', 'Hello client!');
    return 'Message sent';
  }
}

在这个示例中，我们在控制器中注入了 AppGateway，并创建了一个简单的路由来发送消息给连接的客户端。

现在，你可以启动 NestJS 应用程序，并使用 WebSocket 客户端与服务器进行实时通信。可以通过访问 http://localhost:3000 来访问你的应用程序，并使用 WebSocket 连接进行实时交互。