Canva führt Echtzeit-Mauszeiger für kollaboratives Whiteboarding ein
Canva hat ein neues Feature für die kollaborative Arbeit eingeführt: den Echtzeit-Mauszeiger. Diese Innovation ist besonders nützlich für Whiteboarding und ermöglicht es mehreren Nutzern, Mausbewegungen anderer Teilnehmer in Echtzeit zu sehen. Durch diese Funktion vereinfacht sich die Zusammenarbeit erheblich, da alle Teilnehmer die Bewegungen und Aktionen ihrer Teamkollegen unmittelbar verfolgen können. Dieser Beitrag beleuchtet die technischen Hintergründe der Implementierung, die Vorteile und Herausforderungen des neuen Systems sowie Canavas Entscheidungen bezüglich der zugrundeliegenden Technologien.
Technologie hinter dem Echtzeit-Mauszeiger
Zur Umsetzung des Echtzeit-Mauszeigers entschied sich Canva für das WebRTC-Protokoll. WebRTC (Web Real-Time Communication) erlaubt den direkten Datenaustausch zwischen Geräten, wodurch eine Peer-to-Peer-Kommunikation ermöglicht wird. Dies bietet mehrere Vorteile gegenüber herkömmlichen Lösungen, wie beispielsweise der Wegfall eines zentralen Servers zur Datenvermittlung. So reduziert Canva die Belastung seiner Backend-Infrastruktur und verbessert gleichzeitig die Skalierbarkeit sowie die Latenz.
Seit 2021 ist WebRTC ein offiziell anerkannter Webstandard und unterstützt die direkte Kommunikation in Browsern. Ursprünglich für die Audio- und Videodatenübertragung entwickelt, eignet sich WebRTC auch zur Übertragung anderer Datentypen, wie z.B. Positionsdaten von Mauszeigern. Diese Flexibilität macht es ideal für kollaborative Anwendungen wie Canavas Whiteboarding. Mit WebRTC skalieren Unternehmen wie Canva ihre Services nahtlos und umgehen aufwendige Hardware- und Infrastrukturkosten für Server. Mehr hilfreiche Tools für Selbstständige stellt dieser Blog vor, der praktische Empfehlungen für die digitale Arbeitswelt bereithält.
Herausforderungen und die Rolle von STUN und TURN
Obwohl WebRTC viele Vorteile bietet, bringt es auch Herausforderungen mit sich. Damit Peer-to-Peer-Verbindungen hinter Firewalls und NAT (Network Address Translation) funktionieren, verwendet WebRTC STUN- und TURN-Server. STUN (Session Traversal Utilities for NAT) erkennt die tatsächliche IP-Adresse eines Endgeräts und ermöglicht den Aufbau von Peer-to-Peer-Verbindungen über NAT-Router hinweg. Wenn Geräte keine direkte Verbindung herstellen können, fungieren TURN-Server (Traversal Using Relays around NAT) als Relays und leiten die Datenpakete zwischen den Teilnehmern weiter.
Etwa die Hälfte aller Verbindungen benötigt TURN-Server als Relay, wenn eine direkte Peer-to-Peer-Verbindung unmöglich ist. Canva nutzt hier Drittanbieter-TURN-Server, um die operationale Last zu reduzieren, trägt jedoch die Kosten für den durchgeleiteten Datenverkehr. Solche Lösungen sind kostspielig, da Verbindungen über TURN-Server zusätzliche Bandbreitengebühren verursachen. Um Nutzern weltweit ein zuverlässiges Echtzeit-Erlebnis zu bieten, akzeptiert Canva diese zusätzlichen Kosten.
Als Alternative zu externen TURN-Servern bietet sich COTURN als Open-Source-Lösung an, mit der Canva die Serverlast verwalten und langfristig Kosten senken könnte. Eine interne Lösung wie COTURN könnte Canva außerdem mehr Kontrolle über die Verbindungsinfrastruktur verschaffen.
Vorherige Lösungsansätze mit WebSocket und Redis
Bevor Canva sich für WebRTC entschied, nutzte das Unternehmen eine WebSocket- und Redis-basierte Lösung. WebSocket ist ein Protokoll, das den bidirektionalen, dauerhaften Datenaustausch zwischen Client und Server ermöglicht. Diese Lösung stieß jedoch bei der Skalierbarkeit an Grenzen, besonders mit steigender Nutzerzahl. Redis, das als Nachrichtenbroker fungierte, ermöglichte den Echtzeit-Datenaustausch über Redis PubSub und Redis Streams. Doch die horizontale Skalierung wurde zunehmend ineffizient.
Redis PubSub ermöglichte zwar Echtzeitkommunikation, dennoch stieß das System bei zahlreichen gleichzeitigen Nutzern auf Hürden. Die zunehmende Anzahl von Redis-Knoten erschwerte das Datenmanagement und beeinträchtigte die Effizienz. Mit der Einführung von Redis 7.0 und Sharded PubSub verbesserte sich die Skalierbarkeit teilweise, jedoch entschied sich Canva schließlich für WebRTC, um langfristige Skalierbarkeit zu sichern.
Optimierung der WebSocket-Implementierung
Während des Betriebs der WebSocket-Lösung begegnete Canva weiteren Herausforderungen, insbesondere bei der Lastverteilung während Systemupdates. Bei jeder neuen Dienstversion mussten die WebSocket-Verbindungen neu hergestellt werden, was die Serverinstanzen belastete und die Systemleistung beeinträchtigte.
Um diese Lastspitzen zu minimieren, optimierte Canva den WebSocket-Neuverbindungsprozess und führte eine binäre Protobuf-Codierung ein, wodurch sich die CPU-Nutzung um bis zu 30 % verringerte. Obwohl diese Maßnahme die Leistung verbesserte, sah das Unternehmen darin nur eine Zwischenlösung und suchte eine langfristig skalierbare Alternative. Diese Optimierungen verdeutlichen die hohe Rechenlast, die bei WebSocket-Systemen aufkommt und die Ressourcenverteilung erschwert.
Vergleich von WebRTC und WebSocket für Echtzeitanwendungen
Durch den Wechsel von WebSocket zu WebRTC schafft Canva eine stabilere und effizientere Plattform für Echtzeitanwendungen. WebRTC bietet durch seine Peer-to-Peer-Struktur eine niedrigere Latenz und ermöglicht eine effizientere Lastverteilung im Vergleich zu zentralisierten WebSocket-Implementierungen. Während WebSocket in Bereichen wie Chats und einfache Benachrichtigungssysteme nützlich ist, eignet sich WebRTC besser für Anwendungen mit hohen Nutzerzahlen und intensiven Datenströmen. Die moderne Infrastruktur von WebRTC ermöglicht Teams eine reibungslose und effiziente Zusammenarbeit in Echtzeit.
Canva erkannte, dass WebRTC sich ideal für Anwendungen mit hohem Datendurchsatz eignet. Da es die direkte Verbindung zwischen Geräten erlaubt, verringern sich die Latenzen und das Servernetzwerk wird entlastet, was sowohl die Stabilität als auch die Benutzerfreundlichkeit verbessert.
Fazit: Wie Canva Echtzeit-Kollaboration neu definiert
Canva hat mit dem Echtzeit-Mauszeiger für kollaboratives Whiteboarding einen wichtigen Schritt unternommen, um die Nutzererfahrung zu verbessern. Durch den Einsatz von WebRTC entwickelte das Unternehmen eine Lösung, die sowohl die Infrastruktur entlastet als auch eine flüssigere Echtzeitkommunikation ermöglicht. Die Peer-to-Peer-Kommunikation über WebRTC senkt Verzögerungen und verbessert die Skalierbarkeit im Vergleich zur bisherigen WebSocket- und Redis-basierten Lösung.
Mit WebRTC stärkt Canva seine Position als innovativer Dienst für Online-Kollaboration und schafft ein besseres Nutzererlebnis. Die skalierbare Infrastruktur erlaubt es, das Whiteboarding-Tool für vielfältige Anwendungsfälle anzupassen, sei es für Bildungseinrichtungen, Unternehmen oder kreative Projekte.
Zusammengefasst zeigt sich, dass Canva durch die Implementierung moderner Technologien wie WebRTC seine Position als Vorreiter in der Online-Kollaboration stärkt. Diese Entscheidung bietet sowohl Vorteile für das Unternehmen als auch für die Nutzer und schafft eine zuverlässige und kosteneffiziente Plattform für kollaborative Arbeitsprozesse. Durch den Einsatz neuer Technologien und kontinuierliche Optimierungen bleibt Canva ein Vorbild in der Welt der Echtzeitanwendungen. Die WebRTC-basierte Lösung könnte andere Anwendungen im Bereich der Echtzeitkommunikation inspirieren und Canva als Vorbild für ähnliche Kollaborationsdienste dienen.
