Envoyer et recevoir des messages en temps réel (Socket.io)

Dans cette leçon, tu vas découvrir comment envoyer et recevoir des messages en temps réel grâce à Socket.io, en s’appuyant sur un backend NestJS et un frontend Remix.
Tu verras comment :

Configurer un Gateway WebSocket dans NestJS
Initialiser un client Socket.io dans Remix
Écouter et émettre des événements pour synchroniser tes messages instantanément

Commence par installer les paquets nécessaires à la fois côté serveur et client :

Terminal

1npm install socket.io        # serveur NestJS
2npm install socket.io-client # client Remix

Ajouter le module WebSocket dans NestJS

Dans ton module principal (app.module.ts), importe le module WebSocket :

src/app.module.ts

1import { Module } from '@nestjs/common';
2import { AppGateway } from './app.gateway';
3
4@Module({
5  imports: [],
6  providers: [AppGateway],
7})
8export class AppModule {}

Le cœur de la communication temps réel se situe dans un Gateway. Voici un exemple complet :

src/app.gateway.ts

1import {
2  WebSocketGateway,
3  WebSocketServer,
4  SubscribeMessage,
5  MessageBody,
6  ConnectedSocket,
7  OnGatewayInit,
8} from '@nestjs/websockets';
9import { Server, Socket } from 'socket.io';
10import { SocketService } from './socket/socket.service';
11
12@WebSocketGateway(8001, { cors: '*' })
13export class AppGateway implements OnGatewayInit {
14  @WebSocketServer()
15  private server: Server // ^? instance Socket.io côté serveur
16
17  constructor(private socketService: SocketService) {
18    // @callout: Injection du service pour partager l'instance 'server'
19  }
20
21  afterInit() {
22    this.socketService.server = this.server;
23  }
24
25  // Envoi une confirmation dès qu'un client se connecte
26  @SubscribeMessage('connection')
27  handleConnection(@ConnectedSocket() socket: Socket) {
28    socket.emit('confirmation');
29  }
30
31  // Test de round-trip
32  @SubscribeMessage('test')
33  handleTest(
34    @MessageBody() data: any,
35    @ConnectedSocket() socket: Socket,
36  ) {
37    console.log('test received:', data);
38    socket.emit('chat', "Salut, message reçu !"); 
39  }
40
41  // Rejoindre une room correspondant à l'ID de conversation
42  @SubscribeMessage('join-chat-room')
43  async joinRoom(
44    @MessageBody() conversationId: string,
45    @ConnectedSocket() socket: Socket,
46  ) {
47    socket.join(conversationId); 
48    // @callout: Le client écoute désormais tous les événements ciblant cette room
49  }
50}

Tip

Chaque événement (test, join-chat-room) déclenche une méthode annotée @SubscribeMessage().
C’est ainsi que NestJS mappe tes handlers WebSocket.

1. Initialiser le client Socket.io

Crée un utilitaire pour partager l’instance socket dans tout ton projet :

app/utils/socket.ts

1import { io, Socket } from 'socket.io-client';
2
3export const socket: Socket = io('http://localhost:8001'); // ^? connexion automatique

2. Rejoindre une room côté client

Dans ton composant de chat (Chatbox.tsx), émet l’événement join-chat-room dès le montage :

app/components/Chatbox.tsx

1import { useEffect } from 'react';
2import { socket } from '~/utils/socket';
3
4export const Chatbox = ({ conversationId, messages, setMessages }) => {
5  useEffect(() => {
6    socket.emit('join-chat-room', conversationId);
7    // @callout: On notifie le serveur qu'on veut rejoindre la room
8
9    return () => {
10      socket.off('chat');
11    };
12  }, [conversationId]);

3. Écouter les nouveaux messages

Toujours dans Chatbox.tsx, ajoute un listener pour l’événement chat :

1tsx app/components/Chatbox.tsx
2 useEffect(() => {
3-  // juste un state normal
4+  // écoute des messages entrants
5   socket.on('chat', (incoming: { content: string; senderId: string }) => {
6     setMessages(old => [
7       ...old,
8       {
9         id: Date.now().toString(),
10         content: incoming.content,
11         sender: { id: incoming.senderId, firstName: '??' },
12       },
13     ]);
14   });
15 }, [setMessages]);

Pro tip

Pense à désenregistrer tes listeners (socket.off(...)) pour éviter les fuites mémoire.

4. Envoyer un message

Dans notre exemple, on utilise un fetcher.Form de Remix, mais tu pourrais aussi émettre un événement Socket.io :

app/components/Chatbox.tsx

1<fetcher.Form method="POST" action={`/conversations/${conversationId}`}>
2  <input name="content" placeholder="Message..." />
3  <button type="submit">Envoyer</button>
4</fetcher.Form>

Ensuite, dans ton loader/action Remix, tu persistes en base (via Prisma) et tu rediffuses :

app/routes/conversations.$id.ts

1import { socket } from '~/utils/socket';
2
3export let action = async ({ request, params }) => {
4  const form = await request.formData();
5  const content = form.get('content');
6  // Persister en DB...
7  socket.to(params.id).emit('chat', { content, senderId: user.id });
8  return null;
9};

Server-only

L’objet socket importé côté route Remix doit être rendu disponible par un plugin server-only.

NestJS @WebSocketGateway : mappe les événements et gère l’instance Server.
Rooms Socket.io : partitionne tes clients par conversation.
Côté client, join + on/off garantissent une synchro précise.
Tu peux mixer fetcher.Form et Socket.io : formulaire pour persistance + WebSocket pour diffusion.
N’oublie pas d’isoler ton code dans utils/socket.ts pour partager l’instance.

Tip

Rappelle-toi que Socket.io gère le fallback XHR/long-polling si WebSocket n’est pas dispo.

Broadcast à la room
Modifie le handler test pour qu’il envoie le message à tous les membres de la room, sauf l’émetteur (socket.to(room).emit(...)).
Événement "user-typing"
Implemente un event typing :
- Côté client, envoie socket.emit('typing', conversationId) quand l’utilisateur tape.
- Côté serveur, diffuse typing aux autres participants.
- Côté client, affiche “Alice est en train d’écrire…” quand tu reçois l’event.
Gestion de reconnexion
Simule une perte de connexion (network offline).
Observe le reconnection automatique de Socket.io et logue un message dans Chatbox quand la connexion est rétablie.