4 - Concept de Room

Dans votre application de chat, vous aurez une situation particulière à gérer: les utilisateurs doivent recevoir les nouveaux messages du canal dans lequel ils se trouvent, pas tous de tous les canaux!

Pour ce genre de cas, Socket.io propose le concept de room.

En effet, plutôt que de simplement se connecter au socket, côté client vous joignez une "room" et ensuite le serveur écoute les demandes de connexion à la room.

Connexion à une room côté client (Angular)

Pour joindre une room, on peut utiliser un événement joinRoom sur le socket.

Par exemple:

this.socket.emit('joinRoom', { room: room });

Ici, room pourrait être canal-5 par exemple, soit canal- concaténé avec son identifiant.

attention

Ne nommez pas vos room avec seulement un number, comme 5, utilisez un string! Autrement, le mécanisme ne fonctionne pas bien.

Tout le reste est identique, vous recevrez les événements associés à la room que vous avez rejoint.

Gestion des room côté serveur

Côté serveur, vous devrez gérer les demandes de rejoindre une room de la façon suivante dans votre Gateway:

src/issues/issues-events.gateway.ts

@SubscribeMessage('joinRoom')
handleJoinRoom(client: any, payload: { room: string }) {
  client.join(payload.room);
  console.log(`Client ${client.id} joined room ${payload.room}`);
}

Ensuite, plutôt que d'utiliser emit pour envoyer un message à tous les clients, il est possible d'utiliser la fonction to afin de préciser à quelle room faire l'envoi.

@SubscribeMessage('pixel')
async handleMessage(client: any, data: PixelDataDto) {
  // votre logique...

  // Ici, canal-12 est codé en dur, mais devrait être dynamique selon le canal/room
  // auquel envoyer l'événement
  this.server.to(`canal-12`).emit('pixel', data);
}