Application de chat avec Angular et Socket.IO

Introduction

Nous allons utiliser RxJS, Angular, express (Node.js) &Socket.IO pour faire une application de chat. Nous verrons à quel point RxJS peut être utile dans ce scénario. Afin de faciliter les choses, nous utiliserons Angular CLI pour générer une structure client de base et obtenir un modèle pour l’application Angular la plus simple. En back-end, nous utiliserons Node.js avec express et Socket.IO. Le raisonnement derrière cela est que Socket.IO est très facile à mettre en place et à utiliser. De plus, il fournit des bibliothèques côté serveur et côté client. Socket.IO utilise principalement le protocole WebSocket pour permettre une communication bidirectionnelle en temps réel.

Si vous voulez sauter directement à la partie où nous utilisons RxJS pour gérer les messages de chat, cliquez ici.

Démarrons!

Socket.IO server setup

Si vous n’avez pas Angular CLI installé, vous pouvez l’installer assez facilement:

npm i -g @angular/cli

Set up folder structure

Pour garder les choses propres, nous allons créer un nouveau dossier rxjs-chat pour notre petit projet. Il devrait servir de dossier racine pour les applications Angular et Socket.IO.

Créons une application Angular de base en utilisant Angular CLI. Dans notre dossier de projet, lancez votre terminal préféré et exécutez la commande suivante :

ng new rxjs-chat

Laissez-lui un peu de temps. Après qu’il ait fini de créer la structure de base et d’installer les paquets npm, nous renommerons le dossier du projet Angular nouvellement créé en client. Après cela, dans le même dossier racine, créer le dossier server pour notre serveur Socket.IO. Maintenant, nous avons deux dossiers à l’intérieur de notre dossier rxjs-chat:

• client – application client Angular
• serveur – bientôt le serveur Socket.IO de Node

Installation des paquets locaux

Dans le dossier serveur, nous allons générer le fichier package.json en exécutant la commande suivante :

npm init -y

Après cela, nous installerons nos dépendances et les enregistrerons dans package.json :

npm install express socket.io --save

Dans le même dossier, nous créerons le fichier index.js pour notre application serveur. Le contenu du fichier doit être le suivant:

Nous créons une instance d’express et la stockons dans la variable app. Après cela, nous créons le serveur avec le module http. Puis nous passons express à la méthode http.Server(). Express servira de gestionnaire des demandes à notre serveur. En retour, nous obtenons l’instance du serveur que nous stockons dans la variable server.

Dans les deux lignes de code suivantes, nous lions le socket.IO avec notre http server:

let socketIO = require('socket.io');

let io = socketIO(server);

Connexion à Socket.IO

Nous avons un serveur qui tourne sur le port 3000. Il est maintenant temps de voir comment nous pouvons nous connecter au serveur depuis notre application Angular. Pour cela, nous aurons besoin d’installer la bibliothèque client Socket.IO. Nous allons exécuter la commande suivante dans notre dossier client:

npm install socket.io-client --save

Pendant que nous y sommes, exécutons l’application Angular via Angular CLI:

ng serve -o

Maintenant nous avons notre application en cours d’exécution. Nous pouvons voir que notre navigateur par défaut vient d’ouvrir un nouvel onglet pointant sur localhost. C’est pourquoi nous avons utilisé l’argument -o pour ouvrir le navigateur.

Création du service pour la communication avec le serveur

Je vais le nommer chat.service.ts app.chat.service.ts et le placer à l’intérieur du dossier src. Le service va être aussi simple que possible pour le moment:

Ajouter le service aux fournisseurs du module

Aussi, laissons ajouter notre ChatService à la liste des fournisseurs à l’intérieur de AppModule dans le fichier app.module.ts:

Injecter le service dans notre composant

Enfin, nous allons importer et utiliser le service à l’intérieur de notre app.component.ts:

import { ChatService } from './app.chat.service';

Et nous allons injecter le ChatService dans notre constructeur:

constructor(chatService: ChatService) { }

En conséquence, nous avons le fichier suivant :

Si tout s’est déroulé comme prévu après avoir enregistré les modifications, vous devriez voir le message ‘user connected’ dans le terminal où vous avez lancé l’application node:

$ node index.js
started on port: 3000
user connected

Hence, nous pouvons dire que nous avons finalement réussi à nous connecter à notre serveur Socket IO. Maintenant, il est temps d’envoyer réellement quelques données via les événements Socket IO.

Envoyer un message à Socket.IO

Il est temps d’améliorer notre jusqu’ici simple ChatService avec une option pour envoyer un message au serveur:

Pour que cela fonctionne, nous devons utiliser sendMessage() de notre AppComponent:

Finalement, fournissons à l’utilisateur une simple entrée de texte et un bouton pour qu’il puisse envoyer un message :

Pour que tout cela fonctionne, nous devons écouter sur le serveur l’événement ‘new-message’ que nous avons émis depuis le ChatService:

socket.on('new-message', (message) => {
console.log(message);
});

Maintenant notre index.js ressemble à ceci:

Si vous voulez jouer avec le code, vous pouvez le trouver sur mon repo GitHub – rxjs-chat.

Communiquer avec d’autres utilisateurs

Pour que notre message soit diffusé aux autres utilisateurs, tout ce que nous avons à faire est de changer le console.log(message) inside de notre callback d’événement ‘new-message’ en io.emit(message):

Et que fait io.emit() ? En termes simples, il envoie un événement à toutes les personnes connectées au serveur.

Communiquons avec notre serveur via ChatService. Nous allons ajouter une nouvelle méthode à notre service à cette fin – getMessages. Elle retournera un Observable que nous créerons avec la méthode Observable.create(). Chaque fois que le socket recevra un nouveau message, nous utiliserons observer.next() pour le transmettre aux observateurs.

Après cela, nous nous abonnons à cet Observable depuis notre AppComponent:

Nous avons créé un nouveau messages array où nous stockerons les messages reçus du serveur. Nous devrons afficher ces messages dans notre modèle. C’est un cas d’utilisation parfait pour ngFor: