node.js socket.io par l’exemple

Un exemple node.js socket.io. Dans le développement de jeux vidéo html5, l’utilisation de node.js est fortement conseillé dans le cadre des échanges réseaux qui se font notamment dans des parties multijoueurs ou encore dans la sauvegarde de parties ou de scores. socket.io est une librairie node.js permettant de faire simplement des échanges réseaux rapides en temps réel et j’insiste sur la simplicité. Je vous montre….

Pré-requis conseillés aux débutants

– Comprendre node.js;
– Installer node.js.

socket.io, c’est quoi ?

Comme indiqué dans l’introduction, socket.io est une librairie node.js qui permet de faire des échanges dans les 2 sens entre un client javascript et un serveur node.js codé aussi en javascript. A cela s’ajoute que socket.io est crossdomain.

Création du projet exemple node.js socket.io

Pour les besoins de l’exemple, vous allez créer un dossier qui encapsulera la partie serveur node.js du projet. Je vous propose comme nom de dossier socketioexemple.

socket.io, installation

L’utilisation de cette librairie nécessite l’installation de la librairie. Placez vous dans le dossier du projet créé précédemment (socketioexemple) puis exécutez la commande :

npm install socket.io

Cette commande installe dans le dossier du projet la librairie socket.io. Dans ce cas, elle n’est disponible que pour le projet.

Il est tout à fait possible d’installer la librairie de manière à ce qu’elle soit accessible depuis tous les projets node.js. Cela évite ainsi de faire l’installation pour chaque projet hébergé par le serveur node.js. Il suffit d’ajouter le paramètre -g (pour global) à la commande décrite ci-dessus, comme ceci.

npm install -g socket.io

Dans ce cas le module est installé dans un dossier node.js dédié et configuré par défaut. Pour un meilleur contrôle de ce dossier, je vous invite à modifier ce dossier via la commande.

npm config set prefix chemin_vers_le_dossier_d_installation_des_modules

Utiliser socket.io, l’exemple

L’exemple va consister à envoyer au format Json des paires clés/valeurs au serveur node.js qui, dès réception, accusera réception des données. Les données sont envoyées sous forme de messages typés, chaque type de message correspond à un traitement particulier à réaliser côté serveur.

Utiliser socket.io côté client

Commencez par créer un fichier nommé client.html qui intégrera le code côté client.

Vous intégrerez la librairie socket.io par le biais d’une simple inclusion de fichier, fichier installé sur le serveur node.js.

<script src="http://adresseServeurNode:portEcouteSocketIO/socket.io/socket.io.js"></script>

Je vous propose d’utiliser un formulaire html qui comprend des champs de saisie et un bouton qui déclenche l’émission d’un message avec les données saisies dans le formulaire.

<html>
<script src="http://localhost:8050/socket.io/socket.io.js"></script>
<script>
( function() {
  let champ1;
  let champ2;
  let boutonSocketIO;
 
  let envoyerMessage = function() {
  };
 
  window.addEventListener("load", function() {
    champ1 = document.getElementById("champ1");
    champ2 = document.getElementById("champ2");
    boutonSocketIO = document.getElementById("boutonSocketIO");
    boutonSocketIO.addEventListener("click", envoyerMessage);
  });
} )();
</script>
 <body>
  Champ 1 <input type="text" id="champ1"><br>
  Champ 2 <input type="text" id="champ2"><br>
  <input type="button" id="boutonSocketIO" value="boutonSocketIO">
 </body>
</html>

Le clic sur le bouton appelle la fonction envoyerMessage, c’est cette fonction qui envoie le message destiné au serveur.

La fonction envoyerMessage va :
– se connecter au serveur node.js sur le bon port (8050);
– envoyer le message du type monTypeDeMessage avec les données au format Json.

let envoyerMessage = function() {
 let socket = io.connect('http://adresseServeurNode:portEcouteSocketIO');
 socket.emit('monTypeDeMessage',{'champ1':champ1.value,'champ2':champ2.value});
}

