Maîtriser les chambres avec Socket.io

Côté client, on peut utiliser un troisième argument dans la fonction emit(), celui-ci est une fonction qui pourra être appelée par le serveur. C'est tout simplement une fonction de type « acknowlegment » qui permet lors de l'envoi d'un événement côté client, d'avoir la confirmation que celui-ci a bien été traité côté serveur.

On l'utilise pour éviter de créer un événement juste pour dire qu'on a bien traité l'événement initial côté serveur. Par exemple, si j'envoie un événement save et que j'ai besoin de savoir si mon serveur a réussi ou non, je créais un événement saved afin de récupérer la réponse du serveur. Maintenant, grâce à cette superbe découverte, je vais utiliser le callback du emit() afin d'avoir directement la réponse du serveur. Des exemples s'imposent pour être sûr de bien comprendre…

I-C-1. Sans utiliser le callback du emit▲

// J'ai fait au préalable le require('io') et le listen sur app
io.sockets.on('connection', function (socket) {
  // J'écoute sur l'événement save
  socket.on('save', function (obj) {
    // Imaginons que je l'enregistre en base de données...
    socket.emit('saved', { error: false }); // ici on indique qu'on a réussi
  });
});

var socket = io.connect();
// Envoie l'événement que j'ai bien sauvegardé
socket.emit('save', { blog: 'Atinux.fr' });
// Je crée un événement pour avoir la réponse du serveur
socket.on('saved', function (result) {
  // result va contenir un objet m'indiquant si on a réussi ou non
});

I-C-2. En utilisant le callback du emit()▲

// J'ai fait au préalable le require('io') et le listen sur app
io.sockets.on('connection', function (socket) {
  // J'écoute sur l'événement save
  socket.on('save', function (obj, callback) {
    // Imaginons que je l'enregistre en base de données...
    // Ici le callback est la fonction se trouvant côté client
    callback({ error: false });
  });
});

// Envoie l'événement que j'ai bien sauvegardé et donne le callback de retour
socket.emit('save', { blog: 'Atinux.fr' }, function (result) {
  // result va contenir un objet m'indiquant si on a réussi ou non
});

I-C-3. Tester l'exemple▲

Les « rooms » de Socket.IO vous permettent de regrouper vos sockets dans des groupes, ainsi cela permet de limiter l'envoi de sockets avec la méthode broadcast à certains clients. Par exemple, si on veut créer un système de chat avec des chats privés en groupe, cela peut s'avérer pratique de limiter l'envoi d'un nouveau message seulement à ce groupe si l'un des membres de ce groupe vient de poster un message. Cela est aussi un avantage niveau sécurité, car ceux n'appartenant pas à ce groupe ne récupéreront pas le socket sur leur navigateur !

II-B-1. Côté serveur▲

var io = require('socket.io').listen(server);
// Je crée une chambre
io.of('/chat').on('connection', function (socket) {
  // ici socket.broadcast.emit() enverra un socket à tous les clients
  // connectés à la chambre "/chat"
});

II-B-2. Côté client▲

var socket = io.connect('/chat');

II-B-3. Un exemple peut-être ?▲

Voici une petite démonstration en ligne que j'ai faite spécialement pour vous : http://chambres.jit.su. Cette application vous montre comment créer un chat avec plusieurs groupes, chaque groupe possède sa chambre de sockets. Ainsi, si vous rejoignez un groupe, vous ne recevrez pas les sockets provenant des autres groupes. Bon le mieux est de tester par vous-même. Vous avez tout le code disponible dans ce zip.

II-B-4. Tester l'exemple▲

Voilà c'est déjà terminé ! J'espère que ce tutoriel vous a plu, si c'est le cas, ça me fait toujours plaisir de lire un petit commentaire (note : y compris sur le blog de l'auteur).

Cet article a été publié avec l'aimable autorisation de Sébastien Chopin. L'article original (Tutoriel Socket.IO (intermédiaire)) peut être vu sur le site d'Atinux.

Nous tenons à remercier Didier Mouronval pour sa relecture attentive de cet article.