Maîtriser les chambres avec Socket.io

Sébastien Chopin

Si vous arrivez ici, c'est que vous savez déjà installer socket.io et jouer avec sur un serveur node.js, si ce n'est pas le cas, je vous invite à lire mon tutoriel sur Socket.io version débutant. Nous allons voir dans ce tutoriel des fonctionnalités avancées avec les sockets qui vous permettront d'optimiser votre code en évitant d'utiliser des événements juste pour une confirmation d'action, mais aussi pouvoir limiter l'envoi de sockets à des groupes en utilisant les « rooms » (démonstration : http://chambres.jit.su).

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.

Commentez ♪

- Titre : Maîtriser les chambres avec Socket.io

- Auteur : Sébastien Chopin

- Parution : 12 juin 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Sébastien Chopin. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Le callback du emit()

- I-A. Le quoi ?

- I-B. Pourquoi l'utiliser ?

- I-C. Avec un exemple, ça donne quoi ?

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

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

- I-C-3. Tester l'exemple

- II. Les chambres

- II-A. À quoi ça sert ?

- II-B. Comment s'en sert-on ?

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

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

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

- II-B-4. Tester l'exemple

- III. Conclusion et remerciements

- III-A. Conclusion

- III-B. Remerciements

I - Le callback du emit()

I-A - Le quoi ?

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.

I-B - Pourquoi l'utiliser ?

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 - Avec un exemple, ça donne quoi ?

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

server.js

// 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
});
});

client.js

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()

server.js

// 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 });
});
});

client.js

// 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

J'ai créé une archive contenant les deux exemples que vous pouvez lancer directement avec node.js. À l'intérieur de cette archive se trouvent deux dossiers : avec-callback/ et sans-callback/.

Télécharger emit-callback.zip.

Pour lancer les tests :

- entrez dans le dossier dézippé : emit-callback/ ;

- lancez la commande npm install -d ;

- allez dans le dossier avec-callback/ ou le dossier sans-callback/ selon l'exemple que vous voulez voir ;

- lancez la commande node app.js ;

- rendez-vous à l'adresse http://localhost:3000 ;

- regardez la console du navigateur.

II - Les chambres

II-A - À quoi ça sert ?

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 - Comment s'en sert-on ?

II-B-1 - Côté serveur

Il suffit d'utiliser la méthode of() sur l'objet io :

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"
});

Un point important à noter : le nom d'une chambre doit toujours commencer par un /.

II-B-2 - Côté client

Il suffit de donner le nom de la chambre dans la méthode connect() :

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

Oui… c'est tout, ça a été pensé de façon très intelligente pour que l'on puisse découper facilement les sockets en plusieurs groupes. Dans chaque chambre, vous avez accès au socket du client connecté et donc vous pouvez créer des événements différents propres à chaque groupe.

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

Télécharger chambres.zip.

Pour lancer l'application :

- entrez dans le dossier dézippé : chambres/ ;

- lancez la commande npm install -d ;

- lancez la commande node app.js ;

- rendez-vous à l'adresse http://localhost:3000 ;

- jouez avec l'application et regardez le code soigneusement commenté.

III - Conclusion et remerciements

III-A - Conclusion

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).

III-B - Remerciements

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.