NodeJs : Drag & Drop en temps réel

NodeJs, le langage qui monte, qui monte s’avère aussi rapide que puissant. Pour celles et ceux qui ne connaissent pas ce langage, NodeJs est grosso-modo un serveur Javascript qui prend la place du couple Apache + PHP.

Comme Javascript, NodeJs est un langage non bloquant, ce qui signifie par exemple qu’il est capable de lancer la connexion à une base de données, exécuter la suite des instructions, puis lorsque la base de données est connectée, revenir sur ses pas pour lancer les instructions (qui nécessitaient une connexion BDD).

NodeJs s’exécute coté serveur donc, et peut dialoguer avec le client en temps réel via une passerelle nommée « socket.io« . C’est précisément ce que je vais aborder ci dessous. Le but de l’exercice sera d’afficher un div que l’on pourra déplacer … oui mais en même temps un autre internaute connecté à la page web verra le déplacement en temps réel.

Socket.io ?

Avec Ajax on savait déjà faire en sorte que le client dialogue avec le serveur sans recharger la page. Mais avec socket.io le serveur n’attend pas que client lui demande des informations, il les transmet au client et ce dernier les traites habituellement (avec du jQuery par exemple).

  • Socket.io utilise le WebSocket présent sur les navigateur récents. Mais là où c’est très fort c’est qu’il utilise d’autres méthodes pour les vieux navigateurs comme :
  • Ajax long polling = Le client interroge en continu le serveur grace à httpxmlrequest
  • Adobe Flash Socket = Socket.io utilisera le Flash pour sa communication temps réel

Ceci le rend compatible pour un grand nombre de navigateurs :

  • Internet Explorer 5.5+ (oui oui, vous avez bien lu !)
  • Safari 3+
  • Google Chrome 4+
  • Firefox 3+
  • Opera 10.61+
  • Safari sur iPhone et iPad
  • Le navigateur Android

Installation NodeJs

Petit rappel rapide pour installer Node Js sur une Debian :


On peut ensuite vérifier la version :

Réalisation de l’exercice

Il faut commencer bien évidemment par créer un répertoire pour y mettre les fichiers de node.js (3 fichiers en tout sans compter les modules).

package.json

Comme tout projet NodeJs il faut créer à la racine de votre répertoire le fichier package.json (qui contient le descriptif, et surtout les dépendances.) :


Ensuite lancer le NodePackageManager pour qu’il aille chercher les dépendances dont nous avons besoin (lancer la commande en étant positionné là où se trouve le package.json) :

app.js : le serveur NodeJs

Peut importe le nom que porte ce fichier (chez moi app.js) mais il va contenir le script qui va créer le serveur, et contenir la logique de traitement des données :


 

  • Les premières lignes se chargent d‘inclure les bibliothèques nécessaires (dont socket.io)
  • Ensuite on créer un tableau contenant les positions css (left,top) par défaut du DIV. Ce tableau sera mis à jour (en temps réel) lors que l’on déplacera le calque, ainsi si un internaute se connecte à la page après un déplacement du DIV il aura la position par défaut « à jour »
  • J’utilise ensuite une fonctionnalité « express » (qui est un framework NodeJs) pour lancer l’affichage de la page dragdrop.ejs (ejs est un système de template) en lui envoyant en argument les positions du DIV
  • Ensuite il y’a les directives du socket.io. Le socket.io réagit sur 2 évènements :
    • modeDiv : Quand il reçoit cet évènement, cela veut dire qu’un internaute est en train de bouger le DIV, et donc NodeJs renvoie à tout le monde (broadcast.emit) la position du DIV qu’on lui a donné.
    • stopDiv : Quand il reçoit cet événement, cela veut dire qu’un internaute à terminé de bouguer le DIV, donc on met à jour le fameux tableau des positions, qui ne sert seulement qu’a afficher la position à jour du DIV  lorsqu’un nouvel internaute se connecte sur le page
  • Et enfin le server.listen(8080) c’est grossomodo l’équivalent du serveur apache (enfin presque), à partir de là, NodeJs est sur écoute pour tout internaute qui va saisir http://IP_DU_SERVEUR_NODE:8080

 

La vue

Maintenant il ne reste plus qu’a créer la vue (page HTML) en la mettant dans le répertoire « views » (car c’est ce qu’attend le framework Express). Le fichier sera donc : ./views/dragdrop.ejs

 


 

 

Tout est à peu près compréhensible, j’utilise jquery + jqueryui afin de bénéficier du « draggable » pour éviter de m’enquiquiner.

Ce qui est intéressant commande à la ligne 24 après l’inclusion du jquery-ui.js

  • On va chercher le socket.io.js (contenu sur le serveur)
  • On lance la connexion socket.io avec le serveur (pensez à remplacer « IP_DU_SERVEUR_NODE » par la donne ip 😉 )
    • A partir de là le serveur réagit car il possède une écoute sur l’évènement grace à « io.sockets.on(‘connection’, function (socket) » pour s’en donner le coeur net, on peut ajouter un « logger » dans le fichier app.j


 

  • Pendant qu’on déplace le div (drag:) on lance au serveur un évènement grâce à « emit« . Cet évènement porte le nom de « moveDiv » (tiens on le retrouve lui) et contient en argument la position (left,right) actuel du div, comme cette position évolue au fil du déplacement c’est d’autant de requête qui est envoyé au serveur. Le serveur est donc informé en temps réel du déplacement du DIV
  • Lorsque l’internaute lache le DIV (stop:) on envoie au serveur la position actuelle, ceci afin qu’un nouvel internaute bénéficie de la position à jour
  • Ensuite, le client écoute ce que le serveur lui renvoi grace à « socket.on(‘moveDiv’, function(position)« . Il s’agit d’un évènement que le serveur envoie grace à broadcast.emit. Il faut juste savoir que tous les internaute reçoivent cet évènement sauf celui qui est en à l’origine (celui qui déplace le DIV donc). Quand cet évènement est déclenché, il met à jour la position CSS du DIV  grace à jQuery

 

En clair dans le schema :

  1. Dès que la position du div bouge j’informe le serveur
  2. Dès que le serveur est informé que le div bouge j’informe tout le monde (sauf celui qui m’a informé car il est censé être au courant)
  3. Dès que je suis informé que le div à bougé, alors je mets à jour sa position

Tout ceci, en temps réel 🙂

 

Il n’y a plus qu’a lancer le serveur grâce à la commande « node » :


Désormais on peut « jouer » avec le calque (essayez de lancer 2 navigateurs sur la page http://IP_DU_SERVEUR_NODE:8080)

NodeJsDragDrop

 

 

A propos de l'auteur :  Fabien Lierville

Chef de projet en Ingénierie Informatique Industrielle avec une expérience significative de 17 années. Gestion de projet à dominante pharmaceutique avec le respect de méthode qualité (GAMP V5). Véritable passionné d'informatique depuis l'Amstrad cpc 6128 ;)

Laisser un commentaire