Application en réseau avec p5js

Dans cet article nous vous présentons un exemple d’application p5js en réseau.
Ici, les utilisateurs peuvent contribuer à un même dessin en direct.

Cet exemple expliqué en détail doit vous permettre de comprendre les bases d’un telle solution pour développer votre propre application.

Etape 1 :  node.js

Vérifier que node.js est bien installé sur votre ordinateur (au besoin demandé à votre enseignant).

Si node.js n’est pas présent,  téléchargé le depuis le site https://nodejs.org/en/

Attention : vous devez disposer des droits administrateur pour l’installation.

Etape 2  :  Installation de notre exemple d’application (Voir la vidéo )

Récupérer l’archive suivante : p5jserver

Décompresser les fichiers dans le répertoire de votre choix.

On obtient l’arborescence suivante :

Les fichiers server.js et package.js sont spécifiques au serveur tournant sous node.js.

• package.js défini les modules à installer
• server.js défini les actions réalisées par le serveur

Le répertoire public contient tous les fichiers utilisés par la partie client.
Ce sont les fichiers « servis » par le serveur node.js , accessibles depuis un navigateur.

• index.html est le fichier « servi » par défaut.
• sketch.js est notre fichier sketch p5js associé à index.html
• le répertoire lib contient les librairies p5js utilisées.

Etape 3 : Installation & lancement du serveur

Après avoir ouvert une invite de commande (cmd) se positionner dans le répertoire p5jserver :

cd   c:\chemin d’accès au répertoire\p5jserver

puis taper la commande suivante :

npm install

Le gestionnaire de paquets de node.js va installer tous les modules nécessaires à notre serveur (express et socket.io).

Une fois l’installation des modules terminée, il ne reste plus qu’à lancer le serveur :

node server.js
Les messages « p5jserver running » et « En attente de connections sur le port 3000 … » indiquent que le serveur est opérationnel et est en attente de connexions utilisateurs sur le port TCP 3000.

Notre serveur va « servir » via le module express le fichier index.html présent dans le répertoire public, et va permettre la communication avec le client grâce au module socket.io.

Etape 4 : Test des clients

Pour tester les clients il suffit d’ouvrir un navigateur et de taper dans la barre d’adresse :

localhost:3000   // Si vous êtes sur le même poste que le serveur

192.168.1.16:3000  //Depuis un autre poste du réseau ( 192.168.1.16 étant dans cet exemple l’adresse du serveur)

Dans les 2 cas la connexion au serveur se fait via le port 3000
Le serveur qui ‘écoute’ cette porte vous ‘sert’ le fichier index.html.

Comment cela fonctionne-t-il ?

Vous trouverez à la fin de cet article les listings des programmes sketch.js côté client et server.js dont nous allons détailler la fonctionnalité réseau. Il est conseillé de lire attentivement ces sources et les commentaires associés en même temps que ces explications.
Sans rentrer dans le détail, la bibliothèque socket.io met à disposition un ‘module’ io qui se trouve au niveau supérieur et qui gère toutes les communications. On trouve ensuite les sockets (prises en anglais) qui permettent de créer un canal de communication entre le client et le serveur. Un socket défini un port (une « porte ») par lequel vont transiter les messages.On peut représenter ce système de communication à l’aide du schéma suivant:

Le schéma ci-dessous donne une idée du fonctionnement de notre application client/serveur.

C’est le client, avec l’instruction socket = io() présente dans sketch.js qui fait une demande de création d’un « canal de communication » au serveur. Il envoi en fait un paquet demande de ‘connection’ au serveur.

L’instruction io.on(‘connection’,newConnection) présente au niveau du serveur (server.js) permet à celui-ci de créer un canal de communication avec le client suite à une demande de ‘connection’ mais également de lui indiquer comment gérer les messages arrivants sur le socket associé (fonction newConnection).

Voilà ! la communication est établie via les sockets entre le client et le serveur.
Ces derniers vont pouvoir communiquer à l’aide de message. Ces messages qui vont transiter via le réseau se composnte (en simplifiant) des éléments suivants :

Dans la suite nous n’allons nous intéresser qu’à la partie :

Notre application de dessin collaboratif doit permettre aux différents utilisateurs d’indiquer aux autres les tracés qu’ils font sur leur écran. Pour cela ils vont envoyer au serveur les coordonnées successives de leur souris.
Pour distinguer les messages des uns des autres, il est nécessaires de les caractérisés par un tag spécifiques.
Ici notre message sera défini comme étant de type « mouse » et les données seront composées des 2 valeurs correspondant aux coordonnées de la souris : var data = { x : mouseX, y : mouseY };

Pour info, dans socket.io on ne parle pas de type mais plutôt d’évènement « mouse » car, en effet, à la réception du message celui-ci va être traité comme un évènement : ‘un message de type « mouse » vient d’arriver’.

Pour envoyer ce message, le client utilise l’instruction : socket.emit(‘mouse’,data);

Au niveau du serveur rappelons nous que nous avons défini une fonction newConnection qui indique au serveur ce qu’il doit faire à la réception d’un message.
Dans cette fonction, nous trouvons l’instruction: socket.on(‘mouse’,broadcastMouseMsg);
qui indique via la fonction broadcastMouseMsg comment gérer la réception d’un message de type ‘mouse’.

function broadcastMouseMsg(data) {
  socket.broadcast.emit(‘mouse’,data);
};

A la réception d’un message : le module socket.io appelle la fonction broadcastMouseMsg en lui passant en paramètre la partie donnée (data) du message. Celle-ci émet à nouveau le message à destination de tous les autres clients grâce à l’instruction socket.broadcast.emit(‘mouse’,data).

Ici, le serveur sert uniquement de relai et renvoi le même message. On peut bien évidemment envoyer le type de message et les données de son choix.

Il ne nous reste plus qu’à détailler ce qui se passe côté client à la réception du message ‘mouse’ envoyé par le serveur. En fait, le client grâce à l’instruction socket.on(‘mouse’,mouseMsgProcess); exécute la fonction mouseMsgProcess en lui passant en paramètre la partie donnée du message qui correspond aux cordonnées de la souris (data).
Ici, il s’agit d’un regroupement de données, la valeur de x et de y. Afin de pouvoir les distinguer elles sont stockées sous forme d’un objet composé de 2 propriétés x et y. Pour y accéder il suffit d’utiliser la notation data.x et data.y.

Serveur et envoi de messages

Il faut savoir que le serveur peut envoyer un message aux clients selon trois modes :

• socket.emit(‘msg2′, data2);         // envoi sur le socket du client courant et lui seul.
• io.emit(‘msg2′, data2);                 // envoi à tous les clients y compris l’émetteur.
• socket.broadcast.emit(‘msg2′, data2);   // envoi à tous les clients sauf l’émetteur.

Ci-dessous les schémas illustrant chacun de ces 3 modes :

Envoi sur le socket du client courant et lui seul :



Envoi à tous les clients y compris l’émetteur :



Envoi à tous les clients sauf l’émetteur :

Les fichiers principaux

 fichers sketch.js
 fichers server.js