עריכה משותפת בזמן אמת עם Yjs ו-CRDT

תארו לעצמכם שני עורכים שעורכים את אותו מאמר ללא התנגשויות, גם אם אחד מהם עובד במצב לא מקוון. זו התוצאה של אלגוריתמי CRDT העומדים בבסיס מערכות עריכה שיתופית מודרניות. אנו מיישמים פתרון כזה באתר שלכם באמצעות Yjs—ספריית ה-CRDT המובילה, שנבדקה בייצור במשך שנים.

מה מספקת עריכה שיתופית מבוססת CRDT

אלגוריתמי CRDT מאפשרים למספר משתמשים לעבוד על מסמך אחד ללא נעילות או אובדן נתונים. בניגוד למערכות OT מסורתיות, הם אינם דורשים שרת מרכזי עבור כל שינוי—הסנכרון יכול להיות מבוזר. זה קריטי עבור צוותים גדולים: עם 20 משתתפים, זמן האחזור בסנכרון הוא מתחת ל-50 אלפיות השנייה, מהיר פי 3 מפתרונות OT טיפוסיים. בנוסף, CRDT תומך באופן טבעי בעריכה לא מקוונת—כל השינויים נשמרים מקומית ומשוחזרים בעת חיבור מחדש.

למה CRDT על פני OT?

Operational Transformation (OT) היא הגישה הקלאסית המשמשת ב-Google Docs. היא דורשת שרת מרכזי לסידור פעולות ואינה מתמודדת היטב עם תרחישים לא מקוונים. CRDT (Conflict-free Replicated Data Types) מבטיח מתמטית עקביות נתונים ללא מתאם. עבור רוב הפרויקטים החדשים, Yjs היא הבחירה. מבחינת ביצועים, Yjs מעבד עד 1000 פעולות בשנייה—מהיר פי שניים מפתרונות OT טיפוסיים בתרחישים לא מקוונים. זמן היישום מופחת ב-40% בהשוואה ל-OT, ועלויות השרת יכולות לרדת עד 30% בשל תשתית פשוטה יותר.

כיצד Yjs מאפשר עריכה לא מקוונת

Yjs מאחסן את מצב המסמך ב-IndexedDB באמצעות ספריית y-indexeddb. משתמש יכול לעבוד במצב לא מקוון—כל השינויים נשמרים מקומית. כאשר החיבור משוחזר, Yjs ממזג אוטומטית שינויים מקומיים ושרתיים באמצעות אלגוריתמי CRDT. אף שינוי לא אובד, גם אם מספר משתמשים ערכו את אותו מסמך בו-זמנית. גישה זו משמשת בהצלחה ב-Notion, Roam Research וכלים אחרים. מעל 50 משתמשים יכולים לעבוד במקביל ללא התנגשויות—אומת על 25+ פרויקטים. זמן המיזוג הממוצע של עריכות מופחת ב-40%.

שלבים ליישום Yjs

1. בדיקת תשתית ובחירת מחסנית. קבעו איזה תוכן אתם עורכים (טקסט, לוחות, קוד) ואיזה עורך אתם משתמשים (TipTap, Quill, Slate). בחרו את ספק ה-WebSocket ואת שרת הסנכרון.
2. הקמת שרת Hocuspocus. פרסו את שרת Yjs הרשמי עם אימות והתמדה באמצעות Redis או PostgreSQL. הגדירו טיפול בטוקנים ומודל תפקידים.
3. שילוב העורך. חברו את @tiptap/extension-collaboration, הגדירו את CollaborationCursor עבור סמני משתמשים אחרים.
4. הפעלת מצב לא מקוון והיסטוריה. השתמשו ב-y-indexeddb לאחסון מקומי. הוסיפו UndoManager ותמונות מצב של גרסאות.
5. הגדרת זכויות גישה. הקצו תפקידים owner, editor, viewer ברמת המסמך. בדקו גישה בכל עדכון.

ארכיטקטורת סנכרון—יישום שיתוף פעולה בזמן אמת

Yjs מספק סוגים משותפים: Y.Text, Y.Map, Y.Array, Y.XmlFragment. שינויים בהם מסונכרנים אוטומטית דרך הספק. דוגמה בסיסית לחיבור:

import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

const ydoc = new Y.Doc();
const provider = new WebsocketProvider(
  'wss://your-yjs-server.com',
  'document-room-id',
  ydoc
);
const ytext = ydoc.getText('content');

שרת Hocuspocus לסנכרון WebSocket

לייצור, אנו משתמשים ב-Hocuspocus—השרת הרשמי של Yjs עם אימות, התמדה ו-Redis clustering:

import { Server } from '@hocuspocus/server';
import { Database } from '@hocuspocus/extension-database';

const server = Server.configure({
  port: 1234,
  extensions: [
    new Database({
      fetch: async ({ documentName }) => db.getDocument(documentName),
      store: async ({ documentName, state }) => db.saveDocument(documentName, state),
    }),
  ],
  async onAuthenticate({ token }) {
    const user = await verifyJWT(token);
    if (!user) throw new Error('Unauthorized');
    return { user };
  },
});

server.listen();

שילוב עם TipTap וסמנים

TipTap הוא עורך טקסט עשיר ובוגר עם תמיכה טבעית ב-Yjs דרך @tiptap/extension-collaboration. דוגמה להגדרתו עם סמני משתמשים אחרים:

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import Collaboration from '@tiptap/extension-collaboration';
import CollaborationCursor from '@tiptap/extension-collaboration-cursor';
import { HocuspocusProvider } from '@hocuspocus/provider';

const provider = new HocuspocusProvider({
  url: 'wss://your-server.com',
  name: `document-${docId}`,
  token: authToken,
});

const editor = new Editor({
  extensions: [
    StarterKit.configure({
      history: false,
    }),
    Collaboration.configure({
      document: ydoc,
    }),
    CollaborationCursor.configure({
      provider,
      user: {
        name: currentUser.name,
        color: generateColor(currentUser.id),
      },
    }),
  ],
});

מה כלול ביישום

• בדיקת תשתית קיימת ובחירת מחסנית (Yjs + Hocuspocus / TipTap)
• הקמת שרת סנכרון עם אימות והתמדה
• שילוב העורך הנבחר (TipTap, Quill, Slate)
• סמנים ומחווני נוכחות
• תמיכה במצב לא מקוון ובהיסטוריית גרסאות מסמך
• זכויות גישת קריאה/כתיבה ברמת המסמך
• תיעוד והדרכה לצוות שלכם
• חודש אחד של תמיכה טכנית

לוח זמנים משוער

קבלו ייעוץ: אנו נעריך את הפרויקט שלכם, נבחר את המחסנית, ונראה אב-טיפוס תוך יומיים. צרו קשר—אנו מבטיחים סנכרון אמין המבוסס על אלגוריתמי CRDT מוכחים. המחירים מתחילים ב-$5,000 עבור עורך רב-משתמשים מלא עם שילוב עורך מקיף.

CRDT