TP WebSockets / Rabat 2014-2015

De $1

Introduction

Dans ce TP nous allons étudier les WebSockets faisant partie de ce qu'on appelle WebRTC (Real Time Communication), c'est "à côté de HTML5" et c'est un nouveau protocole (et une API JavaScript que doivent implémenter les navigateurs) synchrone, à faible latence, bi-directionnel.

Pour faire des WebSockets il faut un serveur supportant ce protocole. Aujourd'hui presque tous les serveurs (apache, glassfish, tomcat, jetty, etc.) supportent ce protocole nativement ou à l'aide d'extensions. Comme l'application que nous développons est un jeu multi-participants, nous allons utiliser un micro serveur très à la mode en ce moment: NodeJS. Ce serveur intègre l'interpréteur JavaScript V8 de Google et permet de coder la couche applicative côté serveur en JavaScript. On pourra ainsi échanger entre le serveur et les clients des objets JavaScript, sans devoir systématiquement les transformer dans un autre langage.

Nous commencerons par étudier deux applications de chat synchrones basés sur la librairie socket.io très populaire dans le monde des WebSockets (il existe des clients pour Java, C#, etc. il est par exemple possible d'écrire une application Android qui parle avec un serveur nodeJS via des WebSockets).

Livre gratuit sur NodeJS, en français

Installation de NodeJS et des modules express et socket.io

Quel que soit votre système d'exploitation, allez sur le site http://www.nodejs.org et suivez la procédure d'installation (click sur le bouton "install"). Installez la dernière version.

Une fois nodeJS installé, vérifiez qu'il fonctionne en tapant dans une fenêtre dos/shell la commande "node --version", cela devrait afficher quelque chose comme: "node 0.10.x". Ok, tout va bien.

Test d'une première application NodeJS

  • Créez un fichier test.js file avec ce contenu :
/div[3]/div/pre, reference to undefined name 'syntax'

Sauvez le et exécutez la commande suivante :

node test.js


Vous venez juste de lancer le serveur NodeJS qui répond à cet URL : http://localhost:8124

Image de la ligne de commande pour lancer l'application de test : node test.js

Ouvrez cet URL dans votre navigateur !

Vous devriez avoir :

image du browser ouvert sur localhost:8124 et qui affiche Hello World

Vous venez d'exécuter votre première application NodeJS ;-)

Le fichier test.js contient le code pour un serveur web archi minimal qui n'est même pas capable de lire un fichier html. Il a juste renvoyé des Strings en parlant de protocole HTTP.

Installation de modules complémentaires

NodeJS est extensible grace à un système de "modules", sortes de "packages" à la linux. Lors de l'installation, si vous avez mis le répertoire d'installation dans le PATH, vous devriez avoir accès à la commande "npm" ou Node Package Manager, qui permet d'installer (il faut avoir une connexion qui fonctionne, évidemment...) des modules supplémentaires. Il en existe des centaines aujourd'hui, mais nous allons utiliser deux des plus populaires:

  • express donne la possibilité de servir des pages HTML avec CSS, JavaScript etc. Par défaut NodeJS ne sait pas faire cela. Permet aussi de faire des web services REST mais cela n'est pas étudié pendant ce cours.
  • socket.io : librairie pour les WebSockets. Donne aussi des solutions de fallbacks si le navigateur utilisé ne supporte pas les WebSockets (comet, ajax, flash sockets), permet de gérer des groupes (sortes de "salles" de chat/ sessions de jeux entre amis, etc.)

Travail à faire :

  1. Créer un répertoire "chatWithSocketIO" quelque part sur votre disque dur,
  2. Aller dans ce répertoire (cd...)
  3. Exécuter la commande "npm install express", attendre qu'elle se termine,
  4. Exécuter la commande "npm install socket.io", attendre qu'elle se termine.

ATTENTION SI PROXY NECESSAIRE (parfois le cas en entreprise) : npm config set proxy http://login:password@internetpsa.inetpsa.com:80 et aussi  npm config set https-proxy http://login:password@internetpsa.inetpsa.com:80

SI ERREUR "nodejs/windows Error: ENOENT, stat 'C:\Users\RT\AppData\Roaming\npm' sous windows, comme dans l'image ci-dessous, il faut créer à la main le répertoire manquant et relancer npm install.

 exemple de correction à apporter en cas de problème lorsqu'on lance npm install : il faut créer à la main le répertoire qui n existe pas.

Dans votre répertoire vous devriez avoir un répertoire supplémentaires intitulé "node_modules" qui contient les modules que vous venez d'ajouter à votre projet. En général on ajoute les modules par projet, non pas globalement.

Si vous développez une autre application, vous pourrez simplement copier ce répertoire si vous ne voulez pas re-télécharger les modules express et socket.io, vous pourrez éventuellement en ajouter.

Test d'une application de chat "simple", utilisant express et socket.io

Nous allons étudier un petit programme de chat mélangé avec un petit programme utilisant un canvas, un squelette d'un futur jeu multi-participants.

Récupérez donc cette archive : chatWithSocketIO_withoutjQuery.zip 

Désarchivez là et faites en sorte pour qu'on ait dans ce répertoire le répertoire node_modules qui contient socket.io et express que vous avez créé juste avant en installant les modules. Vous devez avoir ceci dans le répertoire à la fin:

on voir le répertoire de travail contenant deux fichiers simpleChat.html et SImpleChatServer.js, ainsi qu'un sous répertoire node_modules contenant deux répertoires express et socket.io

Bon, maintenant, executez la commande "node simpleChatServer.js" et ouvrez dans votre navigateur "http://localhost:8082", si votre port 8082 est occupé, changez le port dans le fichier simpleChatServer.js.

Ouvrez cet URL dans deux tabs, et regardez le résultat. Le chat devrait fonctionner. Bougez la souris dans le canvas, les dessins devraient être synchronisés, ouvrez d'autres onglets, fermez-en, cela devrait fonctionner...

On voir trois onglets d'un browser, ouverts sur localhost:8082 et des chats ainsi que des canvas, dans chaque onglet. Les messages de chat apparaissent partout, et dans le canvas on voit des carrés correspondant à chaque joueur, ils sont synchronisés et situés à la même place

Ouvrez la console de debug de Chrome (y'a que Chrome qui permet de debugger efficacement les WS aujourd'hui, tab "network" et tout en bas "websocket", puis tab "frames"), chattez et regardez les trames échangées....

Maintenant, étudiez le code de simpleChatServer.js, de simpleChat.html, de jeu.js

Principes de base de socket.io (on trouve de nombreux tutoriaux en français et en anglais sur le web, nous résumons ici l'essentiel):

  • socket.on(type d'un événement, callback) : exécute la fonction de callback quand un événement arrive (le type = une chaine quelconque). Quelques événements comme 'connection' ou 'disconnect' sont  prédéfinis.
  • Tout le traitement des messages se fait dans io.sockets.on('connection', function (socket) {...}, sans connexion, on ne peut rien faire!

  • socket.emit(type de l'évenement, data1, data2) : envoie juste au client connecté un événement (une chaine) et deux paramètres pouvant contenir des données
  • io.sockets.emit(type de l'évenement, data1, data2) : envoie à tous les clients connectés un événement (une chaine) et deux paramètres pouvant contenir des données
  • socket.broadcast.emit(type de l'évenement, data1, data2) : envoie à tous les clients connectés sauf au client courant (l'emetteur) un événement (une chaine) et deux paramètres pouvant contenir des données

simpleChatServer.js:

/div[4]/pre, reference to undefined name 'syntax'

Et la page simpleChat.html

/div[4]/pre, reference to undefined name 'syntax'

 

 

Mots clés:
FichierTailleDateAttaché par 
 chatWithSocketIO_withoutjQuery.zip
Aucune description
3.95 Ko11:33, 28 Nov 2014MichelBuffaActions
Images (2)
Voir 1 - 2 sur 2 images | Voir tout
Aucune description
multi.jpg  Actions
Aucune description
chatWithS...  Actions
Commentaires (0)
Vous devez être connecté pour poster un commentaire.