Les websockets, la technologie derrière les applications "real-time"

Petit disclaimer: Si tu n'es pas à l'aise avec le concept de requête HTTP, je te conseille de commencer par lire mon article sur le protocole http:

Comment on communique sur le web?

💡 Cet article est le premier de la mini-série: “Comment fonctionne une application web ?”. Sur le web on ne fait sans cesse que communiquer. Ton laptop communique avec chaque site sur lequel tu te connectes 🌐 ! Sur le web on communique par un système informatisé qu’est internet. Donc on ne fait…

Decode - by TancrèdeTancrède Simonin

Et sinon, c'est parti!

Aujourd'hui nos interfaces sont de plus en plus "en temps réel",

On va appeler "real-time" dès que votre application affiche des informations qui changent en temps réel:

• réception immédiate de messages
• suivi en temps réel d'une livraison / course sur une carte
• évolution d'un cours de bourse / crypto

etc...

Comment faire du temps-réel dans une application ?

Prenons l'exemple d'un système de messagerie, où nous voulons recevoir instantanément les messages reçus dans une conversation.

Etape 1 : charger l'historique de conversation

Lorsque vous ouvrez votre conversation slack avec votre collègue Mathilde, vous faites une requête pour demander au serveur les derniers messages envoyés et reçus avec cette collègue.
Cela permet de "charger" l'historique de conversation.

Vous faites alors une requête HTTP GET sur my/conversations/with-mathilde/last-messages
et le serveur vous renvoie la liste des derniers messages.

ça, c'est pour les messages passés !

Etape 2 : recevoir les nouveaux messages

Maintenant que vous avez chargé l'historique des messages, supposons que Mathilde soit connectée et vous en envoie de nouveaux, comment faire pour recevoir ces nouveaux messages en temps réel ?

Faire du real-time avec http: le http polling

Seulement avec http, on pourrait dire que le frontend recharge chaque seconde la liste des derniers messages, et donc si Mathilde en a envoyé de nouveaux, ils s'afficheront dans la conversation.

Cette méthode permet effectivement, à une seconde près, d'afficher les nouveaux messages reçus.

On appelle cette méthode le polling.

Le http polling fonctionne très bien pour une petite application avec peu d'utilisateurs, et si on ne veut du temps réel que sur une seule conversation.

Sauf qu'on ne parle jamais qu'avec une seule personne dans une application, on a des dizaines de conversations privées, des channels, des groupes etc..

Cela voudrait dire que le client ne fait pas 1 requête HTTP par seconde, mais:

1 requête HTTP par seconde X le nombre de conversations.

ce qui peut représenter facilement plusieurs dizaines de requêtes HTTP par seconde.

Cette méthode est donc fonctionnelle, mais absolument pas scalable.

Il va donc falloir trouver un autre moyen de communiquer entre le client et le serveur ! ( ouai t'as capté c'est les websockets du coup 😘 ).

La différence entre http et websocket

On l'a vu dans un précédent article, la communication client - serveur en http est un protocole qui fonctionne en requête - réponse.
C'est le client qui envoie une requête au serveur et reçoit une réponse.

Dans ce protocole, le serveur ne peut jamais envoyer une requête au client.

Dans notre exemple de messagerie, lorsque Mathilde vous envoie un nouveau message, elle envoie une requête au serveur.
Et ce qu'on voudrait, c'est que le serveur vous envoie directement ce nouveau message, sans que vous ayez à lui demander.

Pour cela, il nous faut un protocole de communication bi-directionnel, avec lequel vous pouvez envoyer des requêtes au serveur, et le serveur peut également vous envoyer des requêtes.

C'est exactement l'objectif des websockets.

Ce qu'on appelle websocket est un protocole de communication bidirectionnel, un tunnel de communication entre le serveur et votre client ( ordinateur ) par lequel vous pouvez envoyer des messages au serveur, et le serveur peut aussi vous envoyer
des messages.

Avec cette technologie, il est donc très facile de créer des interfaces en temps réel.

Dans le cas de notre messagerie, une fois que vous avez chargé la page et l'historique de conversation avec Mathilde, si mathilde est connectée et vous envoie de nouveaux messages, le serveur va pouvoir directement vous les envoyer, sans que vous ayez besoin de recharger la page toutes les secondes.

Ce protocole de communication permet donc d'avoir des fonctionnalités "real-time", avec une mise à jour en temps réel des informations sur votre écran.

On retrouve donc des websockets dans les messageries, mais aussi dans les applications de tracking boursier et crypto !

Voilà, c'était http VS websockets en moins de 3 minutes !

Pour ne rien rater tu peux t'inscrire pour recevoir chaque article directement par mail ! Tu peux aussi t'abonner sur Linkedin 😎