node.js socket.io par l’exemple

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 permettant 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

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, évitant 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 pouvant correspondre à 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 devez intégrer 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 comprenant de 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() {
  var champ1;
  var champ2;
  var boutonSocketIO;
 
  var 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&nbsp;<input type="text" id="champ1"><br>
  Champ 2&nbsp;<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 va envoyer 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.

var envoyerMessage = function() {
  var 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 :

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

Dans ce code, la variable io est créée et c’est cette variable qui va servir à 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 :

var 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 :

var io = require("socket.io");
var 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 :

var io = require("socket.io");
var sockets = io.listen(8050);
sockets.on('connection', function (socket) {
  socket.on('monTypeDeMessage', function (data) {
    // faire ce qu'il y a à faire
    console.log("message :" + data.champ1 + " / " + data.champ2);
  });
});

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

Les données envoyées étant 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

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 ressemblant à :

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 :

socket_io_client

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 :

var io = require("socket.io");
var sockets = io.listen(8050);
 
sockets.on('connection', function (socket) {
  socket.on('monTypeDeMessage', function (data) {
    // faire ce qu'il y a à faire
    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 :

var envoyerMessage = function() {
  var 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, chose qui sera vu lors s’un prochain article.

Des remarques, des améliorations, des idées, des coquilles : faites le savoir. Faites savoir si cet article vous a été utile par un commentaire ou les réseaux sociaux.

 

3 commentaires pour node.js socket.io par l’exemple

  • Galliez Bruno  dit:

    Tout ton article est souligné ? J’ai la grippe et la flemme de regarder où ça coince :)

    J’adore nodejs, que j’ai testé pour le tchat de damocorp space war. Dès que j’ai le temps faudrait que je fasse un un petit jeu HTML5 multijoueur temps réel pour voir :D

    J’ai vu quelqu’un tenté de faire un jeu avec de 60 FPS et nodejs pour le temps réel multijoueur. Son serveur a eu quelque soucis lorsqu’il a tenté d’envoyer 60 fois par secondes les infos vers nodejs ;)
    Le gars ne comprenait pas que ce n’était pas nodejs le soucis mais bien le modèle de conception qui posait un soucis. Ce qui me fait penser à une chose : Existe-il déjà des jeux utilisant nodejs pour le côté multiplayer ?
    Et avec un vrai interaction entre joueur.

    • Franck Dubois  dit:

      Merci, c’est corrigé. En ce qui concerne l’existence d’un jeu multijoueur, je ne sais pas. Par contre, je compte l’utiliser pour le multijoueur de Pong. Il faut aussi avoir une plateforme suffisamment puissante pour encaisser la charge liée à un grand nombre de joueurs simultanés.

  • node.js,socket.io,mysql  dit:

    […] – Avoir un serveur mysql installé; – savoir ce qu’est node.js (voir l’article Comprendre node.js – avoir installé node.js (voir l’article Installer node.js sous Windows); – avoir lu l’article Accès mysql avec node.js; – avoir lu l’article Créer une librairie node.js; – avoir lu l’article node.js socket.io par l’exemple. […]

Laisser une réponse

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>