TP2 HTML5 2011-2012 M2 Miage

Intégration de l'aspect "multi-participants"

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.

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

node test.js

Intégration du chat dans le paint et utilisation du chat pour broadcaster les ordres 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 :

1. 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 !!!! Rajoutez les lignes de javascript qu'il faut à la fin du fichier js inclut par la page html. Rajoutez dans la page html la ligne qui permet d'utiliser jQuery (on l'utilise dans les exemple, partout où il y a des "$"), et rajouter vers la fin du fichier les lignes html qui crée la zone de texte, le bouton, etc.

// à la fin du fichier js inclut par le paint... Note ici on a besoin de jQuery. rajouter en tête du fichier html la ligne qui inclut JQuery
$(document).ready(function(){
  now.receiveMessage = function(name, message){
    $("#messages").append("<br>" + name + ": " + message);
  }
  
  $("#send-button").click(function(){
    now.distributeMessage($("#text-input").val());
    $("#text-input").val("");
  });

  now.name = prompt("What's your name?", "");

});

1. 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, 9a se fait en général juste avant les img_update() qui effectuent le dessin.
2. 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)
3. 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.

Exemple de transformation objet javascript-> json et envoie par websocket

var objJSON = { "type" : 'line', "x0" : tool.x0, "y0" : tool.y0,"x1" : ev._x, "y1" : ev._y };
var msgJSON = JSON.stringify(objJSON);
now.distributeForm(msgJSON);

JSON -> objet javascript

// lorsqu'on reçoit un message en JSON
now.receiveForm = function(name, msgJSON){
objJSON = jQuery.parseJSON(msgeJSON);
...
if(objJSON.type == "Line"){