Vous n'êtes pas connecté. Connexion
|
|
TP2 : un paint HTML5De $1Table des matièresIntroductionDans ce TP vous allez suivre un petit tutorial qui explique pas à pas comment écrire un programme de type "paint" en HTML5 + javascript. Il utilise le widget "canvas" de HTML5, qui permet de faire beaucoup de choses (vous le verrez en suivant les liens vers les démos et autres tutoriaux sur les canvas. On le présente comme un concurrent de flash...). Par la suite nous l'intégrerons à l'application facebook du TP1.
Travail à faireUn peu de lecture
Un peu de codageVous avez le choix de l'éditeur pour les fichiers html et javascript, Netbeans est assez gros comme logiciel mais il supporte très bien la syntaxe HTML5 et javascript (avec auto-complétion, indentation automatique etc)
Un peu de réflexion
Un peu de persistenceNous 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. 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
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... L'an dernier on avait 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...) 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 :
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 WebSocketNous 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 !) :
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.
|
Powered by MindTouch Deki Open Source Edition v.8.08 |