Реалтайм-колаборація: Yjs та CRDT у мобільному застосунку

import * as Y from 'yjs';
import { openDatabase } from 'react-native-sqlite-storage';

const db = openDatabase({ name: 'collab.db' });

db.transaction(tx => {
  tx.executeSql(
    'CREATE TABLE IF NOT EXISTS ydocs (id TEXT PRIMARY KEY, update BLOB, ts INTEGER)'
  );
});

yDoc.on('updateV2', (update: Uint8Array, origin: unknown) => {
  if (origin === 'sqlite-load') return;
  const encoded = Buffer.from(update).toString('base64');
  db.transaction(tx => {
    tx.executeSql(
      'INSERT OR REPLACE INTO ydocs (id, update, ts) VALUES (?, ?, ?)',
      [docId, encoded, Date.now()]
    );
  });
});

db.transaction(tx => {
  tx.executeSql('SELECT update FROM ydocs WHERE id = ?', [docId], (_, result) => {
    if (result.rows.length > 0) {
      const raw = Buffer.from(result.rows.item(0).update, 'base64');
      Y.applyUpdateV2(yDoc, new Uint8Array(raw), 'sqlite-load');
    }
  });
});

При частому редагуванні updateV2 тригериться при кожному символі. Батчинг обов'язковий — debounce на 300–500 мс або накопичення через Y.mergeUpdatesV2. Кастомний SQLite-провайдер з батчингом зменшує навантаження на диск до 70% порівняно з наївною реалізацією. Замовте інтеграцію та отримайте готовий провайдер з батчингом.

Awareness і фоновий режим

Awareness (курсори, онлайн-статус) через y-protocols/awareness вимагає активного WebSocket. При переході застосунку в фон на iOS WebSocket може бути вбитий через 30–60 секунд. Викликайте awareness.setLocalState(null) в обробнику AppState.change → background, інакше користувач буде висіти у списку онлайн.

ClientID і реконект

clientID Y.js генерується випадково при створенні Y.Doc. Якщо перестворювати Y.Doc при кожному маунті, стейт-вектор сервера накопичує мертві записи. Фікс: зберігайте ydoc у ref або глобальному стейті, не перестворюйте.

Порівняння y-websocket і Hocuspocus

Порівняємо основні варіанти серверної частини:

Hocuspocus скорочує час налаштування серверної частини в 2 рази порівняно з ручною реалізацією y-websocket. Для більшості проектів він закриває 90% потреб без написання custom-сервера.

Персистентність в офлайн-режимі: стек рішень

Ми використовуємо комбінацію кастомного SQLite-провайдера з батчингом та серверної персистентності через Hocuspocus. Клієнтська база даних зберігає останні 200 операцій, а при відновленні з'єднання застосовується диференціальний протокол Y.js — передається тільки дельта. Це скорочує трафік до 70% та економить розробнико-години.

Flutter: Y.js через JS runtime

Для Flutter нативного порту Y.js немає. Варіанти:

• flutter_js — запускає V8/QuickJS, важить ~5 МБ. Y.js працює, але продуктивність на великих документах бажає кращого.
• Нативний Dart CRDT: crdt пакет від Cachapa — реалізує LWW-CRDT, не сумісний з Y.js за протоколом.
• Rust FFI через yrs (Rust-реалізація Y.js) + flutter_rust_bridge — найбільш продуктивний шлях, але 4–6 тижнів тільки на біндінги.

Що входить в роботу

При замовленні послуги ви отримуєте:

• Повний аудит поточної архітектури на предмет сумісності з Y.js
• Кастомний SQLite-провайдер або адаптацію Hocuspocus
• Налаштування awareness з коректною обробкою фонового режиму
• Конфігурація батчингу та mergeUpdatesV2 для зниження навантаження на диск
• Серверна частина (Hocuspocus або custom y-websocket з аутентифікацією)
• Документація з інтеграції та код-рев'ю ваших інженерів
• Доступ до сервера та репозиторію
• Навчання команди (2 дні)
• 2 тижні технічної підтримки після релізу

Терміни та вартість

React Native + Y.js + кастомний SQLite-провайдер + Hocuspocus бекенд: 6–10 тижнів. Flutter через yrs FFI: 10–16 тижнів. Вартість базової інтеграції React Native стартує від $10 000, для Flutter — від $18 000. Витрати на впровадження окупаються за 6–12 місяців за рахунок скорочення часу виходу на ринок.

Отримайте консультацію та попередню оцінку проекту. Наші інженери допоможуть уникнути типових помилок Yjs. Yjs documentation