Aller au contenu principal
NUKOE

Echtzeit-Kollaboration: Whiteboard mit Svelte und WebSockets

• 8 min •
Illustration d'un tableau blanc collaboratif connecté via WebSockets avec Svelte.

Erstellen eines kollaborativen Echtzeit-Whiteboards mit Svelte und WebSockets

Wenn man an moderne Kollaborationstools denkt, kommen einem sofort Namen wie Miro oder FigJam in den Sinn. Hinter ihrer scheinbaren Leichtigkeit verbergen sich gewaltige technische Herausforderungen: Zustandssynchronisation, Konfliktmanagement und nahezu null Latenz. Aber muss man das Rad mit exotischen Protokollen oder Echtzeitdatenbanken neu erfinden? Nicht unbedingt. Mit Svelte und gut beherrschten WebSockets ist es möglich, ein leistungsfähiges kollaboratives Whiteboard zu bauen, ohne auf Einfachheit zu verzichten.

Dieser Artikel führt Sie Schritt für Schritt durch die Erstellung einer solchen Anwendung, basierend auf Erfahrungen aus ähnlichen Projekten und dem Feedback der Community. Wir behandeln Architektur, Synchronisation, Benutzerverwaltung und Optimierungen, die den Unterschied ausmachen.

Die Grundlage: Svelte und WebSockets, ein erfolgreiches Duo

Svelte zeichnet sich durch seine native Reaktivität aus: Reaktive Variablen aktualisieren das DOM ohne Overhead. In Kombination mit WebSockets, die eine persistente bidirektionale Kommunikation ermöglichen, erhält man eine ideale Basis für Echtzeitanwendungen.

In unserem Fall wird jede Zeichenaktion (Linie, Löschen, Verschieben eines Elements) über WebSocket an einen Node.js-Server gesendet, der sie an die anderen Clients verteilt. Der globale Zustand wird serverseitig verwaltet, aber jeder Client besitzt eine lokale Kopie für sofortige Reaktionsfähigkeit.

Architektur: Der Server als Dirigent

Der Server spielt eine zentrale Rolle: Er empfängt Ereignisse, validiert sie und verteilt sie weiter. Um Konflikte zu vermeiden, wird jedes Ereignis mit einem Zeitstempel und einer eindeutigen ID versehen. Bei gleichzeitigen Änderungen an derselben Form gilt das zuletzt empfangene Ereignis – ein einfacher, aber effektiver "Last-Write-Wins"-Ansatz für ein Whiteboard.

Die Sitzungsverwaltung ist entscheidend: Jedes Whiteboard hat eine eindeutige ID. Clients verbinden sich mit einem bestimmten Raum, und der Server sendet Ereignisse nur an die Mitglieder dieses Raums. Das begrenzt die Last und gewährleistet Vertraulichkeit.

Zustandsverwaltung: Das richtige Gleichgewicht zwischen lokal und entfernt

Eine klassische Falle ist, alles in Echtzeit zu synchronisieren, einschließlich transienter Zustände wie dem Überfahren einer Form. Besser ist es, zu unterscheiden:

  • Permanente Ereignisse: Linien, Verschiebungen, Eigenschaftsänderungen – an den Server gesendet und persistiert.
  • Flüchtige Ereignisse: Cursor anderer Benutzer, temporäre Auswahlen – lokal über WebSocket verbreitet, aber nicht persistiert.

Diese Unterscheidung reduziert die Serverlast und vermeidet eine mit unnötigen Informationen überladene Datenbank.

Benutzererfahrung: Der Cursor der anderen, Fenster zur Zusammenarbeit

Den Cursor eines Mitarbeiters in Echtzeit zu sehen, schafft ein Gefühl der Präsenz. Die Positionsdaten werden mit hoher Frequenz (alle 50 ms) gesendet, jedoch ohne Zustellgarantie. Um eine Sättigung zu vermeiden, wird clientseitig ein Throttling eingesetzt.

