Echtzeit-Chat mit NestJs und Socket.io

In diesem Beitrag geht es um den Aufbau eines Echtzeit-Chat-Systems mit NestJS und Socket.io. Ich habe mir ein früheres Mikro-Frontend-Projekt (Aufbau eines Systems als Lego mit Reaktions- und Mikro-Frontends) noch einmal angesehen, dem ein robustes Backend fehlte. Dieses Mal habe ich ein NestJS-Backend hinzugefügt, um die Echtzeit-Chat-Funktionalität über mehrere Micro-Frontend-Seiten hinweg zu verwalten.

⚠️ Dieser Blog wird dieses Jahr mit häufigeren Beiträgen und Videos erheblich erweitert! Abonnieren Sie, um auf dem Laufenden zu bleiben!

Projektziele ?

Ziel war es, ein unkompliziertes System zum Senden und Empfangen von Nachrichten zwischen Benutzern zu schaffen, die mit dem Chat verbunden sind, und so unnötige Komplexität zu minimieren.

Backend-Projekt: https://www.php.cn/link/037a15f03246f075193b2a295ba4c466

Frontend-Projekt: https://www.php.cn/link/ee0f827fe45c91c956bacfd78d91d47b

Entwicklungsprozess

Das Backend wurde mit der NestJS-CLI initiiert:

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

Eine chat-gateway.ts-Datei wurde dann erstellt (siehe: https://www.php.cn/link/037a15f03246f075193b2a295ba4c466/blob/master/src/chat/chat-gateway.ts).

Die Chat-Funktionalität umfasste:

• Benutzerverbindungsbenachrichtigungen
• Benachrichtigungen über die Trennung von Benutzern
• Nachrichtenübermittlung

Der ChatGateway verwendet den @WebSocketGateway-Dekorator, der als Anbieter fungiert (hinzugefügt zu chat.module). CORS wurde aktiviert und der Port wurde angepasst (obwohl dies nicht unbedingt erforderlich ist). Das Gateway implementiert Schnittstellen für handleConnection und handleDisconnect.

handleConnection und handleDisconnectMethoden

Wie in der offiziellen NestJS-Dokumentation (https://www.php.cn/link/9edfa99c15e2845965b91b38e2b1311c) beschrieben, handleConnection empfängt die Client-Socket-Instanz. Es gibt ein user-joined-Ereignis aus, das alle verbundenen Clients über einen neuen Benutzer benachrichtigt. handleDisconnect verwendet in ähnlicher Weise die WebSocketServer-Instanz, um ein user-left-Ereignis auszugeben.

Nachrichtenverarbeitung (handleNewMessage)

Die @SubscribeMessage dekorierte handleNewMessage-Methode verarbeitet eingehende Nachrichten. Es sendet empfangene Nachrichten an alle verbundenen Clients.

Frontend-Implementierung

Das Frontend (ausführlich im zuvor erwähnten Micro-Frontend-Blogbeitrag beschrieben) verwendet eine einzelne Chat-Komponente, die geändert werden muss. Änderungen wurden vorgenommen an (https://www.php.cn/link/ee0f827fe45c91c956bacfd78d91d47b/blob/master/apps/chat/src/components/Chat/index.tsx):

• Integrieren Sie die socket.io-client Bibliothek.
• Stellen Sie eine Verbindung zum Backend-Port her.
• Ereignis-Listener für user-joined, user-left, message und newMessage hinzufügen.
• Kleinere Anpassungen zum Entfernen der vorherigen „Bot-Antworten“-Logik.

Die Logik der Komponente ist relativ einfach.

Fazit

Dieses Projekt konzentrierte sich auf die Kernfunktionalität und implementierte das Chat-Modul direkt ohne umfangreiche Abstraktion. Zukünftige Beiträge werden zusätzliche Funktionen mit NestJS und Socket.io untersuchen.

Das obige ist der detaillierte Inhalt vonEchtzeit-Chat mit NestJs und Socket.io. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!