Che cos'è la modifica collaborativa in tempo reale?

La modifica collaborativa in tempo reale consente a più persone di lavorare sullo stesso documento contemporaneamente, con le modifiche di ogni persona immediatamente visibili a tutti gli altri. I primi sistemi utilizzavano Operational Transformation (OT) — una tecnica che riordina le modifiche in conflitto al volo — ma OT richiede un server centrale per arbitrare ogni modifica. I sistemi moderni come Yjs utilizzano Conflict-free Replicated Data Types (CRDTs): un framework matematico in cui due repliche qualsiasi possono essere unite in qualsiasi ordine e convergono sempre allo stesso risultato, senza necessità di un'autorità centrale per decidere chi "vince".

I CRDT rendono naturale la modifica offline: gli utenti possono continuare a modificare anche quando disconnessi, e le loro modifiche si uniscono perfettamente quando si riconnettono. Questo è il motivo per cui gli editor collaborativi in tempo reale costruiti su CRDT sembrano istantanei — le modifiche vengono applicate localmente per prime e sincronizzate ai peer in seguito, piuttosto che attendere un round-trip a un server prima di apparire sullo schermo.

Descrizione dello strumento

L'Editor di Codice Collaborativo è un editor di codice multiplayer in tempo reale alimentato da Yjs e CodeMirror 6. Condividi l'URL della stanza con i tuoi colleghi e tutti nella stanza modificano lo stesso documento insieme, con il cursore e la selezione di ogni persona mostrati in un indicatore etichettato.

L'editor supporta l'evidenziazione della sintassi per dozzine di linguaggi di programmazione, selezionabili tramite un menu a discesa del linguaggio condiviso — cambiare il linguaggio in un browser lo aggiorna istantaneamente per tutti nella stanza. I file possono essere caricati dal tuo disco locale con il pulsante Apri File e scaricati di nuovo con Salva File.

Funzionalità

  • Cursori multi-utente dal vivo: Il cursore e la selezione di ogni collaboratore sono mostrati con un'etichetta con codice colore e nome; più cursori nella stessa posizione vengono compressi in un singolo indicatore "N utenti" per ridurre il rumore visivo.
  • Selezione del linguaggio condivisa: Il linguaggio di programmazione attivo è persistente nella stanza in modo che tutti i partecipanti vedano sempre la stessa evidenziazione della sintassi, e i nuovi arrivati ricevono immediatamente lo stato corretto.
  • Apri e salva file localmente: Carica qualsiasi file sorgente dal disco direttamente nell'editor condiviso, o scarica il documento corrente come file con l'estensione corretta.

Come funziona

Quando entri in una stanza, l'editor crea un documento Yjs con un nodo Y.Text condiviso che rappresenta il contenuto del file. Ogni pressione di tasto viene codificata come un aggiornamento Yjs binario compatto, serializzato in Base64 e trasmesso su una stanza WebSocket. Tutti i peer connessi applicano l'aggiornamento alla loro replica; grazie alla garanzia CRDT, tutte le repliche convergono allo stesso testo indipendentemente dall'ordine in cui arrivano gli aggiornamenti.

Le posizioni del cursore e della selezione sono condivise attraverso un leggero livello Awareness che instrada i dati di posizione attraverso la stessa stanza WebSocket. Lo stato completo del documento viene sottoposto a debounce e scritto nell'archiviazione persistente della stanza ogni secondo, in modo che gli utenti che entrano dopo l'inizio della sessione ricevano immediatamente il documento corrente.

Opzioni spiegate

  • Menu a discesa Linguaggio — Seleziona il linguaggio di evidenziazione della sintassi per l'editor. La scelta viene trasmessa a tutti i membri della stanza in modo che tutti vedano un'evidenziazione coerente. Il menu a discesa è disabilitato finché non sei connesso a una stanza.
  • Apri File — Apre un selezionatore di file locale e carica il contenuto di testo del file selezionato nel documento Yjs condiviso, sostituendo i contenuti attuali per tutti nella stanza.
  • Salva File — Scarica il contenuto corrente dell'editor come file. L'estensione del file viene scelta automaticamente in base al linguaggio selezionato.
  • Tema — L'editor segue la tua preferenza di tema scuro/chiaro del sistema (memorizzata in localStorage). Attiva/disattiva il tema del tuo sistema operativo o browser per passare tra i temi dell'editor scuro e chiaro in stile VS Code.

Limitazioni

  • È richiesta una connessione WebSocket attiva al server di inoltro per la sincronizzazione; se la connessione si interrompe, le modifiche effettuate offline verranno risincronizzate automaticamente al riconnessione.
  • Non esiste una cronologia delle versioni persistente — una volta terminata una sessione e chiusa la stanza, il documento è perso a meno che non lo abbia salvato localmente con il pulsante Salva File.
  • I file binari (immagini, binari compilati, ecc.) non possono essere caricati; l'editor funziona solo con file sorgente in testo semplice.
  • Questo strumento è in beta; la stabilità della stanza e il numero massimo di utenti simultanei potrebbero essere limitati.

Suggerimenti

  • Condividi l'URL completo della stanza dalla barra degli indirizzi del tuo browser per invitare i collaboratori — l'ID della stanza è codificato nell'URL.
  • Salva una copia locale con Salva File alla fine di una sessione; i dati della stanza non sono garantiti per persistere indefinitamente.
  • Se l'etichetta del cursore di un collaboratore sta coprendo codice importante, l'etichetta si capovolge automaticamente a sinistra quando è vicino al bordo destro dell'editor.