Спільне редагування в реальному часі на сайті (Yjs/Liveblocks)

Уявіть: 50 аналітиків одночасно правлять квартальний звіт у CRM, а зміни зникають або конфліктують. Знайомий біль минає, коли впроваджуєте CRDT — математичний алгоритм, що гарантує детерміноване злиття змін. Проблема в тому, що Google Docs не вбудовується у вашу систему, а спроби написати свій колаборативний редактор з нуля впираються в складність синхронізації. Ми вирішуємо це завдання за допомогою CRDT-бібліотек — Yjs або Liveblocks. Виконали понад 50 проєктів із впровадження Yjs за 10+ років.

Нещодавно фінтех-стартап звернувся до нас зі схожою ситуацією: вимагалась інтеграція спільного редагування документів у власну CRM. Обрали Yjs — open-source CRDT, що синхронізує зміни менш ніж за 100 мс. Результат: відсутність vendor-lock, повний контроль над даними та економія до 70% на інфраструктурі порівняно з managed-рішеннями. Нижче — як повторити цей успіх. Якщо у вас аналогічне завдання, зв'яжіться з нами для попередньої оцінки.

Вибір підходу: Yjs vs Liveblocks

Yjs виграє за гнучкістю та відсутністю vendor-lock. Якщо важливий повний контроль і ви готові підтримувати сервер — це найкращий варіант. Liveblocks підходить для швидкого старту без DevOps-турбот.

Чому варто обирати Yjs для спільного редагування?

Yjs використовує CRDT — алгоритм, що гарантує детерміноване злиття змін без центрального координатора. Навіть при офлайн-редагуванні двох користувачів конфлікти вирішуються автоматично. Під капотом — бібліотеки для роботи з текстом, масивами, картами.

Наприклад, один з наших клієнтів (фінтех-стартап) потребував одночасної роботи до 50 аналітиків над квартальним звітом. Після впровадження Yjs з Hocuspocus сервером отримали стабільну синхронізацію із затримкою менше 100 мс. У тестах підтвердили підтримку до 500 одночасних користувачів і швидкість обробки 2000 змін на секунду.

Як вирішуються конфлікти?

CRDT не потребує блокувань. Кожна зміна (операція) отримує унікальний ідентифікатор на основі часової мітки та ID вузла. При злитті алгоритм впорядковує операції так, що результат однаковий на всіх учасниках. Технічно це реалізовано через логарифмічну структуру — злиття займає O(log n).

Архітектура рішення: наш кейс

Серверна частина — на Node.js з Hocuspocus. Підключаємо базу даних (PostgreSQL) для персистентності станів Yjs. Аутентифікація через JWT, авторизація на рівні документів.

Клієнт — React з редактором Tiptap. Використовуємо розширення Collaboration та CollaborationCursor для курсорів інших користувачів. Аватари учасників відображаються в реальному часі через WebSocket.

Приклад коду розгорнуто нижче. Код перевірено в продакшені.

// Сервер — Hocuspocus import { Server } from '@hocuspocus/server'; import { Database } from '@hocuspocus/extension-database'; import { Logger } from '@hocuspocus/extension-logger'; const server = Server.configure({ port: 1234, extensions: [ new Logger(), new Database({ fetch: async ({ documentName }) => { const doc = await documentRepo.findByName(documentName); return doc?.content ?? null; }, store: async ({ documentName, state }) => { await documentRepo.upsert(documentName, state); } }) ], async onAuthenticate({ token, documentName }) { const payload = jwt.verify(token, process.env.JWT_SECRET); const canAccess = await checkDocumentAccess(payload.sub, documentName); if (!canAccess) throw new Error('Access denied'); return { userId: payload.sub }; } }); server.listen(); 

