Was ist Echtzeit-Kollaborationsbearbeitung?

Echtzeit-Kollaborationsbearbeitung ermöglicht es mehreren Personen, gleichzeitig an demselben Dokument zu arbeiten, wobei die Änderungen jeder Person sofort für alle anderen sichtbar sind. Frühe Systeme verwendeten Operational Transformation (OT) – eine Technik, die konfligierende Bearbeitungen spontan neu ordnet – aber OT erfordert einen zentralen Server, um jede Änderung zu vermitteln. Moderne Systeme wie Yjs verwenden Conflict-free Replicated Data Types (CRDTs): ein mathematisches Framework, bei dem zwei beliebige Replikationen in beliebiger Reihenfolge zusammengeführt werden können und immer zum gleichen Ergebnis konvergieren, ohne dass eine zentrale Autorität entscheiden muss, wer „gewinnt".

CRDTs machen Offline-Bearbeitung natürlich: Benutzer können weiterhin bearbeiten, auch wenn sie nicht verbunden sind, und ihre Änderungen werden sauber zusammengeführt, wenn sie sich wieder verbinden. Deshalb fühlen sich Echtzeit-Kollaborationseditoren, die auf CRDTs basieren, sofort an – Bearbeitungen werden zuerst lokal angewendet und danach mit Peers synchronisiert, anstatt auf einen Roundtrip zu einem Server zu warten, bevor sie auf dem Bildschirm erscheinen.

Werkzeugbeschreibung

Der Collaborative Code Editor ist ein Echtzeit-Multiplayer-Code-Editor, der von Yjs und CodeMirror 6 angetrieben wird. Teilen Sie die Raum-URL mit Ihren Teamkollegen und alle im Raum bearbeiten das gleiche Dokument zusammen, wobei der Cursor und die Auswahl jeder Person in einem beschrifteten Indikator angezeigt werden.

Der Editor unterstützt Syntaxhervorhebung für Dutzende von Programmiersprachen, die über ein gemeinsames Sprachmenü auswählbar sind – das Ändern der Sprache in einem Browser aktualisiert sie sofort für alle im Raum. Dateien können mit der Schaltfläche „Datei öffnen" von Ihrer lokalen Festplatte geladen und mit „Datei speichern" heruntergeladen werden.

Funktionen

  • Live-Cursor für mehrere Benutzer: Der Cursor und die Auswahl jedes Mitarbeiters werden mit einem farbcodierten, benannten Label angezeigt; mehrere Cursor an der gleichen Position werden in einen einzelnen „N Benutzer"-Indikator zusammengefasst, um visuelles Rauschen zu reduzieren.
  • Gemeinsame Sprachauswahl: Die aktive Programmiersprache wird im Raum beibehalten, sodass alle Teilnehmer immer die gleiche Syntaxhervorhebung sehen, und späte Beitreter erhalten sofort den korrekten Status.
  • Dateien lokal öffnen und speichern: Laden Sie beliebige Quelldateien direkt von der Festplatte in den gemeinsamen Editor oder laden Sie das aktuelle Dokument mit der korrekten Erweiterung als Datei herunter.

Funktionsweise

Wenn Sie einem Raum beitreten, erstellt der Editor ein Yjs-Dokument mit einem gemeinsamen Y.Text-Knoten, der den Dateiinhalt darstellt. Jeder Tastendruck wird als kompaktes binäres Yjs-Update codiert, zu Base64 serialisiert und über einen WebSocket-Raum übertragen. Alle verbundenen Peers wenden das Update auf ihre eigene Replikation an; aufgrund der CRDT-Garantie konvergieren alle Replikationen zum gleichen Text, unabhängig von der Reihenfolge, in der Updates ankommen.

Cursor- und Auswahlpositionen werden über eine leichte Awareness-Schicht geteilt, die Positionsdaten durch den gleichen WebSocket-Raum leitet. Der vollständige Dokumentstatus wird entprellt und jede Sekunde in den persistenten Raumspeicher geschrieben, sodass Benutzer, die nach dem Sitzungsstart beitreten, das aktuelle Dokument sofort erhalten.

Optionen erklärt

  • Sprachmenü – Wählt die Syntaxhervorhebungssprache für den Editor aus. Die Auswahl wird an alle Raummitglieder übertragen, sodass alle konsistente Hervorhebung sehen. Das Menü ist deaktiviert, bis Sie mit einem Raum verbunden sind.
  • Datei öffnen – Öffnet eine lokale Dateiauswahl und lädt den Textinhalt der ausgewählten Datei in das gemeinsame Yjs-Dokument, wobei der aktuelle Inhalt für alle im Raum ersetzt wird.
  • Datei speichern – Lädt den aktuellen Editor-Inhalt als Datei herunter. Die Dateierweiterung wird automatisch basierend auf der ausgewählten Sprache gewählt.
  • Design – Der Editor folgt Ihrer Systemeinstellung für dunkel/hell (gespeichert in localStorage). Schalten Sie Ihr Betriebssystem oder Browser-Design um, um zwischen den VS Code-ähnlichen dunklen und hellen Editor-Designs zu wechseln.

Einschränkungen

  • Eine aktive WebSocket-Verbindung zum Relay-Server ist erforderlich für die Synchronisierung; wenn die Verbindung unterbrochen wird, werden Bearbeitungen, die offline vorgenommen wurden, automatisch neu synchronisiert, wenn die Verbindung wiederhergestellt wird.
  • Es gibt keine persistente Versionsverlauf – sobald eine Sitzung endet und der Raum geschlossen wird, ist das Dokument weg, es sei denn, Sie haben es lokal mit der Schaltfläche „Datei speichern" gespeichert.
  • Binärdateien (Bilder, kompilierte Binärdateien usw.) können nicht geladen werden; der Editor funktioniert nur mit reinen Textquelldateien.
  • Dieses Werkzeug ist in Beta; Raumstabilität und maximale gleichzeitige Benutzer können begrenzt sein.

Tipps

  • Teilen Sie die vollständige Raum-URL aus der Adressleiste Ihres Browsers, um Mitarbeiter einzuladen – die Raum-ID ist in der URL codiert.
  • Speichern Sie eine lokale Kopie mit Datei speichern am Ende einer Sitzung; Raumdaten werden nicht garantiert unbegrenzt beibehalten.
  • Wenn das Cursor-Label eines Mitarbeiters wichtigen Code abdeckt, wird das Label automatisch nach links gekippt, wenn es sich in der Nähe des rechten Randes des Editors befindet.