Liveblocks לאפליקציות מובייל: שיתוף פעולה בזמן אמת

שני משתמשים עורכים בו-זמנית רשימת משימות: אחד באייפון, השני באנדרואיד. הנתונים מתפצלים במהירות, קונפליקטים מצטברים, והמצב הסופי אינו צפוי. REST API אינו מספק זמן אמת, ובניית שרת WebSocket מותאם אישית עם CRDT אורכת חודשים של פיתוח וניפוי באגים. אובדן נתונים עקב קונפליקטים יכול להגיע ל-15% מכלל השינויים.

אנו משלבים את Liveblocks—תשתית מנוהלת לעריכה שיתופית. היא מספקת שרת WebSocket מוכן, אחסון CRDT (המבוסס על Liveblocks Storage), נוכחות, תגובות והתראות דרך API בענן. בדפדפן, האינטגרציה אורכת יום; באפליקציית React Native לנייד, משבוע. זה מאיץ את זמן היציאה לשוק פי 3–6 בהשוואה לבנייה מאפס. החיסכון בעלויות התשתית יכול להיות משמעותי.

מה Liveblocks מספקת ישירות מהקופסה?

• Storage — אחסון CRDT המבוסס על יישום עצמי עם LiveObject, LiveList, LiveMap. שינויים משתכפלים בין לקוחות ב-<100 אלפיות השנייה בתוך אותו אזור.
• Presence — מצב משתמש זמני: מיקום סמן, בחירה, סטטוס. לא נשמר, רק באונליין.
• אינטגרציית Yjs — דרך @liveblocks/yjs ניתן להשתמש במסמכי Yjs עם עורכי אינטרנט (Tiptap, Slate).

לפי ויקיפדיה, CRDT מבטיח עקביות במערכות מבוזרות.

איך מחברים את Liveblocks ב-React Native?

1. התקנת חבילות: LiveObject
2. יצירת לקוח עם LiveList והגדרת אימות.
3. הגדרת סוגי Presence ו-Storage עבור האפליקציה שלך.
4. ייצוא hooks דרך LiveMap.
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 עוטף את מסך העורך. בפנים, @liveblocks/yjs נותן snapshot בלתי ניתן לשינוי, npm install @liveblocks/client @liveblocks/react — מוטציות טרנזקציונליות.

בעיה ב-RN: createClient משתמש ב-createRoomContext וב-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); (SSE להתראות) חסר ללא polyfill. התקן RoomProvider ו-polyfill גלובלי:

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

קבל ייעוץ על הגדרת לקוח ו-polyfills—זה חוסך לך עד 40% מזמן האינטגרציה.

מה זה Presence בהקשר נייד?

בדפדפן, presence פירושו קואורדינטות עכבר. באפליקציה ניידת, מקרי שימוש אחרים:

• עריכה שיתופית של רשימת משימות: presence = useStorage — הדגשת הפריט הנערך.
• לוח שיתופי: presence = useMutation — הצגת העט.
• עורך מסמכים: presence = @liveblocks/client — בחירת טקסט.

השתמש ב-fetch וב-WebSocket לנתוני presence ריאקטיביים. לאופטימיזציה, EventSource בוחר רק שדות נחוצים.

למה לבחור ב-Liveblocks לאפליקציה ניידת?

ההשוואה מראה: Liveblocks מנצחת במהירות האינטגרציה אך נופלת במצב אופליין ובשליטה על נתונים. עבור רוב ה-MVPs והפרויקטים הבינוניים, זה מספיק.

מצב אופליין: מה לא כלול ישירות מהקופסה

Liveblocks אינה מספקת שמירה אופליין. כאשר אין רשת, שינויים אובדים. אנו פותרים זאת עם buffer מוטציות ב-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 />; }