[NsetJs] 使用websocket简单介绍

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

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

  1. 双向通信:WebSocket 允许客户端和服务器之间进行双向通信,可以在任何一方发送消息而无需等待请求和响应的过程。
  2. 持久连接:WebSocket 连接会在客户端和服务器之间保持长时间打开,与传统的 HTTP 请求/响应模型不同,不需要每次通信都建立新的连接。
  3. 较低的延迟:由于持久连接和双向通信的特性,WebSocket 提供了较低的延迟,可以更快地进行实时通信
  4. 更少的数据开销:WebSocket 使用二进制数据格式进行通信,相对于传统的基于文本的 HTTP 通信,它可以减少数据传输的开销。
  5. 跨域支持:WebSocket 支持跨域通信,使得客户端能够与不同域名下的服务器进行实时通信。
  6. 灵活性和扩展性: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 连接进行实时交互。

相关文章
|
6月前
websocket 的使用
websocket 的使用
|
前端开发 网络协议 API
什么是WebSocket?
WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。
2171 0
什么是WebSocket?
|
2月前
|
移动开发 网络协议 前端开发
H5与WebSocket
H5与WebSocket
|
2月前
|
Web App开发 移动开发 JavaScript
|
3月前
|
网络协议 API 数据安全/隐私保护
websocket初识
websocket初识
44 2
|
5月前
|
存储 网络协议 JavaScript
WebSocket相关知识
WebSocket相关知识
|
4月前
|
Web App开发 定位技术 C#
|
5月前
|
移动开发 前端开发 Java
详解WebSocket
详解WebSocket
104 0
|
6月前
|
XML JSON 前端开发
WebSocket是什么
【4月更文挑战第27天】WebSocket,即Web浏览器与Web服务器之间全双工通信标准。
|
6月前
|
移动开发 网络协议 前端开发
WebSocket一
WebSocket一