Utiliser socket.io côté serveur

Créez de préférence dans un dossier dédié, un script nommé serveur.js. Dans ce script, ajoutez le code suivant.

let io = require("socket.io");

Dans ce code, la variable io est créée et c’est cette variable qui sert à créer un serveur qui écoute sur un port particulier, à envoyer et réceptionner les messages.

Pour instancier un serveur, il suffit d’invoquer la méthode listen avec en paramètre le port sur lequel le serveur va écouter.

let io = require("socket.io");
io.listen(8050);

Mais ce n’est pas suffisant puisqu’il faut indiquer au serveur qu’il doit réagir lorsqu’on essaie de s’y connecter. Ceci passe par le biais d’un événement connection.

let io = require("socket.io");
let sockets = io.listen(8050);
sockets.on('connection', function (socket) {
});

Puis lui indiquer ce qu’il doit faire lorsqu’il reçoit un message d’un certain type, dans l’exemple ci-dessous le type est monTypeDeMessage.

let io = require("socket.io");
let sockets = io.listen(8050);
sockets.on('connection', function (socket) {
  socket.on('monTypeDeMessage', function (data) {

    console.log("message :" + data.champ1 + " / " + data.champ2);
  });
});

La réception d’un message monTypeDeMessage renvoie vers une fonction qui prend en paramètres les données réceptionnées (data dans l’exemple).

Les données envoyées sont au format Json, data est reconnu comme un objet Json dont on peut lire les clés directement.

Ce qui est envoyé par le client au format Json.

{'champ1':champ1.value,'champ2':champ2.value}

A la réception est accessible par l’objet data.

data.champ1
data.champ2

Test node.je socket.io

Il va de soi que si vous faites des tests en local sur le port 8050, l’adresse du serveur node.js est localhost et qu’il faut donc remplacer http://adresseServeurNode:portEcouteSocketIO par http://locahost:8050.

Lancez le serveur node.js par la commande.

node serveur.js

Au préalable, prenez soin de vous placer dans le dossier dans lequel a été créé le script serveur.js. Vous devriez voir afficher dans la console, un message qui ressemble à

info  - socket.io started
debug - client authorized
info  - handshake authorized Hr5RWAu4zVaRUmQuxvky
debug - setting request GET /socket.io/1/websocket/Hr5RWAu4zVaRUmQuxvky
debug - set heartbeat interval for client Hr5RWAu4zVaRUmQuxvky
debug - client authorized for
debug - websocket writing 1::

A l’affichage, le formulaire donne.

Saisissez des valeurs dans les deux zones de saisie puis cliquez sur le bouton. Vous devriez voir côté serveur.

message :valeur Champ1 / valeur Champ2

Le serveur émet un message que le client reçoit

Pour terminer l’exercice, le serveur doit envoyer un accusé de réception par le biais d’un message qu’il émet à son tour vers le client. On émet un message type ack sans joindre de données par le biais de la méthode emit.

let io = require("socket.io");
let sockets = io.listen(8050);
 
sockets.on('connection', function (socket) {
  socket.on('monTypeDeMessage', function (data) {

    console.log("message :" + data.champ1 + " / " + data.champ2);
    socket.emit('ack');
  });
});

Il ne reste plus qu’à modifier la fonction envoyerMessage afin que le client soit réceptif au message ack par le biais de la méthode on.

let envoyerMessage = function() {
  let socket = io.connect('http://localhost:8050');
  socket.emit('monTypeDeMessage',{'champ1':champ1.value,'champ2':champ2.value});
  socket.on("ack", function(data) {
    console.log("ack reçu");
  });
};

Remarquez qu’il n’y a rien de compliquer. Cependant l’utilisation de la librairie socket.io peut être plus optimisée.

node.js socket.io par l’exemple