与Nestjs和socket.io实时聊天

这篇文章探讨了使用 NestJS 和 Socket.io 构建实时聊天系统。 我重新审视了之前的一个微前端项目（使用 React 和微前端构建一个像乐高一样的系统），该项目缺乏强大的后端。这次，我添加了一个 NestJS 后端来处理跨多个微前端页面的实时聊天功能。

⚠️ 这个博客今年将大幅扩展，帖子和视频将更加频繁！订阅以保持更新！

项目目标？

我们的目标是创建一个简单的系统，用于在连接到聊天的用户之间发送和接收消息，最大限度地减少不必要的复杂性。

后端项目：https://www.php.cn/link/037a15f03246f075193b2a295ba4c466

前端项目：https://www.php.cn/link/ee0f827fe45c91c956bacfd78d91d47b

开发流程

后端是使用 NestJS CLI 启动的：

<code class="language-bash">nest generate module chat</code>

然后创建了 chat-gateway.ts 文件（参见：https://www.php.cn/link/037a15f03246f075193b2a295ba4c466/blob/master/src/chat/chat-gateway.ts）。

聊天功能包括：

• 用户连接通知
• 用户断开连接通知
• 消息广播

ChatGateway 使用 @WebSocketGateway 装饰器，充当提供者（添加到 chat.module）。 CORS 已启用，并且端口已自定义（尽管并非绝对必要）。 网关实现 handleConnection 和 handleDisconnect.

的接口

handleConnection 和 handleDisconnect 方法

正如 NestJS 官方文档 (https://www.php.cn/link/9edfa99c15e2845965b91b38e2b1311c) 中详细介绍的，handleConnection 接收客户端套接字实例。 它发出一个 user-joined 事件，通知所有已连接的客户端有新用户。 handleDisconnect 类似地使用 WebSocketServer 实例来发出 user-left 事件。

消息处理 (handleNewMessage)

@SubscribeMessage 修饰的 handleNewMessage 方法处理传入消息。 它将收到的消息广播给所有连接的客户端。

>前端实现

>前端（在前面提到的Micro-Frontend博客文章中详细介绍）使用了需要修改的单个聊天组件。 更改对（ https://www.php.cn/link/link/eee0f827fe45c91c956bacfd78d91d91d47b/blob/blob/master/master/papps/chat/chat/chat/src/src/src/components/components/chat/chat/chat/index.tsx ）

集成了

库。
• > socket.io-client建立与后端端口的连接。
添加事件侦听器，
• ，
，
• 和user-joined。 user-left较小的调整以删除以前的“ bot回复”逻辑。message> newMessage
组件的逻辑相对简单。
• >
结论

这个项目的重点是核心功能，直接实施聊天模块而无需大量抽象。 未来的帖子将使用Nestjs和socket.io探索其他功能。

以上是与Nestjs和socket.io实时聊天的详细内容。更多信息请关注PHP中文网其他相关文章！