TP2 : un paint HTML5, multi-participants, avec support de la persistance

Travail à faire : 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 :

1. Pour info : le site officiel de Node.JS : nodejs.org
2. Pour l'installer : suivre les instructions sur cette page. Pour les unixiens, ça devrait se faire sans douleur, suivez les instructions pour installer les packages binaries pré-compilés... Prenez la version 2.6 ou la version 3.1
3. Pour les autres (ceux sous wiindows, qui COMME JE L'ESPERE, ONT DEJA INSTALLE CYGWIN COMME DEMANDE AVANT LE TP 1), il faut déjà avoir installé cygwin (voir http://cygwin.com), puis il faut suivre les instructions de cette page, prenez la version v0.2.6 lorsque vous aurez le choix, la 3.1 ne compile pas en ce moment sans bidouiller comme un malade !

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. Par exemple, si vous créez un fichier test.js qui contient :

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/');

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 :

node test.js

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é !

Test d'une application qui implémente un serveur supportant le protocole WebSocket

Nous allons maintenant rajouter à Node.JS le support pour le protocole des WebSockets (les URLs seront donc des ws://localhost:8xxx et pas des http://localhost:8xxx). Pour cela nous allons télécharger du code js qui implémente ce protocole. Il existe plusieurs implémentations, mais nous en avons choisi une qui fonctionne bien, et qui est relativement simple à mettre en oeuvre. Nous vous fournissons un zip prêt à l'emploi (mais croyez-moi on a bien galéré pour retrouver tous les morceaux sur github, il s'agit de cette implémentation : https://github.com/miksago !) :

• WebSockets.zip (32k)

Récuperez cette archive, désarchivez-là quelque part (par exemple, dans le même répertoire que là où vous aviez mis test.js), et faites un cd dans le sous-répertoire examples, puis lancez pour commencer la commande "node echo-server.js", cela va lancer un serveur sur le port 80, qui va juste gérer des connexions via web socket et faire l'echo à tous les clients connectés de ce que le serveur a reçu.

1. Lancez la commande node echo-server.js,
2. ouvez dans Chrome ou dans Opera ou Safari le fichier client.html du répertoire examples et cliquez sur le lien "send something",
3. Ouvez un autre onglet ou une autre fenêtre sur le même fichier, cela doit ouvrir la même page web, cliquez à nouveau sur send something, toutes les pages doivent afficher l'ensemble des messages. On fait du broadcast ! ne cliquez pas sur "run spam", cela a fait exploser tous nos navigateurs (!)

 Regardez maintenant les sources du fichier client.html, oubliez le barratin de présentation et focalisez-vous sur la partie qui ouvre le web socket. Va variable "conn" est le web socket, et on lui attache 4 fonctions de callback. La plus importante est onmessage qui sera invoquée chaque fois qu'un message arrive.

var connect = function() {
  if (window["WebSocket"]) {
 
    host = "localhost:8000";
    conn = new WebSocket("ws://"+host+"/test");
    conn.onmessage = function(evt) {
      log(evt.data);
    };
    
    conn.onerror = function() {
      log("error", arguments);
    };
    
    conn.onclose = function() {
      log("closed");
    };

    conn.onopen = function() {
      log("opened");
    };
  }
};

 Pour envoyer un message, c'est encore plus simple (c'est la 4ème ligne la plus importante !)

document.getElementById("send").addEventListener("click", function(e) {
  if (conn) {
    setTimeout(function() {
      conn.send("test message");
      log("<"+conn.id+"> "+"test message");
    }, 0);
  }
  e.preventDefault();
  return false;
}, false);

 Quand au code du serveur, on croit rêver, c'est ultra-simple ! On crée un server (ligne 4), puis on ajoute des écouteurs (les paramètres "connection", "message", "error", "disconnected" représentant le type de message reçu). Regardez donc le code de l'écouteur lorsqu'on reçoit un message : conn.broadcast(...), qui renvoie le message à tous les clients connectés. Pour écrire à un seul client : conn.emit(...)

var sys = require("sys")
  , ws = require('../lib/ws/server');

var server = ws.createServer({debug: true});

// Handle WebSocket Requests
server.addListener("connection", function(conn){
  conn.send("Connection: "+conn.id);

  conn.addListener("message", function(message){
    conn.broadcast("<"+conn.id+"> "+message);
    
    if(message == "error"){
      conn.emit("error", "test");
    }
  });
});

server.addListener("error", function(){
  console.log(Array.prototype.join.call(arguments, ", "));
});

server.addListener("disconnected", function(conn){
  server.broadcast("<"+conn.id+"> disconnected");
});

server.listen(8000);

Maintenant regardons l'exemple du chat multi-participants :

Toujours dans le même répertoire :

1. Lancez la commande "node chat-server.js",
2. Ouvez dans vos navigateurs plusieurs onglets sur la page chat.html et commencez à chatter... Vous pouvez vous identifier en tapant /nick toto ou /nick tata dans les différentes fenêtres. Admirez le broadcast !
3. Ouvrez donc la page du cours sur les WebSockets : http://slides.html5rocks.com/#web-sockets et ouvrez donc ws://localhost:8000 puis cliquez sur connecter et commencez à chatter, regardez ce qu'il se passe dans les onglets ouverts sur chat.html !

Voilà ! Tout le monde chatte gaiement !

Ajouter le chat dans le programme paint !

Ah ah !!!!! Là, mes enfants, c'est à vous de jouer !!!!!

1. Pour commencer, intégrez tel quel un chat dans la page du logiciel paint et testez-le avec le même serveur que pour les tests précédents !!!!
2. Envoyez les événements de dessin sous forme de texte, et vérifiez qu'ils transitent bien !
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.

Les apis WebStorage et Web SQL

Nous allons maintenant sauvegarder nos dessins dans une base de donnée SQL du navigateur, le tout depuis du javascript ! Bien que cela ne fasse plus partie officiellement de la norme HTML5, la plupart des gros navigateurs intègrent une BD SQL légère et supportent l'api web SQL data storage (Chrome, Safari, Opera). Commencez par regarder l'exemple du cours et par le faire fonctionner : http://slides.html5rocks.com/#web-sql-db.

Sous chrome, si vous utilisez le raccourci ctrl-shift-i (sous windows, sous mac, faire command-alt-i, sous linux, cherchez donc !), vous verrez la console des développeurs webkit

 Regardez maintenant le source du transparent correspondant (vous pouvez le retrouver en faisant "view source" et en cherchant le mot-clé "SQL"). On trouve en particulier le code qui crée la base et la table :

function createTable() {
   db.transaction(function(tx) {
      tx.executeSql("CREATE TABLE Table1Test (id REAL UNIQUE, text TEXT)", [],
                  function(tx) {  log.innerHTML = '"Table1Test" created!' },
                                  onError);
   });
}

Travail à faire

• En vous inspirant de cet exemple, ajoutez dans votre programme paint de quoi sauvegarder la liste des évènements de votre dessin, par exemple, lorsqu'on clique sur un bouton ou sur un lien "save".
• Vérifiez dans la console de chrome que vous avez bien créé la base, la table, et que les enregistrements sont bien présents.
• Maintenant, il faut s'attaquer à la restauration ! Ajoutez un bouton load qui puisse "redessiner" le dessin sauvegardé.