Aller au contenu principal

2 - Gérer les événements

Maintenant que vous êtes en mesure de vous connecter à un WebSocket et que le serveur est en mesure d'accepter les connexions, comment allons-nous communiquer de l'information avec lui?

Les WebSockets s'appuient sur un système d'événement. Un message envoyé au serveur comprend un type d'événement (event) et des données data.

S'abonner aux événements via @SubscribeMessage​

Pour accepter des événements, on peut créer une fonction dans le gateway et associer cette fonction à un type d'événement.

Le décorateur @SubscribeMessage permet de lier une fonction à un type d'événement.

src/pixels/pixels-events.gateway.ts
export class PixelsEventsGateway implements OnGatewayConnection, OnGatewayDisconnect {
  handleConnection(client: any, ...args: any[]) {
    console.log('Client connected:', client.id);
  }

  handleDisconnect(client: any) {
    console.log('Client disconnected:', client.id);
  }

  @SubscribeMessage('pixel')
  async handleMessage(client: any, data: any) {
    console.log('Client message:', data);
  }
}
info

Ici, le serveur s'abonne aux messages ayant comme event pixel. On ne fait qu'afficher en console les données reçues pour commencer.

Envoyer des données via un événement​

  1. En utilisant Postman, je peux envoyer un événement pixel avec, par exemple, les coordonnées du pixel à ajouter. img
  2. Côté serveur, l'événement a bien été reçu! 
    Client message: {
        "x": 12,
        "y": 12
    }

Typer les données attendues​

Plutôt que d'utiliser data: any, il est possible, tout comme au niveau de l'API, de typer les données attendues via un DTO.

src/pixels/dto/pixel-data.dto.ts
export class PixelData {
  x: number;
  y: number;
}
src/pixels/pixels-events.gateway.ts
@SubscribeMessage('pixel')
async handleMessage(client: any, data: PixelDataDto) {
  console.log('Client message:', data);

  this.server.emit('pixel', data);
}

Émettre un événement aux clients connectés​

Imaginons que le serveur vient en effet de recevoir un nouveau pixel à dessiner. Il doit maintenant communiquer avec tous les clients connectés la position du nouveau pixel.

Le serveur doit à son tour émettre un événement! L'événement peut porter le même nom (pixel), mais sera envoyé aux clients connectés.

  1. On doit premièrement ajouter une référence au websocket côté serveur afin d'émettre des événements

    export class PixelsEventsGateway implements OnGatewayConnection, OnGatewayDisconnect {
      @WebSocketServer()
      server: Server;

      //...
    attention

    Il est possible que vous deviez importer Server directement à partir de socket.io en ajoutant manuellement l'import.

    import { Server } from 'socket.io';

  2. Le serveur peut ensuite, à son tour, émettre un événement à tous les clients connectés via la fonction emit() sur Server.

    @SubscribeMessage('pixel')
    async handleMessage(client: any, data: any) {
      console.log('Client message:', data);

      this.server.emit('pixel', data);
    }

    Ainsi, dès que le serveur reçoit un message d'un client pour un nouveau "pixel" à dessiner, il renvoie à tous les clients le même pixel.

  3. Dans Postman, dans la section Events, on peut le configurer pour écouter les événements portant un certain nom, comme pixel img

  4. On peut maintenant renvoyer un événement au serveur et en retour on devrait obtenir une réponse! :) img