Chat temps réel : conversations, messages et Socket.io

Dans ce module, nous allons bâtir la fonctionnalité de chat en temps réel de votre application Remix à l’aide de NestJS et de Socket.io. Vous apprendrez à créer et gérer :

• Des conversations privées entre utilisateurs
• L’envoi et la réception de messages en temps réel via WebSockets
• L’affichage instantané des nouveaux messages côté client

Ce parcours s’appuie sur des notions de base comme la sécurisation des routes avec JWT, la gestion d’états React et l’intégration de formulaires Remix pour envoyer des données sans recharger la page.

Technologies et concepts clés

• NestJS WebSocketGateway
• Socket.io pour émettre et écouter des événements
• Guards et stratégie JWT pour l’authentification
• Formulaires Remix (useFetcher, <Form>)
• Styles avec Tailwind CSS
• Scroll automatique et gestion de la fenêtre de chat

Structure du module

1. Création d’une conversation

   • Définir un DTO CreateConversationDto
   • Exposer une route POST /chat protégée par JwtAuthGuard
   • Retourner la conversation créée avec ses participants

2. Envoi de messages

   • DTO SendChatDto et route POST /chat/:conversationId
   • Utilisation de ChatService pour persister et émettre l’événement
   • Mise à jour optimiste de la liste des messages via useFetcher

3. WebSocketGateway NestJS

   src/chat/app.gateway.ts

   1
   @WebSocketGateway(8001, { cors: '*' })
   2
   export class AppGateway implements OnGatewayInit {
   3
     @WebSocketServer() private server: Server;
   4
     @SubscribeMessage('join-chat-room')
   5
     async join(@MessageBody() id: string, @ConnectedSocket() sock: Socket) {
   6
       sock.join(id);
   7
     }
   8
     @SubscribeMessage('chat')
   9
     async handle(@MessageBody() msg, @ConnectedSocket() sock: Socket) {
   10
       this.server.to(msg.convId).emit('chat', msg);
   11
     }
   12
   }

   Cet extrait met en place l’abonnement à une salle de chat et la diffusion des messages à tous les clients participants.

4. Intégration côté Remix

   • Composant <Conversations> : liste des tchats et création de nouveaux
   • Composant <Chatbox> : affichage des messages, formulaire et hooks
   • Synchronisation entre Socket.io et React (useEffect, refs)

Liens utiles

• Découvrez la docs WebSockets sur MDN
• Parcourez l’API officielle de Socket.io
• Référez-vous à la section Guards JWT dans NestJS

Dans les prochaines leçons, nous plongerons dans chaque étape, du back-end NestJS à la partie UI Remix, pour obtenir un chat temps réel robuste et réactif.