TP2 HTML5 2011-2012 M2 Miage

Installer le serveur Node.JS et le tester !

La procédure est simple : allez sur le site officiel de Node.JS : http://www.nodejs.org, selon que vous êtes sous windows, mac ou linux, suivez les instructions. Si vous êtes sur une distrib linux populaire comme Ubuntu, il existe des packages, cherchez l'existence d'un package NodeJS.

LINUX : ne prenez pas les sources, cliquez sur le lien pour recuperer directement les packages pour votre distribution :

Pour info, sur le TP tout a été testé avec la version 0.6.8 mais il y a de bonnes chances pour que tout fonctionne avec des versions proches. Dans le pire des cas, sous linux, vous pouvez récupérer les sources, elles compilent statiquement.

1. Ajoutez dans la variable PATH le chemin où NodeJs a été installé (par ex pour ceux qui sont sous Windows : C:\Program Files(x86)\nodejs),
2. Ouvrez une fenêtre de terminal et tapez "node --version" ça doit afficher la version courante (0.6.8 à l'heure où j'écris ce TP). Si cela dit "command not found", alors vous n'avez pas bien positionné la variable PATH. Vérifiez, re-ouvrez une fenêtre de terminal, re-testez.

Testez maintenant une petite application, par exemple un micro serveur HTTP.

• Créez le fichier test.js suivant :

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 . Puis lancez (depuis la ligne de commandes) 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é !

Première étape : faire marcher le chat dans le fichier HTML du paint du TP1

Commencez par prendre les morceaux nécessaires du fichier html du SimpleChat.html et fusionnez-les avec le fichier example5.html (que je vous conseille de renommer maintenant en index.html, il marchera directement avec le code du serveur ci-dessus). 

• Inclure dans le header les lignes qui incluent now.js et jquery-min.js,
• Ajouter dans le header le code javascript qui est dans une balise script,
• Ajouter les éléments HTML du chat, les champs de saisie etc.
• Lancer "node PaintServer.js" et ouvrir "localhost:8080", le chat et le paint doivent fonctionner. Vérifier avec la console d'erreur qu'il n'y a pas d'erreurs.

Deuxième étape : basculer le script du paint dans le fichier JavaScript du paint

Recopiez donc tout à la fin du fichier example5.js le code de chat (la partie entre les balises script), que je vous conseille maintenant de renommer en paint.js.

Relancez le serveur, retestez, vérifiez que tout fonctionne. Maintenant il sera possible d'envoyer des messages depuis les fonctions de dessin et inversement, de dessiner à réception d'un message.

$(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?", "");

});

Troisième étape : envoyer des messages lorsqu'une droite est dessinée, un cercle, etc...

Envoyez  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. L'envoi se fait en général juste avant les img_update() qui effectuent le dessin. Vérifiez que les messages passent bien par le chat.

Quatrième étape : envoyer des objets à l'aide de NowJS

1. Vous pouvez vous inspirer des fonctions now.distributeMessage() et now.receiveMessage() pour, par exemple, implémenter deux méthodes now.envoieOrdreDeDessin(ordre) et now.traiteOrdreDeDessin(ordre) qui serviront à envoyer et à recevoir des ordres de dessin (sous forme d'objets JavaScript, la sérialisation/désérialisation en JSON est effectuée en coulisse par NowJS).
2. Vous devrez implémenter la méthode everyone.now.envoieOrdreDeDessin(ordre) sur le serveur. Si vous ne voulez pas que le client courant reçoive l'ordre de dessin qu'il est en train d'envoyer, vous pouvez utiliser une méthode de la classe Group de NowJS (everyone est un Group). Voici comment exlure le client courant : everyone.exclude(this.user.clientId).traiteOrdreDeDessin(ordre);
    

 Cinquième étape : faites du dessin quand un ordre de dessin arrive

Maintenant, il faut détecter quand on reçoit une message de dessin, et effectuer le dessin !

Dans la fonction (dans le code client) now.traiteOrdreDeDessin(ordre), en fonction du type de l'ordre (ordre.type), vous effectuerez 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.

switch(ordre.type) {
  case 'circle' :
    ...
    break;
  case 'pencil' :
    ...
    break;
}