Уявіть: 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 + Hocuspocus | Liveblocks |
|---|---|---|
| Інфраструктура | Свій сервер (веб-сокети) | Managed, без інфраструктури |
| Вартість | Безкоштовно, тільки хостинг | Плата за активних користувачів |
| Гнучкість | Повний контроль | Обмежена провайдером |
| Складність | Середня | Низька |
| Персистентність | Будь-яка БД (PostgreSQL, MongoDB) | Liveblocks Storage |
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>
);
}
Технічні деталі реалізації на Yjs
Для зниження навантаження на мережу використовуємо інкрементальне оновлення стану через encodeStateAsUpdate. При відключенні клієнта буфер змін не втрачається — при перепідключенні вони передаються пачкою. Стиснення даних — стандартна GZip-компресія, що зменшує трафік на 60%.
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} />;
}
Процес роботи
- Аналітика — обговорюємо сценарії використання, навантаження, вимоги до персистентності.
- Проєктування — обираємо стек (Yjs/Liveblocks), проєктуємо модель даних, прописуємо права доступу.
- Реалізація — налаштовуємо сервер, інтегруємо редактор, реалізуємо курсори, аватари, автозбереження.
- Тестування — навантажувальні тести з емуляцією 100+ одночасних користувачів.
- Деплой — розгортаємо на вашому хостингу (Docker, Vercel, Cloudflare). Передаємо документацію та доступи.
- Підтримка — гарантія 3 місяці на виявлені баги, можливість продовження.
Що входить у результат
- Функціональний редактор зі спільним редагуванням, курсорами та аватарами.
- Бекенд з персистентністю у вашій базі даних.
- Документація по API та доопрацюванню інтерфейсу.
- Навчання команди роботі з Yjs.
Орієнтовні терміни
| Варіант | Терміни |
|---|---|
| Liveblocks інтеграція (без сервера) | від 1 тижня |
| Yjs + Hocuspocus з нуля | від 3 тижнів |
Часті помилки при впровадженні
- Ігнорування синхронізації станів при відключенні клієнта (використовуємо
awarenessз таймаутами). - Неправильне завантаження старих документів (використовуємо інкрементальні оновлення через
encodeStateAsUpdate). - Обмеження на розмір документа — Yjs handle до 100 МБ без проблем, але краще зберігати в блоб.
Отримайте консультацію нашої команди — оцінимо ваш сценарій і запропонуємо оптимальне рішення. Зв'яжіться з нами, щоб замовити впровадження real-time спільного редагування вже сьогодні.