Construire une API de chat en temps réel en utilisant les WebSockets dans NestJS

NestJS est un framework populaire pour la création d’applications côté serveur avec Node.js. Grâce à sa prise en charge des WebSockets, NestJS est bien adapté au développement d’applications de chat en temps réel.

Qu’est-ce que les WebSockets et comment construire une application de chat en temps réel avec NestJS ?

Qu’est-ce que les WebSockets ?

Les WebSockets sont un protocole de communication persistante, en temps réel et bidirectionnelle entre un client et un serveur.

Contrairement au protocole HTTP où une connexion est fermée lorsqu’un cycle de demande est terminé entre le client et le serveur, une connexion WebSocket est maintenue ouverte et ne se ferme pas même après qu’une réponse a été renvoyée pour une demande.

L’image ci-dessous illustre le fonctionnement d’une communication WebSocket entre un serveur et un client :

Pour établir une communication bidirectionnelle, le client envoie une demande de prise de contact WebSocket au serveur. Les en-têtes de la requête contiennent une clé WebSocket sécurisée (Clé Sec-WebSocket) et un en-tête Mise à niveau : WebSocket qui, avec l’en-tête Connexion : Upgrade indique au serveur de passer du protocole HTTP au protocole WebSocket et de maintenir la connexion ouverte. L’apprentissage des WebSockets en JavaScript permet de mieux comprendre le concept.

Construction d’une API de chat en temps réel à l’aide du module WebSocket de NestJS

Node.js propose deux implémentations principales de WebSockets. La première est ws qui implémente les WebSockets nus. Et la seconde est socket.io qui offre des fonctionnalités de haut niveau.

NestJS possède des modules pour les deux socket.io et ws. Cet article utilise le format socket.io pour les fonctionnalités WebSocket de l’application d’exemple.

Le code utilisé dans ce projet est disponible dans un dépôt GitHub. Il est recommandé de le cloner localement pour mieux comprendre la structure des répertoires et voir comment tous les codes interagissent entre eux.

Configuration et installation du projet

Ouvrez votre terminal et générez une nouvelle application NestJS à l’aide de la commande nest new (par exemple nicher une nouvelle application de chat). La commande génère un nouveau répertoire qui contient les fichiers du projet. Vous êtes maintenant prêt à démarrer le processus de développement.

Mise en place d’une connexion MongoDB

Pour conserver les messages de chat dans l’application, vous avez besoin d’une base de données. Cet article utilise la base de données MongoDB pour notre application NestJS, et la façon la plus simple de démarrer est de mettre en place un cluster MongoDB dans le cloud et d’obtenir votre URL MongoDB. Copiez l’URL et stockez-la dans le fichier MONGO_URI dans votre . env dans votre fichier .

Vous aurez également besoin de Mongoose plus tard lorsque vous ferez des requêtes à MongoDB. Installez-le en exécutant npm install mongoose dans votre terminal.

Dans le src créez un fichier appelé mongo.config.ts et collez-y le code suivant.

Le fichier main.ts devrait ressembler à ceci :

Construction du module de chat

Pour commencer à utiliser la fonctionnalité de chat en temps réel, la première étape consiste à installer les paquets NestJS WebSockets. Cela peut être fait en exécutant la commande suivante dans le terminal.

Après avoir installé les paquets, vous devez générer le module chats en exécutant les commandes suivantes.

Une fois le module généré, l’étape suivante consiste à créer une connexion WebSockets dans NestJS. Créez une connexion WebSockets dans NestJS. chat.gateway.ts à l’intérieur du fichier chats c’est là que la passerelle qui envoie et reçoit les messages est implémentée.

Collez le code suivant dans chat.gateway.ts.

Authentification des utilisateurs connectés

L’authentification est une partie essentielle des applications web, et il n’en va pas autrement pour une application de chat. La fonction permettant d’authentifier les connexions des clients au socket se trouve dans chats.service.ts comme indiqué ici :

Le getUserFromSocket utilise la méthode getUserFromAuthenticationToken pour obtenir l’utilisateur actuellement connecté à partir du jeton JWT en extrayant le jeton Bearer. La méthode getUserFromAuthenticationToken est implémentée dans la fonction auth.service.ts comme indiqué ici :

Le socket courant est passé en paramètre à getUserFromSocket lorsque le handleConnection de Passerelle de communication met en œuvre la méthode OnGatewayConnection . Cela permet de recevoir des messages et des informations sur l’utilisateur actuellement connecté.

Le code ci-dessous en fait la démonstration :

Vous pouvez référencer les fichiers impliqués dans le système d’authentification ci-dessus dans le dépôt GitHub pour voir les codes complets (y compris les importations), pour une meilleure compréhension de la mise en œuvre.

Persistance des chats dans la base de données

Pour que les utilisateurs puissent voir l’historique de leurs messages, vous avez besoin d’un schéma pour stocker les messages. Créez un nouveau fichier appelé message.schema.ts et collez-y le code ci-dessous (n’oubliez pas d’importer votre fichier schéma de l’utilisateur ou de consulter le référentiel pour en trouver un).

Vous trouverez ci-dessous une implémentation des services permettant de créer un nouveau message et d’obtenir tous les messages de la catégorie chats.service.ts.

Les MessageDto est implémentée dans un message.dto.ts dans le fichier dto dans le dossier chats dans le répertoire chats. Vous pouvez également le trouver dans le dépôt.

Vous devez ajouter le fichier message à la liste des importations dans la section chats.module.ts.

Enfin, le module get_all_messages est ajouté au gestionnaire d’événements ChatGateway dans la classe chat.gateway.ts comme le montre le code suivant :

Lorsqu’un client connecté (utilisateur) émet la commande get_all_messages tous ses messages seront récupérés, et lorsqu’il émet l’événement send_message, un message est créé et stocké dans la base de données, puis envoyé à tous les autres clients connectés.

Une fois toutes les étapes ci-dessus effectuées, vous pouvez démarrer votre application en utilisant la commande npm run start:dev et la tester avec un client WebSocket comme Postman.

Construire des applications en temps réel avec NestJS

Bien qu’il existe d’autres technologies pour construire des systèmes en temps réel, les WebSockets sont très populaires et faciles à mettre en œuvre dans de nombreux cas, et ils constituent la meilleure option pour les applications de chat.

Les applications en temps réel ne se limitent pas seulement aux applications de chat, d’autres exemples incluent les applications de streaming vidéo ou d’appel, et les applications de météo en direct, et NestJS fournit d’excellents outils pour la construction d’applications en temps réel.

S’abonner à notre lettre d’information