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

We use cookies

Nous utilisons des cookies sur notre site web. Certains d’entre eux sont essentiels au fonctionnement du site et d’autres nous aident à améliorer ce site et l’expérience utilisateur (cookies traceurs). Vous pouvez décider vous-même si vous autorisez ou non ces cookies. Merci de noter que, si vous les rejetez, vous risquez de ne pas pouvoir utiliser l’ensemble des fonctionnalités du site.