與Nestjs和socket.io實時聊天

這篇文章探討了使用 NestJS 和 Socket.io 構建實時聊天系統。 我重新審視了之前的一個微前端項目（使用 React 和微前端構建一個像樂高一樣的系統），該項目缺乏強大的後端。這次，我添加了一個 NestJS 後端來處理跨多個微前端頁面的實時聊天功能。

⚠️ 這個博客今年將大幅擴展，帖子和視頻將更加頻繁！訂閱以保持更新！

項目目標？

目標是創建一個簡單的系統，用於在連接到聊天的用戶之間發送和接收消息，最大限度地減少不必要的複雜性。

後端項目：https://www.php.cn/link/037a15f03246f075193b2a295ba4c466

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

開發流程

後端是使用 NestJS CLI 啟動的：

nest generate module chat

然後創建了一個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中文網其他相關文章！