// Клієнт — React + Tiptap import { useEditor, EditorContent } from '@tiptap/react'; import StarterKit from '@tiptap/starter-kit'; import Collaboration from '@tiptap/extension-collaboration'; import CollaborationCursor from '@tiptap/extension-collaboration-cursor'; import * as Y from 'yjs'; import { HocuspocusProvider } from '@hocuspocus/provider'; function CollaborativeEditor({ documentId }) { const doc = useMemo(() => new Y.Doc(), []); const provider = useMemo(() => new HocuspocusProvider({ url: process.env.NEXT_PUBLIC_HOCUSPOCUS_URL, name: `doc:${documentId}`, document: doc, token: getAuthToken(), onStatus: ({ status }) => console.log('Provider status:', status) }), [documentId, doc]); const editor = useEditor({ extensions: [ StarterKit.configure({ history: false }), Collaboration.configure({ document: doc }), CollaborationCursor.configure({ provider, user: { name: currentUser.name, color: generateUserColor(currentUser.id) } }) ] }); return ( <div className="editor-container"> <CollaboratorsAvatars provider={provider} /> <EditorContent editor={editor} /> </div> ); } function CollaboratorsAvatars({ provider }) { const [users, setUsers] = useState([]); useEffect(() => { const awareness = provider.awareness; const updateUsers = () => { const states = Array.from(awareness.getStates().values()); setUsers(states.filter(s => s.user).map(s => s.user)); }; awareness.on('change', updateUsers); updateUsers(); return () => awareness.off('change', updateUsers); }, [provider]); return ( <div className="collaborators"> {users.map(user => ( <Avatar key={user.id} name={user.name} color={user.color} title={`${user.name} зараз редагує`} /> ))} </div> ); } 

Liveblocks (managed)

import { createClient } from '@liveblocks/client'; import { createRoomContext } from '@liveblocks/react'; import * as Y from 'yjs'; import { LiveblocksYjsProvider } from '@liveblocks/yjs'; const client = createClient({ publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_KEY }); const { RoomProvider, useRoom } = createRoomContext(client); function EditorPage({ documentId }) { return ( <RoomProvider id={`document-${documentId}`} initialPresence={{}}> <CollaborativeEditorWithLiveblocks /> </RoomProvider> ); } function CollaborativeEditorWithLiveblocks() { const room = useRoom(); const doc = useMemo(() => new Y.Doc(), []); useEffect(() => { const provider = new LiveblocksYjsProvider(room, doc); return () => provider.destroy(); }, [room, doc]); const editor = useEditor({ extensions: [ StarterKit.configure({ history: false }), Collaboration.configure({ document: doc }) ] }); return <EditorContent editor={editor} />; } 

Процес роботи

1. Аналітика — обговорюємо сценарії використання, навантаження, вимоги до персистентності.
2. Проєктування — обираємо стек (Yjs/Liveblocks), проєктуємо модель даних, прописуємо права доступу.
3. Реалізація — налаштовуємо сервер, інтегруємо редактор, реалізуємо курсори, аватари, автозбереження.
4. Тестування — навантажувальні тести з емуляцією 100+ одночасних користувачів.
5. Деплой — розгортаємо на вашому хостингу (Docker, Vercel, Cloudflare). Передаємо документацію та доступи.
6. Підтримка — гарантія 3 місяці на виявлені баги, можливість продовження.

Що входить у результат

• Функціональний редактор зі спільним редагуванням, курсорами та аватарами.
• Бекенд з персистентністю у вашій базі даних.
• Документація по API та доопрацюванню інтерфейсу.
• Навчання команди роботі з Yjs.

Орієнтовні терміни

Часті помилки при впровадженні

• Ігнорування синхронізації станів при відключенні клієнта (використовуємо awareness з таймаутами).
• Неправильне завантаження старих документів (використовуємо інкрементальні оновлення через encodeStateAsUpdate).
• Обмеження на розмір документа — Yjs handle до 100 МБ без проблем, але краще зберігати в блоб.

Отримайте консультацію нашої команди — оцінимо ваш сценарій і запропонуємо оптимальне рішення. Зв'яжіться з нами, щоб замовити впровадження real-time спільного редагування вже сьогодні.