Dans le précédent post, j'ai créé une application ultra basique de chat en NodeJS. L'utilisation d'Ajax c'est sympa, MAIS avec nos navigateurs actuels il y a plus puissant, plus instantané, à savoir des WebSocket.
Tout d'abord, on va installer le module socket.io (Site web http://socket.io/#home). Il en existe d'autre très bien. Websocket.io me parait assez simple d'utilisation et plutôt bien documenté. L'autre avantage est que s'il n'arrive pas à mettre en oeuvre les websocket il va essayer d'autre moyen de communication. Cela nous assure ainsi une compatibilité jusqu'à IE 5.5+
Ce programme est juste un cas d'étude, il n'y a pas de gestion d'utilisateur, de contrôle de cohérences des connexions, etc.
Pour l'installer la simple ligne de commande suivant devrait le faire (attention à utiliser avec express > 3 )
On se place dans le répertoire messages (c'est important, car le module va s'ajouter dans node_modules)
npm install socket.io express
Pas de panique, cela va installer tout un tas d'autres modules.
Maintenant adaptation de notre chat. On va donc supprimer l'ajax pour utiliser socket IO
Adaptation de app.js
On va ajouter l’appel aux sockets et le traitement des messages reçus des clients et ceux envoyés vers les postes clients.
On va changer un petit peu le début du programme, fini la variable html, remplacée par server
// init de l'app avec express var app = express(); // inclure et initi du serveur http var server = require('http').createServer(app); // inclusion et init de socket io var io = require('socket.io').listen(server);//.listen(server);
A la fin du programme on va ajouter la gestion des messages envoyés et reçus aux/des postes clients
//demarrage du serveur http (server) server.listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); }); //écoute du serveur socketio envoi d'un message de bienvenue io.sockets.on('connection', function (socket) { socket.emit('news', { hello: 'world' }); //traitemnte des messages du client et portant la mention post-message // renvoi vers les autres connectés socket.on('post-message', function (message) { socket.broadcast.emit('news', {message: message,user:Username,time:new Date().getTime()}) }) });
Adaptation de index.js
On va ajouter la connexion à socket, le traitement des messages reçus du serveur et l’envoi de message vers le serveur
<script src="/socket.io/socket.io.js"></script> <script> //connection au serveur io // remplacer localhost par la votre si vous voulez faire des test depuis d'autre machine que le local var socket = io.connect('http://172.16.20.53:3000'); //var socket = io.connect('http://localhost:3000'); //ecoute des nouveaux messages en provenance du serveur socket.on('news', function (message) { //traitement du message if (message['hello'] != undefined) { insertMessage( { message: 'Hello !!!' ,user:'Serveur'}); } if (message['message']!= undefined) { insertMessage(message); } console.log(message); }); //gestion du bouton Envoyer document.getElementById("buttonsend").onclick = function(e) { e.preventDefault(); var message = document.getElementById("message").value; //envoi du message au serveur Node socket.emit('post-message', message, function (err, message) { if (err) return alert('ERROR: ' + err); }); // on affiche son propre message sinon on ne l'aura pas au broadcast insertMessage( { message: message ,user:'Moi'}); }; /* gestion de la file de message */ function insertMessage(message) { //mise en forme du message avant affichage var li = document.createElement('li'); var content = document.createElement('span'); content.innerHTML = message['user']+' : '+message['message'] ; li.appendChild(content); messages.insertBefore(li, messages.firstChild); } </script>
Conclusion
L’utilisation des sockets est très simple et rapide, cela peut vous aider à faire du presque temps réel pour des jeux par exemple.
Dans l’exemple donnée, il existe un petit problème, seul le dernier pseudo est conservé (existait aussi dans la version précédente). Cela est du a une petite coquille dans la programmation. On ne garde qu’un seul Username. Il faut donc gérer les username avec les sessions. Je vous laisse faire l'exercice. Sinon je donnerais une correction possible avec l’utilisation de la base de donnée redis. (Indice un tableau indexé sur la session, ou renvoi du username par le client à vous de voir)
On peut télécharger le code source ici
Comments powered by CComment