NestJS と Socket.io を使用したリアルタイム チャット

この投稿では、nestjsとsocket.ioを使用してリアルタイムチャットシステムの構築を検討しています。 堅牢なバックエンドが欠けていた以前のマイクロフロンテンドプロジェクト（ReactとMicro Frontendsを備えたLEGOとしてシステムを構築する）を再訪しました。今回は、複数のマイクロフレーズページでリアルタイムチャット機能を処理するためにNESTJSバックエンドを追加しました。

⚠姉妹このブログは今年、より頻繁に投稿やビデオで大幅に拡大します！サブスクライブして更新されたまま！

プロジェクトの目標？

目標は、チャットに接続されたユーザー間でメッセージを送信および受信するための簡単なシステムを作成し、不必要な複雑さを最小限に抑えることでした。

バックエンドプロジェクト：

https://www.php.cn/link/037a15f03246f075193b2a295ba4c466

フロントエンドプロジェクト：https：//www.php.cn/link/ee0f827fe45c91c956bacfd78d91d47b

開発プロセス

nestjs cli：

を使用してバックエンドが開始されました

その後、

a

ファイルが作成されました（

nest generate module chat

https://www.php.cn/link/037a15f03246f075193b2a295ba4c466/blob/master/src/chat/chatway.ts

） 🎜> chat-gateway.tsチャット機能には次のものが含まれています ユーザー接続通知

ユーザー切断通知

メッセージブロードキャスト
は
• デコレータを使用し、プロバイダーとして機能します（
に追加）。 CORSが有効になり、ポートがカスタマイズされました（厳密に必要ではありません）。 ゲートウェイは、

および

。ChatGatewayのインターフェイスを実装します @WebSocketGatewaychat.moduleおよびhandleConnectionメソッドhandleDisconnect 公式NestJSドキュメントで詳しく説明されているように（

https://www.php.cn/link/9edfa99c15e2845965b91b38e2b1311c

）、handleConnectionイベントを放出し、新しいユーザーのすべての接続されたクライアントに通知します。 handleDisconnect同様に、

インスタンスを使用して

イベントを放出します。 メッセージ処理（handleConnection）user-joined handleDisconnectWebSocketServer装飾されたuser-leftメソッドは、着信メッセージを処理します。 受信したメッセージをすべての接続されたクライアントに放送します

フロントエンドの実装

フロントエンド（前述のMicro-Frontendブログ投稿で詳細）は、変更が必要な単一のチャットコンポーネントを使用しています。 変更が行われました（

ライブラリを統合します

バックエンドポートへの接続を確立します。
• socket.io-clientイベントリスナーを追加してください
、
• 、
、および
• 以前の「ボット応答」ロジックを削除するためのマイナーな調整。user-joined user-left messageコンポーネントのロジックは比較的簡単です。newMessage
結論
• このプロジェクトは、コア機能に焦点を当て、広範な抽象化なしにチャットモジュールを直接実装しました。 将来の投稿では、nestjsとsocket.ioを使用して追加の機能を調査します。

以上がNestJS と Socket.io を使用したリアルタイム チャットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。