Nous allons maintenant intégrer à notre projet un chat multi-participants utilisant l'api Web Socket. Pour ce faire, le code HTML5 à ajouter sera très simple, mais il faut avant tout installer un serveur web comprenant le protocole des Web Sockets. La page des ressources HTML5 recense des serveurs qui supportent cette feature (la liste est incomplète), mais pour ce TP nous allons nous servir d'un serveur embarqué très léger, qui a beaucoup de succès en ce moment, de par sa grande souplesse. Il s'agit du serveur Node.JS qui est écrit en Python, et qui permet d'écrire des applications web directement en javascript. il inclut l'interpréteur javascript le plus rapide du moment, nommé V8 (le même qu'il y a dans le navigateur Chrome). Le fait de pouvoir écrire des applications côté serveur en javascript est avantageux car les échanges de paramètres/valeurs de retour entre clients javascript s'exécutant dans le navigateur et appli serveur en javascxript sont naturelles.

Un serveur web embarqué n'est pas censé tenir une grosse charge, fournir des services évolués de maintenance/déploiement/sécurité, etc... Il se trouve à l'opposé de ce que l'on appelle des "serveurs d'application" comme JBoss, Glassfish, WebSphere, Oracle Application Server, etc... Ici on veut un serveur qui se lance en une seconde, qui occupe très peu de mémoire, etc... Dans un précédent cours on a utilisé comme serveur embarqué le serveur Grizzly (qui est inclut dans GlassFish) mais nous n'avons pas réussi simplement à faire tourner une implémentation des WebSocket dessus (pourtant une telle implémentation existe, dans les night builds, etc.. mais c'est encore très nouveau...). Au passage, ce que j'ai dit au début de ce paragraphe n'est pas forcément vrai : nodeJS est ultra-performant en ce qui concerne la gestion de la charge car il utilise un modèle de programmation "par événement" et non pas un modèle classique à base de Threads. On en reparlera.

Installer le serveur Node.JS et le tester !

Pour les linuxiens ou les macs OSiens, vous êtes sous un Unix, tout devrait rouler, enfin, je suppose. Nous avons testé sous mac OS et l'installation a pris 5 minutes. Pour les Windowsiens, le chemin est plus long, déjà il faut avoir installé cygwin, et ensuite il faudra passer une vingtaine de minutes à installer/builder la bête ! Voici les instructions :

