Créer une passerelle HTTP vers WebSocket en Node.js
Dans ce billet, nous allons voir comment créer une petite application Node qui va nous permettre de déclencher un broadcast de message WebSocket via un appel HTTP classique.
C’est une application simple mais qui peut permettre à une application PHP back-end existante d’ajouter un peu de temps réel dans son fonctionnement, sans avoir besoin de faire une refonte majeure.
Tout d’abord, nous allons utiliser NPM, le gestionnaire de paquets de Node.js, qui va nous permettre de créer un nouveau projet Node.
Via une console de commande, placez vous dans le répertoire où vous désirez créer votre projet et tapez :
npm initLa console va alors vous demander une série d’informations relative à votre projet afin de l’initialiser. Pour l’instant, laissons tout par défaut à part le “Package Name” qui correspond au nom de votre projet.
package name: (gateway)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /home/user/projects/gateway/package.json:{
"name": "gateway",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}Is this OK? (yes) yes
Le nom du fichier principal de votre projet Node.js (l’équivalent de l’exécutable) est index.js. NPM ne l’a pas créé pour vous, créez donc un fichier index.js vide.
Nous allons maintenant récupérer quelques modules Nodes.js supplémentaires bien utiles pour notre projet. Dans la console, tapez les 3 commandes suivantes :
npm install ws
npm install http
npm install urlCes commandes viennent d’installer les modules Nodes suivants :
- ws : Qui va nous permettre de créer une connexion Web-socket
- http : Qui va nous permettre de créer un serveur HTTP
- url : Qui va nous permettre de gérer et parser des url pour le serveur HTTP
Il est maintenant temps de commencer à coder !
Ouvrez le fichier index.js et tapez le code ci-dessous.
Vous venez de charger les 3 modules Node dans votre application. Pour l’instant nous n’en faisons rien mais cela va venir.
Avant cela, nous avons besoin de 2 variables qui vont correspondre aux ports de connexions pour le serveur http et les WebSockets. Ajoutez le code ci dessous à votre fichier juste en dessous du code précédent.
Les numéros de ports peuvent être modifiés mais attention à ne pas utiliser des ports déjà en cours d’utilisation sur le serveur.
Voilà, tout est maintenant prêt pour créer nos serveurs de connections.
Commençons par le serveur HTTP !
Le code ci-dessous vous permettra de créer un serveur http tout simple :
La fonction anonyme passée en paramètre de http.createServeur() se déclenche lorsqu’un client http va se connecter au serveur et la fonction passée en paramètre de listen() se déclenche lorsque le serveur commence à écouter le port HTTP_PORT (en gros, lorsque le serveur est prêt).
On peut dés maintenant tester notre serveur HTTP (même s’il ne fait pas grand chose)
Dans la console, tapez la commande suivante :
node index.jsOn demande à Node de lancer notre application index.js.
Si aucune erreur ne s’affiche, le serveur devrait maintenant être accessible via l’adresse http://localhost:8080/ de votre navigateur.
Si tout fonctionne correctement, en allant sur cette URL, vous devriez voir apparaître
OK
Avant de passer à la partie consacrée aux WebSockets, améliorons un peu notre serveur HTTP (en l’état actuel, il ne sert pas à grand chose à par dire OK).
Remplacez le code précédent par celui-ci :
Qu’est-ce qui change ?
- On utilise url.parse() pour récupérer l’url complète de la requête. Cela va nous permettre de pouvoir implémenter des comportement différents en fonction de l’url. Pour l’instant, si on détecte que la requête a été faite sur le chemin “/broadcast” on retourne au client HTTP le message qu’il nous a envoyé afin de confirmer sa bonne réception.
- On utilise parsedUrl.query pour récupérer les paramètres de la requête GET qui ont été passés dans l’url. Dans notre cas on désire que le client ait passé le paramètre “message”
Le code est volontairement simpliste. Dans un véritable application il faudrait ajouter tout un tas de vérifications pour s’assurer que le client n’a pas envoyé n’importe quoi. Mais ce n’est pas le sujet ici.
Testons maintenant la nouvelle version de notre serveur HTTP. On coupe le serveur puis on le relance pour qu’il prennent en compte les dernières modifications.
Maintenant quand on va sur l’adresse http://localhost:8080/ on obtient :
No message received
Et c’est normal ! Car, suite à nos petites modifications, il faut maintenant utiliser l’adresse http://localhost:8080/broadcast?message=Hello . Si vous allez sur cette adresse vous devriez obtenir :
Message received :Hello
Tout fonctionne bien ? Parfait !
Il est maintenant temps de passer à la création du serveur WebSocket.
Sous le code précédent, ajoutez :
new wsServeur() va créer un serveur WebSocket accessible sur ws://localhost et sur le port WS_PORT (4040 dans notre cas)
Pour tester notre serveur il faut le relancer puis vous pouvez aller sur ce site :
et renseigner ws://localhost:4040/ dans le champ “Location”.
Pour obtenir un petit feedback, rajoutons un console.log() sur l’évènement de nouvelle connexion de notre serveur WebSocket juste en dessous de la création du serveur :
Relancer le serveur puis connectez vous avec le client de test : Dans votre console, vous devriez voir apparaître
new client connected
Bon, nous y sommes presque. Créons une méthode permettant d’envoyer un message à tous les clients connectés. Vous pouvez mettre cette méthode tout en bas du fichier index.js
On utilise le serveur WebSocket pour parcourir tous les clients connectés puis leur envoyer le message msg passé en paramètre de la fonction broadcast().
Il faut maintenant ajouter cette fonction broadcast dans le traitement du serveur http lorsqu’il reçoit une nouvelle requête.
Maintenant, lorsque vous relancez le serveur Node et que vous allez sur l’url :
http://localhost:8080/broadcast?message=Hello
Vous devriez voir apparaître sur votre client WebSocket :
RECEIVED: Hello
Voilà, nous avons maintenant une passerelle basique mais fonctionnelle qui permet de transférer des messages HTTP vers des clients WebSocket. A nous maintenant les joies de l’instantanéité !
Vous pouvez retrouver le code complet du serveur Node.js sur le dépôt ci-dessous :
Ce tutoriel n’etait pas assez complet ? Je prépare quelques billets supplémentaires pour nous permettre d’ajouter quelques fonctionnalités à notre passerelle. Suivez mon profil pour être informé des sorties des prochains billets.
Vous avez des retours ou des remarques à faire sur ce billet ? Je les acceptes toujours avec plaisir du moment qu’il sont écrit de manière respectueuse et polie.
