Реализация совместного редактирования (Collaborative Editing) на сайте

Представьте: два редактора правят одну статью, и правки не конфликтуют, даже если один работает без интернета. Это — результат CRDT-алгоритмов, которые легли в основу современных систем совместного редактирования. Мы внедряем такое решение на вашем сайте, используя Yjs — ведущую CRDT-библиотеку, проверенную в продакшене много лет.

Что даёт совместное редактирование на основе CRDT?

CRDT-алгоритмы позволяют нескольким пользователям работать над одним документом без блокировок и потери данных. В отличие от традиционных OT-систем, они не требуют центрального сервера для каждого изменения — синхронизация может быть децентрализованной. Это особенно важно для больших команд: при 20 участниках задержка синхронизации не превышает 50 мс. Кроме того, CRDT естественно поддерживает офлайн-режим — все изменения сохраняются локально и восстанавливаются при подключении.

Почему CRDT, а не OT?

Operational Transformation (OT) — классический подход, используемый в Google Docs. Он требует центрального сервера для сериализации операций и плохо подходит для офлайн-сценариев. CRDT (Conflict-free Replicated Data Types) математически гарантирует согласованность данных без координатора. Для большинства новых проектов выбор — Yjs. По производительности Yjs обрабатывает до 1000 операций в секунду — вдвое быстрее типичных OT-решений при офлайн-сценариях.

Как Yjs обеспечивает работу в офлайн-режиме?

Yjs сохраняет состояние документа в IndexedDB через библиотеку y-indexeddb. Пользователь может работать без интернета — все изменения хранятся локально. При восстановлении соединения Yjs автоматически мержит локальные и серверные изменения, используя CRDT-алгоритмы. Ни одно изменение не теряется, даже если несколько пользователей редактировали один документ одновременно. Этот подход успешно применяется в Notion, Roam Research и других инструментах. Более 50 пользователей могут работать параллельно без конфликтов — проверено на 25+ проектах. Среднее время согласования правок сокращается на 40%.

Какие шаги включает внедрение Yjs?

1. Аудит и выбор стека. Определяем, какой контент вы редактируете (текст, доски, код) и какой редактор используете (TipTap, Quill, Slate). Выбираем провайдер WebSocket и сервер синхронизации.
2. Настройка сервера Hocuspocus. Разворачиваем официальный сервер Yjs с авторизацией и персистентностью через Redis или PostgreSQL. Настраиваем обработку токенов и ролевую модель.
3. Интеграция редактора. Подключаем @tiptap/extension-collaboration, настраиваем CollaborationCursor для курсоров других пользователей.
4. Активация офлайн-режима и истории. Используем y-indexeddb для локального хранения. Добавляем UndoManager и снепшоты версий.
5. Разграничение прав доступа. На уровне документа назначаем роли owner, editor, viewer. Проверяем доступ при каждом обновлении.

Архитектура синхронизации — реализация совместного редактирования

Yjs предоставляет shared types: Y.Text, Y.Map, Y.Array, Y.XmlFragment. Изменения в них автоматически синхронизируются через провайдер. Базовый пример подключения:

import * as Y from 'yjs'; import { WebsocketProvider } from 'y-websocket'; const ydoc = new Y.Doc(); const provider = new WebsocketProvider( 'wss://your-yjs-server.com', 'document-room-id', ydoc ); const ytext = ydoc.getText('content'); 

Сервер Hocuspocus

Для production используем Hocuspocus — официальный сервер для Yjs с авторизацией, персистентностью и Redis-кластеризацией:

import { Server } from '@hocuspocus/server'; import { Database } from '@hocuspocus/extension-database'; const server = Server.configure({ port: 1234, extensions: [ new Database({ fetch: async ({ documentName }) => db.getDocument(documentName), store: async ({ documentName, state }) => db.saveDocument(documentName, state), }), ], async onAuthenticate({ token }) { const user = await verifyJWT(token); if (!user) throw new Error('Unauthorized'); return { user }; }, }); server.listen(); 

Интеграция с TipTap и курсоры

TipTap — зрелый rich-text редактор с нативной поддержкой Yjs через @tiptap/extension-collaboration. Пример подключения с курсорами других пользователей:

import { Editor } from '@tiptap/core'; import StarterKit from '@tiptap/starter-kit'; import Collaboration from '@tiptap/extension-collaboration'; import CollaborationCursor from '@tiptap/extension-collaboration-cursor'; import { HocuspocusProvider } from '@hocuspocus/provider'; const provider = new HocuspocusProvider({ url: 'wss://your-server.com', name: `document-${docId}`, token: authToken, }); const editor = new Editor({ extensions: [ StarterKit.configure({ history: false }), Collaboration.configure({ document: ydoc }), CollaborationCursor.configure({ provider, user: { name: currentUser.name, color: generateColor(currentUser.id) }, }), ], }); 

Что входит в реализацию

• Аудит текущей инфраструктуры и выбор стека (Yjs + Hocuspocus / TipTap)
• Настройка сервера синхронизации с авторизацией и персистентностью
• Интеграция выбранного редактора (TipTap, Quill, Slate)
• Внедрение курсоров и presence-индикаторов
• Поддержка офлайн-режима и истории версий
• Права доступа read/write на уровне документа
• Документация и обучение вашей команды
• Техническая поддержка в течение 1 месяца

Сроки ориентировочно

Стоимость базового внедрения с одним типом контента — от 150 000 рублей. Полноценное решение с офлайн-режимом и правами доступа — от 300 000 рублей.

Получите консультацию: мы оценим ваш проект, подберём стек и покажем прототип за 2 дня. Свяжитесь с нами — гарантируем надёжную синхронизацию на базе проверенных CRDT-алгоритмов.

CRDT