WebSocket avec Socket.IO

Le pull n’a plus la cote

Il y a quelques années, les applications web de messagerie devaient envoyer une requête au serveur web afin de vérifier la présence de nouveaux courriels. Cette technique se nomme le pull. Elle consiste à tirer l’information du serveur web. Imaginez 10 000 utilisateurs connectés qui demandent une mise à jour à toutes 30 secondes. Cela aura pour conséquence de surcharger le serveur web.

Go pour le push

La nouvelle façon de procéder est par push, où les données sont poussées aux clients. La nouvelle norme HTML 5 nous offre les WebSockets afin de permettre au développeur de pousser l’information du serveur vers le client.

Le WebSocket repose sur le fait que le serveur peut initier un envoi d’informations vers le client. Comparativement au AJAX, c’est toujours le client qui initie une demande d’information.

Communication bi-directionnelle temps-réel
avec les WebSockets

Le tableau suivant démontre qu’il est possible d’utiliser les WebSockets sur plusieurs navigateurs sans librairie externe. Par contre, certains navigateurs implémentent la norme du W3C de façon différente. Cela aura pour impact que le même code ne fonctionnera pas nécessairement bien sur tous les navigateurs qui supportent les WebSockets.

Pour cette raison, il est conseillé d’utiliser une librairie JavaScript qui permettra d’abstraire ces différences entre les navigateurs. De plus, les librairies proposées offrent un fallback au cas où les WebSockets ne seraient pas supportées sur votre navigateur.

http://caniuse.com/#feat=websockets

Socket.IO pour faciliter l’utilisation des WebSockets

Socket.IO est une librairie JavaScript qui permet la communication bi-directionnelle entre un client et un serveur. Socket.IO utilise les Websockets de base, mais supporte plusieurs fallbacks pour les navigateurs qui ne supportent pas bien cette nouvelle norme HTML5 du W3C.

Puisque Socket.IO utilise son propre protocole de transport, il rend son implémentation incompatible avec un serveur qui supporte les WebSockets standards. Si cette librairie est utilisée au niveau du client, la contre-partie serveur Socket.IO devra aussi être utilisée.

Socket.IO est un match parfait pour fonctionner avec NodeJS. Pour les développeurs Java, un port de cette librairie est aussi disponible.

Socket.IO enables real-time bidirectional event-based communication.

It works on every platform, browser or device, focusing equally on reliability and speed.

 

Mettre en place le serveur de WebSocket avec Socket.IO

Il est très simple de créer un serveur WebSocket avec Socket.IO. Le serveur repose sur quelques lignes de code JavaScript. Voici le code pour créer un serveur de messagerie (chat) côté serveur.

Code serveur

serveur.js

 

Code client

index.html

 

Dépendances du projet

package.json

 

Déployer le serveur WebSocket sur Heroku

Il est très simple de déployer une application NodeJS qui utilise Socket.IO sur Heroku. Voici la procédure détaillée.

Un fichier Procfile pour lancer le serveur

Afin d’indiquer à Heroku comment lancer l’application NodeJS, il est nécessaire de créer le fichier nommé Procfile à la racine de votre projet. Voici le contenu de ce fichier :

Procfile

Déployer le projet vers Heroku

Il est simple de créer un nouveau projet Heroku prêt pour le déploiement. Deux étapes toutes simples sont demandées : créer un repo Git et créer l’application Heroku.

Afin de procéder à la création de l’application Heroku, vous devrez installer la « Heroku toolbelt » si ce n’est pas déjà fait.

Créer un repo Git

Créer et déployer l’application Heroku

La sélection du port

L’erreur à ne pas commettre est de spécifier le port à utiliser pour votre application NodeJS. En fait, c’est Heroku qui détermine le numéro du port à utiliser pour votre application Web. Ce port sera ensuite connecté au port 80 (http) ou 443 (https).

Il faut donc utiliser la variable d’environnement process.env.PORT afin de récupérer le port fourni par Heroku dans votre code.

Déboguer les messages WebSocket avec Chrome

Les navigateurs récents comme Chrome et Chromium offrent un outil qui permet de visualiser les messages échangés entre le client et le serveur via WebSocket. Cela facilite le débogage de votre application WS.

Voici les étapes pour arriver à cet outil essentiel :

  • Ouvrez les outils du développeur
  • Sélectionner l’onglet Réseau (Network)
  • Filtrer pour afficher seulement les messages WebSocket (WS)
Déboger les WebSocket avec Chrome

 

Conclusion

Il est simple de mettre en place un serveur WebSocket avec Socket.IO. Il est aussi très simple de déployer cette solution logicielle sur Heroku.

Par contre, si vous voulez éviter d’entretenir un serveur WebSocket, il est possible d’utiliser les services de Pusher. Pusher offre une infrastructure dans le nuage (SAAS), basée sur les serveurs d’Amazon (AWS) pour l’envoi de messages à vos clients. Le forfait gratuit vous offre 100 000 messages par mois.

Finalement, afin d’utiliser Socket.IO dans une application Angular JS, il est conseillé d’utiliser le projet angular-socket-io.

Références

Facebook Comments

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.