Что такое редактирование в реальном времени с совместным доступом?

Редактирование в реальном времени с совместным доступом позволяет нескольким людям одновременно работать над одним документом, при этом изменения каждого человека мгновенно видны всем остальным. Ранние системы использовали Operational Transformation (OT) — технику, которая переупорядочивает конфликтующие правки на лету — но OT требует центрального сервера для арбитража каждого изменения. Современные системы, такие как Yjs, используют Conflict-free Replicated Data Types (CRDTs): математическую структуру, где любые две реплики могут быть объединены в любом порядке и всегда сходятся к одному результату, без необходимости в центральном органе, решающем, кто "выигрывает".

CRDTs делают редактирование в автономном режиме естественным: пользователи могут продолжать редактирование даже при отсутствии соединения, и их изменения чисто объединяются при переподключении. Вот почему редакторы совместного кода, построенные на CRDTs, кажутся мгновенными — правки применяются локально в первую очередь и синхронизируются с коллегами позже, вместо того чтобы ждать круговой поездки на сервер перед появлением на экране.

Описание инструмента

Collaborative Code Editor — это редактор кода в реальном времени для нескольких пользователей, работающий на Yjs и CodeMirror 6. Поделитесь URL комнаты с вашей командой, и все в комнате редактируют один документ вместе, при этом курсор и выделение каждого человека показаны в помеченном индикаторе.

Редактор поддерживает подсветку синтаксиса для десятков языков программирования, выбираемых через общее раскрывающееся меню языков — изменение языка в одном браузере мгновенно обновляет его для всех в комнате. Файлы можно загружать с локального диска с помощью кнопки Open File и загружать обратно с помощью Save File.

Возможности

  • Курсоры нескольких пользователей в реальном времени: Курсор и выделение каждого сотрудника показаны с цветовой кодировкой и помеченным ярлыком; несколько курсоров в одной позиции объединяются в один индикатор "N пользователей" для уменьшения визуального шума.
  • Общий выбор языка: Активный язык программирования сохраняется в комнате, поэтому все участники всегда видят одинаковую подсветку синтаксиса, а опоздавшие участники сразу же получают правильное состояние.
  • Открытие и сохранение файлов локально: Загружайте любой исходный файл с диска непосредственно в общий редактор или загружайте текущий документ как файл с правильным расширением.

Как это работает

Когда вы присоединяетесь к комнате, редактор создает документ Yjs с общим узлом Y.Text, представляющим содержимое файла. Каждое нажатие клавиши кодируется как компактное двоичное обновление Yjs, сериализуется в Base64 и транслируется через WebSocket комнату. Все подключенные коллеги применяют обновление к своей собственной реплике; благодаря гарантии CRDT все реплики сходятся к одному тексту независимо от порядка поступления обновлений.

Позиции курсора и выделения передаются через легкий слой Awareness, который маршрутизирует данные позиции через ту же WebSocket комнату. Полное состояние документа дебаунсируется и записывается в постоянное хранилище комнаты каждую секунду, поэтому пользователи, присоединившиеся после начала сеанса, сразу же получают текущий документ.

Объяснение параметров

  • Раскрывающееся меню языков — Выбирает язык подсветки синтаксиса для редактора. Выбор транслируется всем членам комнаты, поэтому все видят согласованную подсветку. Раскрывающееся меню отключено до подключения к комнате.
  • Open File — Открывает локальный выбор файлов и загружает содержимое текста выбранного файла в общий документ Yjs, заменяя текущее содержимое для всех в комнате.
  • Save File — Загружает текущее содержимое редактора как файл. Расширение файла автоматически выбирается на основе выбранного языка.
  • Тема — Редактор следует вашему системному предпочтению темной/светлой темы (сохраняется в localStorage). Переключите тему вашей ОС или браузера, чтобы переключаться между темной и светлой темами редактора в стиле VS Code.

Ограничения

  • Для синхронизации требуется активное соединение WebSocket с сервером ретрансляции; если соединение разорвется, правки, сделанные в автономном режиме, автоматически пересинхронизируются при переподключении.
  • Нет постоянной истории версий — когда сеанс заканчивается и комната закрывается, документ исчезает, если вы не сохранили его локально с помощью кнопки Save File.
  • Двоичные файлы (изображения, скомпилированные двоичные файлы и т. д.) не могут быть загружены; редактор работает только с простыми текстовыми исходными файлами.
  • Этот инструмент находится в бета-версии; стабильность комнаты и максимальное количество одновременных пользователей могут быть ограничены.

Советы

  • Поделитесь полным URL комнаты из адресной строки вашего браузера, чтобы пригласить сотрудников — ID комнаты закодирован в URL.
  • Сохраните локальную копию с помощью Save File в конце сеанса; данные комнаты не гарантируются для сохранения бесконечно долго.
  • Если ярлык курсора сотрудника закрывает важный код, ярлык автоматически переворачивается влево при приближении к правому краю редактора.