Websockets

网关

学习如何在 NestJS 中使用 WebSocket 网关来处理实时通信

网关

本文档其他地方讨论的大多数概念,如依赖注入、装饰器、异常过滤器、管道、守卫和拦截器,同样适用于网关。在可能的情况下,Nest 抽象了实现细节,使相同的组件可以在基于 HTTP 的平台、WebSockets 和微服务中运行。本节涵盖了 Nest 中特定于 WebSockets 的方面。

在 Nest 中,网关只是一个用 @WebSocketGateway() 装饰器注解的类。从技术上讲,网关是平台无关的,这使得它们在创建适配器后与任何 WebSockets 库兼容。开箱即用支持两个 WS 平台:socket.iows。您可以选择最适合您需求的平台。此外,您还可以按照此指南构建自己的适配器。

提示 网关可以被视为提供者;这意味着它们可以通过类构造函数注入依赖项。同样,网关也可以被其他类(提供者和控制器)注入。

安装

要开始构建基于 WebSockets 的应用程序,首先安装所需的包:

$ npm i --save @nestjs/websockets @nestjs/platform-socket.io

概述

通常,每个网关都监听与 HTTP 服务器 相同的端口,除非您的应用程序不是 Web 应用程序,或者您手动更改了端口。可以通过向 @WebSocketGateway(80) 装饰器传递参数来修改此默认行为,其中 80 是选择的端口号。您还可以使用以下构造设置网关使用的命名空间

@WebSocketGateway(80, { namespace: 'events' })

警告 网关在被现有模块的 providers 数组引用之前不会被实例化。

您可以将任何支持的选项作为 @WebSocketGateway() 装饰器的第二个参数传递给 socket 构造函数,如下所示:

@WebSocketGateway(81, { transports: ['websocket'] })

网关现在正在监听,但我们还没有订阅任何传入的消息。让我们创建一个处理程序,它将订阅 events 消息并用完全相同的数据响应用户。

@SubscribeMessage('events')
handleEvent(@MessageBody() data: string): string {
  return data;
}

提示 @SubscribeMessage()@MessageBody() 装饰器从 @nestjs/websockets 包导入。

创建网关后,我们可以在模块中注册它。

import { Module } from '@nestjs/common';
import { EventsGateway } from './events.gateway';

@Module({
  providers: [EventsGateway]
})
export class EventsModule {}

您还可以向装饰器传递属性键以从传入的消息体中提取它:

@SubscribeMessage('events')
handleEvent(@MessageBody('id') id: number): number {
  // id === messageBody.id
  return id;
}

如果您不想使用装饰器,以下代码在功能上是等效的:

@SubscribeMessage('events')
handleEvent(client: Socket, data: string): string {
  return data;
}

在上面的示例中,handleEvent() 函数接受两个参数。第一个是特定于平台的 socket 实例,第二个是从客户端接收的数据。不过,不建议使用这种方法,因为它需要在每个单元测试中模拟 socket 实例。

一旦接收到 events 消息,处理程序就会发送一个确认,其中包含通过网络发送的相同数据。此外,还可以使用特定于库的方法发出消息,例如,通过使用 client.emit() 方法。为了访问连接的 socket 实例,请使用 @ConnectedSocket() 装饰器。

@SubscribeMessage('events')
handleEvent(
  @MessageBody() data: string,
  @ConnectedSocket() client: Socket,
): string {
  return data;
}

提示 @ConnectedSocket() 装饰器从 @nestjs/websockets 包导入。

但是,在这种情况下,您将无法利用拦截器。如果您不想响应用户,可以简单地跳过 return 语句(或显式返回"假值",例如 undefined)。

现在当客户端发出如下消息时:

socket.emit('events', { name: 'Nest' });

handleEvent() 方法将被执行。为了监听从上述处理程序内发出的消息,客户端必须附加相应的确认监听器:

socket.emit('events', { name: 'Nest' }, (data) => console.log(data));

多重响应

确认只分发一次。此外,原生 WebSockets 实现不支持它。为了解决这个限制,您可以返回一个由两个属性组成的对象。event 是发出事件的名称,data 是必须转发给客户端的数据。

@SubscribeMessage('events')
handleEvent(@MessageBody() data: unknown): WsResponse<unknown> {
  const event = 'events';
  return { event, data };
}

提示 WsResponse 接口从 @nestjs/websockets 包导入。

警告 如果您的 data 字段依赖于 ClassSerializerInterceptor,您应该返回一个实现 WsResponse 的类实例,因为它会忽略普通的 JavaScript 对象响应。

为了监听传入的响应,客户端必须应用另一个事件监听器。

socket.on('events', (data) => console.log(data));

异步响应

消息处理程序能够同步或异步响应。因此,支持 async 方法。消息处理程序还能够返回 Observable,在这种情况下,结果值将被发出,直到流完成。

@SubscribeMessage('events')
onEvent(@MessageBody() data: unknown): Observable<WsResponse<number>> {
  const event = 'events';
  const response = [1, 2, 3];

  return from(response).pipe(
    map(data => ({ event, data })),
  );
}

在上面的示例中,消息处理程序将响应 3 次(数组中的每个项目)。

生命周期钩子

有 3 个有用的生命周期钩子可用。它们都有相应的接口,如下表所述:

钩子描述
OnGatewayInit强制实现 afterInit() 方法。将特定于库的服务器实例作为参数(如果需要,展开其余部分)。
OnGatewayConnection强制实现 handleConnection() 方法。将特定于库的客户端 socket 实例作为参数。
OnGatewayDisconnect强制实现 handleDisconnect() 方法。将特定于库的客户端 socket 实例作为参数。

提示 每个生命周期接口都从 @nestjs/websockets 包公开。

服务器和命名空间

有时,您可能希望直接访问原生的、特定于平台的 服务器实例。对此对象的引用作为参数传递给 afterInit() 方法(OnGatewayInit 接口)。另一个选择是使用 @WebSocketServer() 装饰器。

@WebSocketServer()
server: Server;

此外,您可以使用 namespace 属性检索相应的命名空间,如下所示:

@WebSocketGateway({ namespace: 'my-namespace' })
export class EventsGateway {
  @WebSocketServer()
  namespace: Namespace;
}

@WebSocketServer() 装饰器通过引用 @WebSocketGateway() 装饰器存储的元数据来注入服务器实例。如果您向 @WebSocketGateway() 装饰器提供命名空间选项,@WebSocketServer() 装饰器将返回 Namespace 实例而不是 Server 实例。

注意 @WebSocketServer() 装饰器从 @nestjs/websockets 包导入。

Nest 将在准备使用时自动将服务器实例分配给此属性。

示例

可在此处获得工作示例。