如何在 NestJS 中创建一个基于 WebSockets 的应用程序

什么是 Websocket

Websockets 是一种通信协议，它通过在 Web 浏览器和 Web 服务器之间建立的单个 TCP 连接提供全双工通信通道。这样，服务器无需客户端调用即可向浏览器发送信息。Websockets 有很多用途，如聊天应用程序、账户余额……所有内容都需要实时更新。

NestJS 中的 Websocket

根据 NestJS 的说法，网关只是一个用@WebSocketGateway()装饰器注释的类。从技术上讲，网关与平台无关，因此一旦创建了适配器，就能与任何 WebSockets 库兼容。

设置

我们将构建一个简单的收发信息应用程序。

首先，我们需要安装一些依赖项：

yarn add socket.io @nestjs/websockets @nestjs/platform-socket.io

然后我们将创建一个名为MessageGateway的网关

export class MessageGateway
  implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect
{

}

不要忘记将其添加到MessageModule中的providers

@Module({
  imports: [TypeOrmModule.forFeature([Message])],
  controllers: [MessagesController],
  providers: [MessagesService, MessageGateway],
})
export class MessagesModule {}

搭建服务器

现在，集成开发环境会告诉您需要在 MessageGateway 中使用一些名为 afterInit handleDisconnect handleConnection 的方法。

因为这只是一个简单的应用程序，我们实际上不需要在这些方法中做任何事情，所以我们只需将数据记录下来即可：


  private logger: Logger = new Logger('MessageGateway');

  @WebSocketServer() wss: Server;

  afterInit(server: Server) {
    this.logger.log('Initialized');
  }

  handleDisconnect(client: Socket) {
    this.logger.log(`Client Disconnected: ${client.id}`);
  }

  handleConnection(client: Socket, ...args: any[]) {
    this.logger.log(`Client Connected: ${client.id}`);
  }

有了它，我们就能知道服务器何时启动、哪个客户端已连接或断开连接。

处理事件

在这个应用程序中，我们需要 2 个事件，第一个是 sendMessage 事件，第二个是 receiveMessage 事件

@SubscribeMessage('sendMessage')
  async handleSendMessage(client: Socket, payload: string): Promise<void> {
    const newMessage = await this.messagesService.createMessage(payload);
    this.wss.emit('receiveMessage', newMessage);
  }

通过这段代码，我们将使用 SubscribeMessage decorate 来订阅 sendMessage 事件。每当 sendMessage 事件发生时，我们将通过 messageService 创建一条新消息。

然后，我们通过 receiveMessage 事件发送创建的消息。

构建客户端

为了测试网关，我们需要一个客户端，我将使用最流行的 UI 库 React 来测试它。

我们需要安装 socket.io，因为服务器使用的是 socket.io。

yarn add socket.io-client

接下来我们将用它创建一个socket ：

import io from "socket.io-client";
const socket = io("http://localhost:3000");

然后，我们将实现 socket ：

useEffect(() => {
    socket.on("receiveMessage", (msg) => {
      receiveMessage(msg);
    });

    getInitialMessages();
  }, []);

  function getInitialMessages() {
    fetch("http://localhost:3000/messages")
      .then((res) => res.json())
      .then((data) => {
        setMessages(data);
      });
  }

  function receiveMessage(msg: Message) {
    const newMessages = [...messages, msg];
    setMessages(newMessages);
  }

  function sendMessage() {
    socket.emit("sendMessage", newMessage);
    setNewMessage("");
  }

你可以看到，在第一次呈现时，我会订阅 receiveMessage 事件，以监听是否有任何新事件，并使用 receiveMessage 方法进行操作。然后，我通过 get api 获取初始消息。

在 receiveMessage 方法中，我会将新消息添加到状态中。

每次需要发送新消息时，我们都会发出 sendMessage 事件。

这就是结果：