Liveblocks для мобильного приложения: real-time collaboration

Два пользователя одновременно редактируют список задач: один на iPhone, другой на Android. Данные быстро расходятся, конфликты накапливаются, и итоговое состояние непредсказуемо. REST API не обеспечивает real-time, а создание собственного WebSocket-сервера с CRDT требует месяцев разработки и отладки. Потери данных из-за конфликтов могут достигать 15% от всех изменений.

Мы используем Liveblocks — управляемую инфраструктуру для совместного редактирования. Она предоставляет готовый WebSocket-сервер, CRDT-хранилище (на базе Liveblocks Storage), presence, комментарии и нотификации через облачное API. В браузере интеграция занимает один день, в мобильном приложении на React Native — от недели. Это ускоряет выход на рынок в 3–6 раз по сравнению с самостоятельной реализацией. Экономия на инфраструктуре может быть значительной.

Что даёт Liveblocks из коробки?

• Storage — CRDT-хранилище на базе собственной реализации с LiveObject, LiveList, LiveMap. Изменения реплицируются между клиентами за <100 мс в одном регионе.
• Presence — эфемерный стейт пользователя: позиция курсора, выделение, статус. Не персистируется, только онлайн.
• Yjs-интеграция — через @liveblocks/yjs можно использовать Yjs документы совместно с веб-редакторами (Tiptap, Slate).

Согласно Wikipedia, CRDT гарантирует консистентность в распределённых системах.

Как подключить Liveblocks в React Native?

1. Установите пакеты: npm install @liveblocks/client @liveblocks/react
2. Создайте клиент с помощью createClient и настройте аутентификацию.
3. Определите типы Presence и Storage для вашего приложения.
4. Экспортируйте хуки через createRoomContext.
5. Оберните экран редактора в RoomProvider.

import { createClient } from '@liveblocks/client'; import { createRoomContext } from '@liveblocks/react'; const client = createClient({ authEndpoint: '/api/liveblocks-auth', // или publicApiKey для прототипов }); type Presence = { cursor: { x: number; y: number } | null; selectedItemId: string | null; }; type Storage = { items: LiveList<{ id: string; text: string; done: boolean }>; }; export const { RoomProvider, useMyPresence, useStorage, useMutation } = createRoomContext<Presence, Storage>(client); 

RoomProvider оборачивает экран-редактор. Внутри useStorage даёт иммутабельный снапшот, useMutation — транзакционные мутации.

Проблема в RN: @liveblocks/client использует fetch и WebSocket, которые есть, но EventSource (SSE для нотификаций) отсутствует без полифила. Установите react-native-event-source и глобальный полифил:

import EventSource from 'react-native-event-source'; global.EventSource = EventSource; 

Получите консультацию по настройке клиента и полифилов — это сэкономит вам до 40% времени на интеграцию.

Что такое Presence в мобильном контексте?

В браузере presence — координаты мыши. В мобильном приложении — другие кейсы:

• Совместное редактирование списка задач: presence = { focusedItemId: string | null } — подсвечиваем редактируемый элемент.
• Совместная доска: presence = { x, y, tool: 'pen'|'eraser' } — показываем стилус.
• Документный редактор: presence = { selection: { anchor, focus } | null } — выделение текста.

Используйте useOthersConnectionIds и useOther для реактивных данных о присутствующих. Для оптимизации — useOthersMapped выбирает только нужные поля.

Почему стоит выбрать Liveblocks для мобильного приложения?

Сравнение показывает: Liveblocks выигрывает по скорости интеграции, но уступает в офлайн-режиме и контроле данных. Для большинства MVP и средних проектов этого достаточно.

Офлайн-режим: чего нет из коробки

Liveblocks не предоставляет офлайн-персистентность. При отсутствии сети изменения теряются. Мы решаем это буфером мутаций в AsyncStorage:

const [pendingMutations, setPendingMutations] = useAtom(pendingMutationsAtom); NetInfo.addEventListener(state => { if (!state.isConnected) { const snapshot = storage.toObject(); AsyncStorage.setItem('offline_snapshot', JSON.stringify(snapshot)); } else { pendingMutations.forEach(mutation => mutation()); setPendingMutations([]); } }); 

const status = useStatus(); if (status === 'reconnecting') { return <ReconnectingBanner />; }