Co to jest edycja współpracy w czasie rzeczywistym?

Edycja współpracy w czasie rzeczywistym umożliwia wielu osobom pracę nad tym samym dokumentem jednocześnie, przy czym zmiany każdej osoby są natychmiast widoczne dla wszystkich innych. Wczesne systemy używały Operational Transformation (OT) — techniki, która zmienia kolejność konfliktowych edycji w locie — ale OT wymaga centralnego serwera do arbitrażu każdej zmiany. Nowoczesne systemy, takie jak Yjs, używają Conflict-free Replicated Data Types (CRDTs): matematycznego frameworka, w którym dowolne dwie repliki mogą być scalane w dowolnej kolejności i zawsze zbiegają się do tego samego wyniku, bez potrzeby centralnego autorytetu decydującego, kto „wygrywa".

CRDTs sprawiają, że edycja offline jest naturalna: użytkownicy mogą kontynuować edycję nawet po rozłączeniu, a ich zmiany czyszczą się po ponownym połączeniu. Dlatego edytory kodu współpracy w czasie rzeczywistym zbudowane na CRDT wydają się natychmiastowe — edycje są stosowane lokalnie w pierwszej kolejności i synchronizowane z partnerami później, zamiast czekać na podróż w obie strony do serwera przed pojawieniem się na ekranie.

Opis narzędzia

Edytor kodu współpracy to edytor kodu multiplayer w czasie rzeczywistym zasilany przez Yjs i CodeMirror 6. Udostępnij adres URL pokoju swoim kolegom z zespołu, a wszyscy w pokoju edytują ten sam dokument razem, z kursorem każdej osoby i zaznaczeniem pokazanym w etykietowanym wskaźniku.

Edytor obsługuje wyróżnianie składni dla dziesiątek języków programowania, wybierane za pomocą udostępnionego menu rozwijane języka — zmiana języka w jednej przeglądarce aktualizuje go dla wszystkich w pokoju natychmiast. Pliki można ładować z dysku lokalnego za pomocą przycisku Otwórz plik i pobierać z powrotem za pomocą Zapisz plik.

Funkcje

  • Kursory wielu użytkowników na żywo: Kursor każdego współpracownika i zaznaczenie są pokazane z kolorową, nazwaną etykietą; wiele kursorów w tej samej pozycji jest zwijane w jeden wskaźnik „N użytkowników", aby zmniejszyć szum wizualny.
  • Udostępniony wybór języka: Aktywny język programowania jest utrwalony w pokoju, dzięki czemu wszyscy uczestnicy zawsze widzą to samo wyróżnianie składni, a osoby dołączające później natychmiast otrzymują prawidłowy stan.
  • Otwieranie i zapisywanie plików lokalnie: Załaduj dowolny plik źródłowy z dysku bezpośrednio do udostępnionego edytora lub pobierz bieżący dokument jako plik z prawidłowym rozszerzeniem.

Jak to działa

Po dołączeniu do pokoju edytor tworzy dokument Yjs z udostępnionym węzłem Y.Text reprezentującym zawartość pliku. Każde naciśnięcie klawisza jest kodowane jako kompaktowa binarna aktualizacja Yjs, serializowana do Base64 i transmitowana przez pokój WebSocket. Wszyscy połączeni partnerzy stosują aktualizację do swojej własnej repliki; ze względu na gwarancję CRDT wszystkie repliki zbiegają się do tego samego tekstu niezależnie od kolejności, w której przychodzą aktualizacje.

Pozycje kursora i zaznaczenia są udostępniane przez lekką warstwę Awareness, która kieruje dane pozycji przez ten sam pokój WebSocket. Pełny stan dokumentu jest tłumiony i zapisywany w trwałym magazynie pokoju co sekundę, dzięki czemu użytkownicy, którzy dołączą po rozpoczęciu sesji, natychmiast otrzymają bieżący dokument.

Wyjaśnienie opcji

  • Menu rozwijane języka — Wybiera język wyróżniania składni dla edytora. Wybór jest transmitowany do wszystkich członków pokoju, dzięki czemu wszyscy widzą spójne wyróżnianie. Menu rozwijane jest wyłączone, dopóki nie połączysz się z pokojem.
  • Otwórz plik — Otwiera lokalny selektor plików i ładuje zawartość tekstu wybranego pliku do udostępnionego dokumentu Yjs, zastępując bieżącą zawartość dla wszystkich w pokoju.
  • Zapisz plik — Pobiera bieżącą zawartość edytora jako plik. Rozszerzenie pliku jest automatycznie wybierane na podstawie wybranego języka.
  • Motyw — Edytor podąża za preferencją ciemnego/jasnego systemu (przechowywane w localStorage). Przełącz motyw systemu operacyjnego lub przeglądarki, aby przełączać się między edytorami w stylu VS Code — ciemnym i jasnym.

Ograniczenia

  • Aktywne połączenie WebSocket z serwerem przekaźnika jest wymagane do synchronizacji; jeśli połączenie zostanie przerwane, edycje wykonane offline zostaną automatycznie ponownie zsynchronizowane po ponownym połączeniu.
  • Nie ma trwałej historii wersji — po zakończeniu sesji i zamknięciu pokoju dokument znika, chyba że zapisałeś go lokalnie za pomocą przycisku Zapisz plik.
  • Pliki binarne (obrazy, skompilowane pliki binarne itp.) nie mogą być ładowane; edytor pracuje tylko z plikami źródłowymi w postaci zwykłego tekstu.
  • To narzędzie jest w wersji beta; stabilność pokoju i maksymalna liczba równoczesnych użytkowników mogą być ograniczone.

Porady

  • Udostępnij pełny adres URL pokoju z paska adresu przeglądarki, aby zaprosić współpracowników — identyfikator pokoju jest zakodowany w adresie URL.
  • Zapisz lokalną kopię za pomocą Zapisz plik na koniec sesji; dane pokoju nie są gwarantowane do utrwalenia na czas nieokreślony.
  • Jeśli etykieta kursora współpracownika zakrywa ważny kod, etykieta automatycznie przerzuca się w lewo, gdy znajduje się blisko prawej krawędzi edytora.