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 !La procédure est simple : allez sur le site
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
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 WebSocketsLes librairies pour nodeJS s'appellent des "modules". Il existe de nombreuses manières de les installer (notamment via le réseau et de manière globale au travers de la commande "npm" ou Node Package Manager), mais nous allons faire le plus simple possible : les mettre dans un répertoire "node_modules" dans le répertoire où se trouvera votre TP.
Ajout de la fonctionnalité "dessin à plusieurs" dans votre logiciel de dessinIntégration du chat dans le paint et utilisation du chat pour broadcaster les ordres 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 :
// à 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?", ""); });
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"){
|
Powered by MindTouch Deki Open Source Edition v.8.08 |