Aller au contenu principal

1 - Configuration de base serveur

NestJS support nativement les WebSockets. Il est cependant nécessaire d'installer nestjs/websockets et nestjs/platform-socket.io afin de permettre à l'application d'utiliser les websockets.

Installation des dépendances​

npm i @nestjs/websockets @nestjs/platform-socket.io

Création d'un Gateway​

Un peu à l'image des contrôleurs qui reçoivent les requêtes HTTP lorsqu'on fait référence à l'API, en NestJS les Gateways reçoivent les requêtes en provenance des WebSockets.

Mise en situation

Imaginez que vous créez une application de dessin collaboratif. Chaque utilisateur peut faire des requêtes pour colorer un pixel.

Ainsi, pour l'exemple, le gateway sera créé dans un module qui s'appelle pixels, responsable de gérer les requêtes d'ajout de pixels.

  1. Dans le module pertinent de Nest, on crée un fichier du genre [nom-des-evenements]-events.gateway.ts. Dans mon cas, j'ai un fichier pixels-events.gateway.ts puisque je gère des événements liés aux pixels.

  2. Ensuite, on défini une classe tout en lui ajoutant le décorateur @WebSocketGateway

    src/pixels/pixels-events.gateway.ts
    @WebSocketGateway(80, { cors: true })
    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);
      }
    }
    info

    La classe implémente OnGatewayConnection et OnGatewayDisconnect qui forcent la présence de fonctions pour gérer la connexion et la déconnexion. Lorsqu'un nouveau client se connecte, la fonction handleConnection sera exécutée, par exemple.

  3. Il faut s'assurer d'ajouter le gateway à la liste des providers du module. Par exemple:

    src/pixels/pixels.module.ts
    @Module({
      providers: [PixelsEventsGateway]
    })
    export class PixelsModule {}

Tester la connexion​

Pour tester la connexion, vous pouvez utiliser Postman, mais en mode Socket.io (une implémentation de WebSockets).

  1. À partir du menu File, sélectionnez New...

  2. Choisissez Socket.io img

  3. Entrez les informations de connexion (ws://localhost:80) et appuyez sur Connect img

  4. Postman devrait vous confirmer la connexion et vous devriez voir dans les logs de NestJS quelque chose comme:

    Client connected: Q1ajBrvyWFFLryuKAAAB
    info

    Chaque client connecté se voit attribuer un identifiant

  5. Vous pouvez vous déconnecter à l'aide de l'option Disconnect et vous devriez voir afficher en console:

    Client disconnected: Q1ajBrvyWFFLryuKAAAB