Comment Canva a fait évoluer la collaboration en temps réel avec WebRTC : des WebSockets à la communication P2P transparente

Canva a récemment partagé comment il implémentation de pointeurs de souris en temps réel pour le tableau blanc collaboratif. Canva a choisi une solution basée sur WebRTC pour améliorer l’évolutivité, réduire la latence et diminuer la charge du backend. Étant donné que WebRTC utilise la communication peer-to-peer, Canva peut offrir aux utilisateurs une expérience en temps réel plus fluide et plus performante qu’une solution WebSocket et Redis traditionnelle basée sur le backend.

La solution actuelle de Canva pour le partage de pointeurs de souris en temps réel est basée sur le Communication Web en temps réel Protocole (WebRTC). WebRTC permet l’échange de données peer-to-peer directement entre les utilisateurs, en contournant le serveur et en offrant une réactivité en temps réel plus efficace, améliorant ainsi l’évolutivité et réduisant la latence par rapport aux solutions traditionnelles.

WebRTC est une norme Web officielle depuis 2021, conçue pour la communication directe peer-to-peer basée sur un navigateur pour les applications vidéo et audio et pris en charge par les navigateurs modernes. Cependant, WebRTC également prend en charge la transmission de données génériquescomme les positions du pointeur de la souris, ce qui en fait une solution potentielle pour ce cas d’utilisation. En exploitant WebRTC, Canva a réduit la charge sur son infrastructure back-end et amélioré les performances globales de son système.

Un flux simplifié d’établissement d’une connexion WebRTC (Source)

WebRTC s’appuie sur Utilitaires de traversée de session pour NAT (ÉTOUFFEMENT) et Traversée à l’aide d’un relais autour de NAT (TURN) pour gérer la traversée NAT, ce qui ajoute de la complexité à la solution. Environ 50 % des connexions nécessitent des serveurs TURN, qui relaient le trafic lorsque les connexions peer-to-peer directes ne sont pas possibles. Canva utilise des serveurs TURN tiers, il ne supporte donc pas la charge opérationnelle, mais il doit payer pour le trafic qui traverse ces serveurs. Les auteurs notent qu’un open-source COTURN il existe une alternative pour exploiter ces serveurs en interne.

Avant d’adopter WebRTC, Canva utilisait une approche plus traditionnelle WebSocket et Redis– une solution basée sur Redis pour le partage de données en temps réel. La décision d’utiliser Redis a été principalement motivée par ses capacités en tant que courtier de messages et par l’expérience antérieure de l’équipe avec cette technologie.

Flux de données entre le client et le serveur à l’aide de WebSocket (Source)

PubSub Redis a permis la distribution des mises à jour du pointeur de la souris, tandis que Flux Redis a contribué à garantir la livraison des messages. Bien que cette approche ait pu être mise à l’échelle pour des centaines de milliers d’utilisateurs, elle a rencontré des limites, notamment avec la mise à l’échelle horizontale dans Redis PubSub, qui est devenue inefficace à mesure que le nombre de nœuds augmentait. Canva a utilisé Redis 6.2 ; cependant, Redis a levé cette limitation avec Pub/Sub fragmenté dans Redis 7.0.

La solution WebSocket a également rencontré des problèmes d’équilibrage de charge lors des déploiements système. Chaque fois que Canva déployait une nouvelle version de service, les connexions WebSocket se reconnectaient, ce qui mettait à rude épreuve les nouvelles instances de serveur. Canva a résolu ce problème en optimisant le processus de reconnexion WebSocket et en adoptant l’encodage binaire protobuf, ce qui a réduit l’utilisation du processeur de 30 %.

WebSocket est un protocole de communication qui permet un transfert de données bidirectionnel en temps réel entre un client et un serveur via une connexion unique et durable. normalisé en 2011, pris en charge par tous les navigateurs moderneset souvent utilisé pour les applications en temps réel comme les systèmes de chat, les mises à jour en direct et l’édition collaborative.