Achtung: Scrollen oder Zoomen des Whiteboards muss berücksichtigt werden. Jedes Mausereignis wird in logische Koordinaten (bezogen auf die Zeichenfläche) umgewandelt, nicht in Bildschirmpixel, damit alle Benutzer den Cursor an der richtigen Stelle sehen.

Konfliktmanagement: Undo/Redo im Mehrspielermodus

Undo/Redo ist in einer kollaborativen Umgebung eine Herausforderung. Die gewählte Lösung: Jeder Benutzer hat seinen eigenen lokalen Undo-Stack, aber Undo-Aktionen werden in "inverse" Ereignisse umgewandelt, die an den Server gesendet werden. Das Rückgängigmachen einer Linie entspricht dem Senden eines "Lösche diese Linie"-Ereignisses an alle. Dieser Ansatz ist zwar komplexer, vermeidet aber Inkonsistenzen.

Für tiefergehende Informationen bietet Liveblocks eine hervorragende Analyse von Undo/Redo-Strategien im Mehrspielermodus, die unsere Implementierung inspiriert hat.

Leistung und Skalierbarkeit

Für moderate Nutzung (weniger als 100 gleichzeitige Benutzer auf einem Whiteboard) reicht ein einzelner Node.js-Server. Darüber hinaus sollte man eine verteilte Architektur mit Redis zur Zustandsverteilung zwischen Instanzen in Betracht ziehen. NATS, das in ähnlichen Projekten erwähnt wird, kann ebenfalls als Messaging-Backbone dienen.

Clientseitig wird HTML5 Canvas gegenüber SVG bevorzugt, da es eine bessere Rendering-Leistung bietet. Die Formen werden bei jedem Frame neu gezeichnet, aber nur geänderte Bereiche werden dank Dirty Rectangles aktualisiert.

Bereitstellung und praktische Überlegungen

Der WebSocket-Server kann auf Plattformen wie Heroku oder Fly.io bereitgestellt werden. Achten Sie auf lange Verbindungen: Die Timeouts der Load Balancer müssen so konfiguriert sein, dass sie WebSockets nicht trennen. Die Verwendung von SSL ist für Produktionsumgebungen unerlässlich.

Für die Speicherung kann eine einfache Datenbank wie SQLite oder PostgreSQL den endgültigen Zustand des Whiteboards speichern (Liste der Formen mit ihren Eigenschaften). Für erweiterte Echtzeitanforderungen bietet Supabase Realtime eine schlüsselfertige Lösung.

Erfahrungsbericht: Gelernte Lektionen

Beim Bau eines Prototyps wurden mehrere Fallstricke identifiziert:

  • Kompression nicht vernachlässigen: WebSocket-Nachrichten können mit permessage-deflate komprimiert werden, um die Bandbreite zu reduzieren.
  • Wiederverbindung handhaben: Nach einem Verbindungsabbruch muss der Client den vollständigen Zustand des Whiteboards anfordern, um sich zu resynchronisieren.
  • Mit echten Benutzern testen: Unit-Tests ersetzen keine realen Sitzungen mit Dutzenden von gleichzeitig zeichnenden Personen.

Fazit

Ein kollaboratives Whiteboard mit Svelte und WebSockets zu bauen, ist ein sowohl zugängliches als auch lehrreiches Projekt. Mit einer einfachen, aber robusten Architektur, korrekter Zustands- und Konfliktverwaltung erhält man eine flüssige und angenehme Anwendung. Moderne Tools wie Svelte vereinfachen die Reaktivität, während WebSockets die Echtzeitkommunikation sicherstellen.

Also, bereit loszulegen? Öffnen Sie Ihren Editor, installieren Sie ein paar Abhängigkeiten und beginnen Sie mit einem einfachen Austausch von Mauskoordinaten. Der Rest kommt durch Iteration.

Weiterführende Links