Chat en temps réel avec NestJS et Socket.io

Cet article explore la création d'un système de discussion en temps réel à l'aide de NestJS et Socket.io. J'ai revisité un précédent projet de micro-frontend (Construire un système comme Lego avec React et micro frontends) qui manquait d'un backend robuste. Cette fois, j'ai ajouté un backend NestJS pour gérer la fonctionnalité de chat en temps réel sur plusieurs pages micro-frontend.

⚠️ Ce blog va s'étoffer considérablement cette année avec des posts et des vidéos plus fréquents ! Abonnez-vous pour rester informé !

Objectifs du projet ?

L'objectif était de créer un système simple pour envoyer et recevoir des messages entre les utilisateurs connectés au chat, minimisant ainsi la complexité inutile.

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

Projet Frontend : https://www.php.cn/link/ee0f827fe45c91c956bacfd78d91d47b

Processus de développement

Le backend a été lancé à l'aide de la CLI NestJS :

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

Un chat-gateway.ts fichier a ensuite été créé (voir : https://www.php.cn/link/037a15f03246f075193b2a295ba4c466/blob/master/src/chat/chat-gateway.ts).

La fonctionnalité de chat incluse :

• Notifications de connexion utilisateur
• Notifications de déconnexion des utilisateurs
• Diffusion de messages

Le ChatGateway utilise le décorateur @WebSocketGateway, fonctionnant comme un fournisseur (ajouté à chat.module). CORS a été activé et le port a été personnalisé (bien que pas strictement nécessaire). La passerelle implémente des interfaces pour handleConnection et handleDisconnect.

handleConnection et handleDisconnect Méthodes

Comme détaillé dans la documentation officielle de NestJS (https://www.php.cn/link/9edfa99c15e2845965b91b38e2b1311c), handleConnection reçoit l'instance de socket client. Il émet un événement user-joined, informant tous les clients connectés d'un nouvel utilisateur. handleDisconnect utilise de la même manière l'instance WebSocketServer pour émettre un événement user-left.

Traitement des messages (handleNewMessage)

La méthode @SubscribeMessage décorée handleNewMessage gère les messages entrants. Il diffuse les messages reçus à tous les clients connectés.

Implémentation du frontend

Le frontend (détaillé dans le billet de blog micro-frontend mentionné précédemment) utilise un seul composant de chat nécessitant une modification. Des modifications ont été apportées à (https://www.php.cn/link/ee0f827fe45c91c956bacfd78d91d47b/blob/master/apps/chat/src/components/Chat/index.tsx) :

• Intégrez la bibliothèque socket.io-client.
• Établissez une connexion au port backend.
• Ajoutez des écouteurs d'événements pour user-joined, user-left, message et newMessage.
• Ajustements mineurs pour supprimer la logique précédente des « réponses du bot ».

La logique du composant est relativement simple.

Conclusion

Ce projet s'est concentré sur les fonctionnalités de base, implémentant directement le module de chat sans abstraction étendue. Les prochains articles exploreront des fonctionnalités supplémentaires utilisant NestJS et Socket.io.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!