Allez sur le site officiel de Node.JS : http://www.nodejs.org
Récupérez l'installeur pour Mac ou pour PC, les personnes sous Linux doivent récupérer les sources et suivre les instructions pour compiler les sources et faire un build de nodeJS (suivre le lien "build instructions)
Une fois que vous aurez réussi à installer le serveur, vous devriez avoir dans le PATH la commande 'node' exécutable. Elle permet d'exécuter simplement une application web. Ouvrez une fenêtre de terminal (dos ou terminal X11) et tapez la commande node ou la commande npm ça doit marcher.
Installer git pour votre système, c'est un outil de gestion de version très à la mode, et github.org est le nouveau site qui est en train de prendre la place de sourceforge.org pour le partage de logiciels open source. Les applications développées pour nodeJS sont presque toutes sur github. Faire "git windows" ou "git mac" ou installez le package git pour Linux. Idem, rajoutez la commande git dans votre PATH.
Il existe une autre possibilité pour windows mais le chemin est plus long : installer cygwin (ce que je recommande de faire un jour où l'autre). Les gens de nodeJS ne recommandent pas de passer par cygwin pour installer node car ils en ont eu marre de faire du support pour les (voir http://cygwin.com).

Testez maintenant une petite application, par exemple un micro serveur HTTP. Créer le fichier test.js suivant :

/div/div/div/pre, line 3, column 6: ":" expected

et que vous sauvez quelque part (je l'ai mis dans ~/node_apps sous cygwin). Puis lancez (depuis cygwin ou un shell) la commande suivante :

/div/div/div/pre, line 1, column 6: EOF expected

Vous venez de lancer un serveur qui répond à des requêtes http sur l'URL suivant : http://localhost:8124 Essayez donc d'ouvrir cet URL avec un navigateur web ! Cela doit afficher :

Le serveur est lancé !

Le navigateur a eu une réponse ! Vous voyez le petit code javascript du fichier test.js, c'est déjà un serveur ! C'est cela, la magie d'un serveur embarqué !

Ajout de librairies pour les WebSockets

Installation et test de la librairie socket.io

Il existe plusieurs librairies pour utiliser les WebSockets mais la plus populaire aujourd'hui est socket.io (http://www.socket.io)

Pour l'installer allez dans le répertoire où nodejs est installé et tapez la commande "npm install socket.io".

Vous pouvez tester la bonne installation de cette librairie en testant quelques applications qui se trouvent sur la page : http://socket.io/#how-to-use, essayez juste de comprendre le principe de fonctionnement. Il s'agit de programmation par événement : on reçoit un événement, on effectue une action, etc... Notez que socket.io permet de stocker des variables de session (commande "socket.set")

Ne vous attardez pas trop sur cette librairie car nous allons utiliser une bibliothèque de plus haut niveau, bâtie au-dessus de socket.io qui permet de "partager" des objets entre le code client et le code serveur + appeler des méthodes écrites dans le client depuis le serveur et vice-versa : le paradis pour qui veut développer des applications multi-participants.

Installation et étude du module NowJS

Allez donc visiter le site de nowJS : http://nowjs.com/
Regardez la petite vidéo dans la page d'accueil,
allez voir les applications situées dans le lien "examples" en haut de la page,
Installez NowJS : tapez la commande "npm install now" depuis le répertoire où est installé NowJS.
Lisez rapidement la page "Guide", téléchargez les sources du chat donné en exemple (lien "Here" en début de page), faites tourner ce petit chat, étudiez attentivement le code avec l'aide de la page Guide.
Vous pouvez également récupérer cette archive qui contient aussi un example de chat "multi-rooms" : XXXXXX

Ajout de la fonctionnalité "dessin à plusieurs" dans votre logiciel de dessin

Vous allez maintenant utiliser le chat que nous venons d'étudier pour transférer des objets d'un client vers tous les autres. Pour cela, vous pouvez utilisez les fonctions de sérialisation de JSon de javascript et de jQuery, comme indiqué dans le TP1.

Méthode conseillée :

Intégrez tel quel le chat dans la page du logiciel paint et testez-le avec le même serveur que pour les tests précédents !!!!
Envoyez ensuite via le chat les événements de dessin sous forme de texte, et vérifiez qu'ils transitent bien ! Par exemple "j'ai dessiné une ligne de telle coordonnées à telles coordonnées", vérifiez que le texte a bien transité vers tous les clients,
Maintenant, essayez d'envoyer un objet Javascript sérialisé en JSon, et décodez-le à l'arrivée, affichez un message dans le texte du chat correspondant à l'objet décodé. rappel : lorsque nous transmettrons réellement ces objets, on les mettra au format JSON à l'aide de la fonction JSON.stringify(message) de JavaScript, côté récepteur, on transformera les objets JSON reçus en objets javascript à l'aide de la fonction http://api.jquery.com/jQuery.parseJSON/ de jQuery (ce qui est plus simple qu'utiliser la fonctuon JavaScript pure JSON.parse(jsonObject)
Interprétez-les quand ils sont reçus et provoquez le dessin côté récepteur du dessin effectué par l'envoyeur. Vous aurez peut être besoin de modifier un peu le format de vos objets pour qu'ils soient plus faciles à manipuler.

Récupéré depuis "http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/Cours_web_2.0_Miage_de_Nice_2011-2012/TP2_HTML5_2011-2012_M2_Miage"