Vous n'êtes pas connecté. Connexion
|
|
TP2 HTML5 2011-2012 M2 MiageDe $1IntroductionInté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. 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 :
Testez maintenant une petite application, par exemple un micro serveur HTTP. Créer 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 (je l'ai mis dans ~/node_apps sous cygwin). Puis lancez (depuis cygwin ou un shell) la commande suivante : node test.js
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 WebSocketsInstallation et test de la librairie socket.ioIl existe plusieurs librairies pour utiliser les WebSockets mais la plus populaire aujourd'hui est socket.io (http://www.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
Ajout de la fonctionnalité "dessin à plusieurs" dans votre logiciel de dessinVous 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 :
Important : pour que le paint fonctionne comme avant, si la page HTML est servie par le serveur nodeJS, il est nécessaire d'instancier le serveur HTTP de manière un peu plus "avancée", en ajoutant le support pour les types mime, notamment. Vous rajouterez en-tête : var sys = require("sys") , http = require("http") , request = require("request") , fs = require("fs") , path = require("path") , mime = require('./lib/mime') , lport = 8000; var httpServer = http.createServer(function(req, res){ if(req.method == "GET" || req.method == "POST"){ if( req.url.indexOf("favicon") > -1 ){ res.writeHead(200, {'Content-Type': 'image/x-icon', 'Connection': 'close'}); res.end(""); } else if (/^\/$/.test(req.url)){ res.writeHead(200, {'Content-Type': 'text/html', 'Connection': 'close'}); fs.createReadStream( path.normalize(path.join(__dirname, "/public/index.html")), { 'flags': 'r', 'encoding': 'binary', 'mode': 0666, 'bufferSize': 4 * 1024 }).addListener("data", function(chunk){ res.write(chunk, 'binary'); }).addListener("end",function() { res.end(); }); } else { res.writeHead(200, {'Content-Type': mime.lookup(req.url)}); fs.createReadStream(__dirname+"/public/" + req.url , { 'flags': 'r', 'encoding': 'binary', 'mode': 0666, 'bufferSize': 4 * 1024 }).addListener("data", function(chunk) { res.write(chunk, 'binary'); }).addListener("close",function() { res.end(); }); } } else { res.writeHead(404); res.end(); } }); var server = ws.createServer({ server: httpServer }); Et dans un sous rep lib, vous aurez les trois fichiers suivants : mime.types et mime.js et node.types
|
Powered by MindTouch Deki Open Source Edition v.8.08 |