Upload folder using huggingface_hub

public/scripts/LiveSync.js

@@ -280,16 +280,31 @@ export class LiveSyncClient {
      */
     _sendYjsUpdate() {
         if (!this._yjsSocket || !this._yjsConnected) {
-            console.warn('[Yjs] Cannot send update - not connected');
             return;
         }
 
         const img = this.app.state.images[this.app.state.idx];
         if (!img) {
-            console.warn('[Yjs] Cannot send update - no image for current page');
             return;
         }
 
+        // THROTTLE: Don't send more than once every 50ms while drawing
+        const now = Date.now();
+        if (this.app.isDragging) {
+            if (this._lastYjsUpdateTime && now - this._lastYjsUpdateTime < 50) {
+                // Schedule a delayed update to ensure final state is sent
+                if (!this._yjsUpdatePending) {
+                    this._yjsUpdatePending = true;
+                    setTimeout(() => {
+                        this._yjsUpdatePending = false;
+                        this._sendYjsUpdate();
+                    }, 60);
+                }
+                return;
+            }
+        }
+        this._lastYjsUpdateTime = now;
+
         // IMPORTANT: Send ALL items including deleted ones
         // Deleted items have { deleted: true, lastMod: timestamp }
         // This allows other clients to receive deletion info via CRDT merge
@@ -297,7 +312,7 @@ export class LiveSyncClient {
             type: 'state-update',
             pageIdx: this.app.state.idx,
             history: img.history || [],
-            timestamp: Date.now(),
+            timestamp: now,
             metadata: {
                 name: this.app.state.projectName,
                 idx: this.app.state.idx,
@@ -306,7 +321,6 @@ export class LiveSyncClient {
         };
 
         this._yjsSocket.send(JSON.stringify(msg));
-        console.log(`[Yjs] Sent state update for page ${this.app.state.idx}: ${msg.history.length} strokes`);
     }
 
     /**
@@ -316,8 +330,7 @@ export class LiveSyncClient {
         if (this.isInitializing) return;
 
         if (msg.type === 'state-update') {
-            // Apply remote state with CRDT-based merging
-            console.log(`[Yjs] Received state-update for page ${msg.pageIdx}: ${msg.history?.length || 0} strokes`);
+            // Apply remote state with CRDT-based merging (no logging for performance)
 
             // Sync project name from metadata (like Liveblocks does)
             if (msg.metadata && msg.metadata.name) {
@@ -332,7 +345,6 @@ export class LiveSyncClient {
                 if (!(isOwner && remoteIsUntitled && localHasName)) {
                     // Accept remote name
                     if (localName !== remoteName) {
-                        console.log(`[Yjs] Name Sync: "${localName}" -> "${remoteName}"`);
                         this.app.state.projectName = remoteName;
                         const titleEl = this.app.getElement('headerTitle');
                         if (titleEl) titleEl.innerText = remoteName;

worker/YjsDurableObject.ts

@@ -2,26 +2,34 @@ import { DurableObject } from 'cloudflare:workers'
 import { AutoRouter, IRequest, error } from 'itty-router'
 
 /**
- * Simple WebSocket relay Durable Object for beta sync
- * Broadcasts all messages to all connected clients.
- * State management happens client-side.
+ * Optimized WebSocket Durable Object for Yjs-style sync
+ * Uses delta-based updates and throttled presence for performance.
  */
 
 interface Session {
     socket: WebSocket
     clientId: string
+    lastPresenceTime: number
 }
 
 interface PageState {
     history: any[]
     metadata?: any
+    lastUpdate: number
 }
 
+// Throttle presence updates to 50ms
+const PRESENCE_THROTTLE_MS = 50
+
 export class YjsDurableObject extends DurableObject {
     sessions: Session[] = []
     roomId: string | null = null
     // Store page states
     pageStates: Map<number, PageState> = new Map()
+    // Track last known history length per client per page (for delta detection)
+    clientPageVersions: Map<string, Map<number, number>> = new Map()
+    // Pending save timer
+    saveTimer: ReturnType<typeof setTimeout> | null = null
 
     constructor(ctx: DurableObjectState, env: Env) {
         super(ctx, env)
@@ -63,12 +71,15 @@ export class YjsDurableObject extends DurableObject {
         server.accept()
 
         const clientId = `client_${Date.now()}_${Math.random().toString(36).slice(2)}`
-        const session: Session = { socket: server, clientId }
+        const session: Session = { socket: server, clientId, lastPresenceTime: 0 }
         this.sessions.push(session)
 
-        console.log(`[Yjs DO] Client connected: ${clientId}, room: ${this.roomId}`)
+        // Initialize version tracking for this client
+        this.clientPageVersions.set(clientId, new Map())
+
+        console.log(`[Yjs DO] Client connected: ${clientId}, room: ${this.roomId}, total: ${this.sessions.length}`)
 
-        // Send current state to new client
+        // Send current state to new client (full sync on connect)
         if (this.pageStates.size > 0) {
             for (const [pageIdx, state] of this.pageStates) {
                 try {
@@ -76,8 +87,11 @@ export class YjsDurableObject extends DurableObject {
                         type: 'state-update',
                         pageIdx,
                         history: state.history,
-                        metadata: state.metadata
+                        metadata: state.metadata,
+                        timestamp: state.lastUpdate
                     }))
+                    // Mark this client as having this version
+                    this.clientPageVersions.get(clientId)?.set(pageIdx, state.history.length)
                 } catch (e) {
                     console.error('[Yjs DO] Error sending stored state:', e)
                 }
@@ -91,24 +105,50 @@ export class YjsDurableObject extends DurableObject {
                 if (typeof data === 'string') {
                     const msg = JSON.parse(data)
 
-                    // Handle state updates - store and broadcast
+                    // Handle state updates
                     if (msg.type === 'state-update' && msg.pageIdx !== undefined) {
-                        // Store the state
-                        this.pageStates.set(msg.pageIdx, {
-                            history: msg.history || [],
-                            metadata: msg.metadata
-                        })
-
-                        // Persist periodically
-                        if (this.pageStates.size % 5 === 0 || msg.history?.length % 10 === 0) {
-                            const toStore: Record<number, PageState> = {}
-                            this.pageStates.forEach((v, k) => { toStore[k] = v })
-                            await this.ctx.storage.put('pageStates', toStore)
+                        const pageIdx = msg.pageIdx
+                        const incomingHistory = msg.history || []
+                        const existingState = this.pageStates.get(pageIdx)
+                        const existingLen = existingState?.history?.length || 0
+
+                        // OPTIMIZATION: Only store if history actually changed
+                        if (incomingHistory.length !== existingLen || !existingState) {
+                            this.pageStates.set(pageIdx, {
+                                history: incomingHistory,
+                                metadata: msg.metadata,
+                                lastUpdate: Date.now()
+                            })
+
+                            // Debounced persist (save after 1 second of no updates)
+                            this.scheduleSave()
                         }
-                    }
 
-                    // Broadcast to all other clients
-                    this.broadcast(data, clientId)
+                        // Broadcast to other clients immediately
+                        this.broadcast(data, clientId)
+
+                        // Update sender's version tracking
+                        this.clientPageVersions.get(clientId)?.set(pageIdx, incomingHistory.length)
+                    }
+                    // Handle presence - with throttling
+                    else if (msg.type === 'presence') {
+                        const now = Date.now()
+                        if (now - session.lastPresenceTime >= PRESENCE_THROTTLE_MS) {
+                            session.lastPresenceTime = now
+                            // Broadcast presence immediately (it's small)
+                            this.broadcast(data, clientId)
+                        }
+                        // Else drop the presence update (throttled)
+                    }
+                    // Handle page structure
+                    else if (msg.type === 'page-structure') {
+                        // Broadcast immediately
+                        this.broadcast(data, clientId)
+                    }
+                    // Other messages - relay immediately
+                    else {
+                        this.broadcast(data, clientId)
+                    }
                 } else if (data instanceof ArrayBuffer || data instanceof Uint8Array) {
                     // Binary messages - just relay
                     this.broadcast(data, clientId)
@@ -120,23 +160,43 @@ export class YjsDurableObject extends DurableObject {
 
         server.addEventListener('close', () => {
             this.sessions = this.sessions.filter(s => s.clientId !== clientId)
-            console.log(`[Yjs DO] Client disconnected: ${clientId}`)
+            this.clientPageVersions.delete(clientId)
+            console.log(`[Yjs DO] Client disconnected: ${clientId}, remaining: ${this.sessions.length}`)
         })
 
         server.addEventListener('error', (e) => {
             console.error('[Yjs DO] WebSocket error:', e)
             this.sessions = this.sessions.filter(s => s.clientId !== clientId)
+            this.clientPageVersions.delete(clientId)
         })
 
         return new Response(null, { status: 101, webSocket: client })
     }
 
+    scheduleSave() {
+        if (this.saveTimer) {
+            clearTimeout(this.saveTimer)
+        }
+        this.saveTimer = setTimeout(async () => {
+            try {
+                const toStore: Record<number, PageState> = {}
+                this.pageStates.forEach((v, k) => { toStore[k] = v })
+                await this.ctx.storage.put('pageStates', toStore)
+                console.log(`[Yjs DO] Persisted ${this.pageStates.size} pages to storage`)
+            } catch (e) {
+                console.error('[Yjs DO] Save error:', e)
+            }
+        }, 1000) // Save 1 second after last update
+    }
+
     broadcast(data: string | ArrayBuffer | Uint8Array, excludeClientId?: string) {
+        let sent = 0
         for (const session of this.sessions) {
             if (session.clientId === excludeClientId) continue
             try {
                 if (session.socket.readyState === WebSocket.OPEN) {
                     session.socket.send(data)
+                    sent++
                 }
             } catch (e) {
                 console.error('[Yjs DO] Broadcast error:', e)