Web temps réel : quand chaque milliseconde compte !
Dans un site, un statut “hors ligne” qui passe à “en ligne” sans que vous n’ayez rien fait ? Un commercial qui vous parle dans une messagerie ? Alors, le web temps réel n’est pas loin…
Le web temps réel est un système permettant de répondre à des évènements dans un laps de temps souvent très court (quelques millisecondes). Dans les projets, le temps réel est très souvent utilisé afin de synchroniser les données de plusieurs utilisateurs et ce, de manière quasi instantanée et simultanée. Et, les applications sont multiples : mises à jour en direct des scores dans les jeux en ligne, collaboration en temps réel comme dans un document, notifications, trading … Il s’agit d’informer les utilisateurs des changements dès qu’ils se produisent, sans nécessiter d’action comme par exemple le rafraîchissement de la page.
Le temps réel en web, c’est quoi au juste ?
Quelques exemples
Un bon exemple, pour illustrer le temps réel est celui des systèmes de messageries instantanées sur les réseaux sociaux. Dans l’application Facebook, les messages sont reçus immédiatement après leur envoi, sans nécessité de rafraîchir la page. Cela marque bien la différence avec les anciennes méthodes qu’on pouvait retrouver sur les boîtes e-mails (le bouton ”envoyer/recevoir”) ou sur les forums de discussion.
Un autre exemple parlant est celui d’un système d’enchères. L’enchérisseur doit voir le montant actuel de l’offre se mettre à jour automatiquement. Sans cela, l’expérience utilisateur pourrait être frustrante. Et c’est tout là l’intérêt du web temps réel : améliorer l’expérience utilisateur.
Si vous voulez faire l’expérience du temps réel, n’hésitez pas à vous rendre dans notre métaverse : Workadventu.re !
Poussons l’explication un peu plus loin …
Le temps réel correspond techniquement à la mise en place d’un système automatisé répondant à des événements divers se produisant sur l’application suite à l’action des utilisateurs (mais pas seulement, on peut imaginer des événements déclenchés par des capteurs de données, des machines) et permettant donc de notifier les autres utilisateurs de la réalisation des dits événements. Evidemment, le temps réel n’est pas obligatoire, la majorité des sites peuvent très bien s’en passer. Pourtant, il est devenu peu à peu indispensable car il améliore énormément l’expérience utilisateur.
Panorama des technologies pour faire du web temps réel
Alors quelles sont les technologies qui permettent de faire du temps réel ? Par exemple, NodeJS est très souvent utilisé notamment pour son système asynchrone non bloquant.
Panorama de ces technologies :
WebSocket
Il s’agit de la technologie la plus répandue. Elle permet d’ouvrir une connexion bidirectionnelle entre un client (un navigateur web) et un serveur puis de persister cette connexion afin que le client puisse envoyer des informations au serveur et vice-versa. Vous pouvez comparer cette technologie à une communication par téléphone.
Des librairies comme Socket.io permettent de “facilement” implémenter les websockets. Des technologies comme Soketi permettent aussi d’installer des serveurs websockets sans trop de configuration de votre part.
Si vous ne souhaitez pas ou pouvez pas développer votre propre serveur de websockets, il existe des services tiers payants comme Pusher ou Ably permettant de vous faciliter le travail.
De plus, chez TheCodingMachine, nous sommes certifiés Laravel et ces derniers viennent justement de sortir une technologie first-party pour l’implémentation des websockets : Laravel Reverb, rendant la chose encore plus facile à implémenter d’un point vue technique et sécurité.
SSE (Server Sent Events)
Il s’agit d’une technologie de communication à sens unique : le serveur envoie des données au client quand il en a besoin.
Vous pouvez utiliser un serveur avec Mercure comme solution gratuite et open source.
Si vous n’avez pas besoin de recevoir des données de la part des utilisateurs, c’est un choix solide face aux websockets.
Polling
Ce n’est pas une technologie en particulier mais plutôt un pattern. Le client (navigateur) fait régulièrement des requêtes HTTP au serveur (par exemple toutes les 5 secondes) afin de mettre à jour les données. C’est du rafraichissement automatique.
Attention à la charge des serveurs avec le nombre de requêtes par seconde que cela peut générer. Il s’agit plus d’une synchronisation que d’un temps réel.
WebRTC / Peer-to-peer
Une technologie idéale pour le streaming vidéo ou audio. Fonctionne avec une connexion direct en peer-to-peer (entre deux clients). Vous pouvez utiliser les APIs WebRTC natives disponibles dans les navigateurs modernes afin d’implémenter ce système. Vous aurez certainement besoin d’un serveur de signaling. Il s’agit d’un serveur permettant, lorsqu’un nouvel utilisateur se connecte, de donner la liste des autres utilisateurs afin de savoir avec qui établir le lien peer-to-peer.
Technologie efficace et rapide mais qui a des limites si vous souhaitez connecter de trop nombreux utilisateurs entre eux. Des librairies comme simple peer vous aideront à implémenter cette technologie.
Le WebRTC reste tout de même un cas à part dans l’échange de données en temps réel car il est vraiment développé pour l’échange de voix/vidéo et non de données “simples” où on préfèrera utiliser les autres solutions (ou alors passer par le serveur de signaling).
Et encore quelques autres…
Il existe encore bien d’autres moyens de faire du temps réel :
- MQTT : Message Queuing Telemetry Transport → utilisé en IoT, protocole de messagerie en pub/sub (publish / subscribe) avec un système de broker intermédiaire aux clients.
- SignalR : spécifique à l’écosystème .NET → similaire au websocket, connexion bidirectionnelle
- Long polling : une variante du polling où le serveur retient la réponse à envoyer jusqu’à ce qu’il y ait de nouvelles données.
- Un serveur push avec HTTP/2 …
| Technologie | Description Simplifiée | Bidirectionnel | Efficacité | Simplicité | Utilisation Typique |
|---|---|---|---|---|---|
| WebSocket | Le client (navigateur) et le serveur peuvent s’échanger des informations à tout moment et dans les deux sens. | ✅ | ⚡️⚡️⚡️ | ➕➕ (grâce aux nombreuses ressources disponibles) | Jeux en ligne, messagerie instantanée, échange de données. |
| WebRTC Peer-to-Peer | Deux clients s’échangent des données entre eux (très bon pour la vidéo ou l’audio). | ✅ | ⚡️⚡️⚡️ | ➕➕(grâce aux nombreuses ressources disponibles) | Appels vidéo ou audio. |
| SSE (Server-Sent Events) | Le serveur envoie des informations au client quand il a des nouvelles. | ❌ | ⚡️⚡️ | ➕➕ | Notifications en direct, actualités, mises à jour. |
| Polling | Le client fait une requête régulièrement au serveur. | ❌ | ⚡️ | ➕➕➕ | Vérification régulière de nouvelles données, applications très légères. |
Prêt à ajouter du web temps réel dans votre application ?
Si vous n’utilisez pas de services payants et décidez d’implémenter vos propres serveurs pour la gestion du temps réel, quelques questions de sécurité et de scalabilité se posent.
Sécurité
En implémentant un système de temps réel, il faut s’assurer que seules les bonnes personnes envoient et reçoivent les données via cette couche supplémentaire.
Cela demande plus de travail pour mettre en place l’authentification, l’autorisation et la gestion des sessions. Assurez-vous aussi de chiffrer vos données en transit en utilisant des protocoles sécurisés comme WSS (websockets) ou HTTPS (polling, sse).
Les données stockées (comme l’historique de chat) devraient aussi être chiffrées / protégées.
Scalabilité
Les applications en temps réel ne sont pas les plus simples à scaler. Si votre application grandit (et votre nombre d’utilisateurs aussi) il faudra opter pour du scaling horizontal avec un système de load balancing.
Déployer votre application avec Docker ou Kubernetes pourra aider. On peut facilement imaginer la duplication des containers faisant tourner le système de temps réel.
Pas de connexion internet ?
Une application en temps réel augmente fortement l’expérience utilisateur mais cela nécessite une connexion internet permanente et stable afin de s’assurer que l’expérience n’en soit pas gâchée.
Conclusion
Le web temps réel, c’est un peu comme de la magie : puissant et utile mais nécessitant de la maîtrise. Que ce soit pour discuter avec des amis, jouer en ligne ou faire des transactions rapides, le temps réel est partout, rendant l’expérience utilisateur plus rapide, réactive et efficace que jamais.
Cependant, son implémentation est loin d’être triviale et nécessite de bien réfléchir à vos cas d’utilisation et à la technologie qui sera la mieux adaptée.
Dans beaucoup de cas, choisir les WebSockets avec un serveur NodeJS et Socket.io fera l’affaire et vous permettra aussi d’expérimenter rapidement.
Article de Paulin BAT
