playsocketjs 1.1.0 → 1.1.1

package/README.md

@@ -71,6 +71,7 @@ Creates a new PlaySocket instance with a specified ID and configuration options.
 #### Configuration options
 - `endpoint`: WebSocket server endpoint (e.g., 'wss://example.com/socket')
 - `customData`: You can pass arbitrary data to the "clientRegistered" server event (optional)
+- `debug`: Set this property to true to enable extra logging
 
 ### Methods
 
@@ -192,6 +193,7 @@ Creates a new PlaySocket Server instance with configuration options.
 - `port`: Port to listen on (default: 3000, used only if no server provided)
 - `path`: WebSocket endpoint path (default: '/')
 - `server`: Existing http server (optional)
+- `debug`: Set this property to true to enable extra logging
 
 ### Methods
 

package/dist/playsocket-client.js

@@ -1693,8 +1693,6 @@ function requireCrdtManager () {
 	    // Storage
 	    #replicaId;
 	    #keyOperations = new Map();
-
-	    // Vector clock
 	    #vectorClock = new Map();
 
 	    // Local only
@@ -1703,14 +1701,19 @@ function requireCrdtManager () {
 
 	    // Local Garbage Collection
 	    #lastGCCheck = 0;
-	    #opUuuidTimestamp = new Map(); // Map every operation to a timestamp for garbage collection
+	    #opUuidTimestamp = new Map(); // Map every operation to a timestamp for garbage collection
+
+	    // Debug
+	    #debug = false;
 
 	    /**
 	     * Create a new instance
-	     * @param {string} [replicaId] - Choose a uuid (falls back to random uuid)
+	     * @param {string} replicaId - Choose a uuid (falls back to random uuid)
 	     */
-	    constructor(replicaId) {
-	        this.#replicaId = replicaId || crypto.randomUUID();
+	    constructor(replicaId, debug) {
+	        if (!replicaId) return console.error("No replicaId provided!");
+	        if (debug) this.#debug = true;
+	        this.#replicaId = replicaId;
 	        this.#vectorClock.set(this.#replicaId, 0);
 	    }
 
@@ -1721,8 +1724,13 @@ function requireCrdtManager () {
 	    importState(state) {
 	        try {
 	            const { keyOperations, vectorClock } = state;
+	            if (this.#debug) console.log(CONSOLE_PREFIX + "Importing state:", state);
+
+	            // Resets
+	            this.#opUuidTimestamp.clear();
+	            this.#propertyStore = {};
+	            this.#lastPropertyStore = {};
 
-	            this.#opUuuidTimestamp.clear(); // Reset the uuid timestamps since it might contain uuid's that no longer exist in the new state
 	            this.#keyOperations = new Map(keyOperations); // Rebuild the map
 	            this.#vectorClock = new Map(vectorClock); // Also rebuild the map here
 	            if (!this.#vectorClock.has(this.#replicaId)) this.#vectorClock.set(this.#replicaId, 0); // Reset own vector clock if it wasn't present in the imported state
@@ -1730,7 +1738,7 @@ function requireCrdtManager () {
 	            // Map operation uuids to timestamp
 	            this.#keyOperations.forEach((value, key) => {
 	                value?.forEach((operation) => {
-	                    this.#opUuuidTimestamp.set(operation?.uuid, Date.now());
+	                    this.#opUuidTimestamp.set(operation?.uuid, Date.now());
 	                });
 	            });
 
@@ -1743,72 +1751,38 @@ function requireCrdtManager () {
 	    }
 
 	    /**
-	     * Export only the last operation of a property for a single key
-	     * This can still be imported using importProperty
-	     * @param {string} key 
-	     * @returns {Object} - Data export
-	     */
-	    exportPropertyLastOpOnly(key) {
-	        const lastOp = this.#keyOperations.get(key)?.[this.#keyOperations.get(key)?.length - 1];
-	        return {
-	            key,
-	            operations: lastOp ? [lastOp] : [],
-	            vectorClock: Array.from(this.#vectorClock.entries())
-	        };
-	    }
-
-	    /**
-	     * Export property for a single key
-	     * @param {string} key 
-	     * @returns {Object} - Data export
-	     */
-	    exportProperty(key) {
-	        return {
-	            key,
-	            operations: [...(this.#keyOperations.get(key) || [])],
-	            vectorClock: Array.from(this.#vectorClock.entries())
-	        };
-	    }
-
-	    /**
-	     * Import property for a single key and merge changes
+	     * Import property update
 	     * @param {Object} data - Data to import
 	     */
-	    importProperty(data) {
+	    importPropertyUpdate(data) {
 	        try {
-	            const { key, operations, vectorClock } = data;
+	            const { key, operation, vectorClock } = data;
+	            if (this.#debug) console.log(CONSOLE_PREFIX + "Importing update:", data); // Debug
 
 	            // Get COPY of current ops (or empty array if none yet)
 	            const currentOps = [...(this.#keyOperations.get(key) || [])];
 
 	            // Merge vector clocks (always take max value)
-	            if (vectorClock) {
-	                for (const [id, counter] of vectorClock) {
-	                    if (!this.#vectorClock.has(id) || this.#vectorClock.get(id) < counter) {
-	                        this.#vectorClock.set(id, counter);
-	                    }
+	            for (const [id, counter] of vectorClock) {
+	                if (!this.#vectorClock.has(id) || this.#vectorClock.get(id) < counter) {
+	                    this.#vectorClock.set(id, counter);
 	                }
 	            }
 
-	            // Safeguard against attack where new clients would rapidly connect and disconnect to fill up the vectorClock
+	            // Saveguard
 	            if (this.#vectorClock.size > 1000) this.#vectorClock = new Map([...this.#vectorClock].slice(-100));
 
-	            // Add new operations (diff) in correct order
+	            // Add new operation if it's not already added
 	            const existingUuids = new Set(currentOps.map(op => op.uuid));
-	            if (operations?.length) {
-	                for (const op of operations) {
-	                    if (op?.uuid && !existingUuids.has(op.uuid)) {
-	                        currentOps.push({ ...op }); // Add operation
-	                        this.#opUuuidTimestamp.set(op?.uuid, Date.now()); // Add timestamp for gc
-	                    }
-	                }
+	            if (operation?.uuid && !existingUuids.has(operation.uuid)) {
+	                currentOps.push({ ...operation }); // Add operation
+	                this.#opUuidTimestamp.set(operation?.uuid, Date.now()); // Add timestamp for gc
 	            }
 
 	            // Sort, update operations & local value
 	            this.#keyOperations.set(key, this.#sortByVectorClock(currentOps));
 	            this.#processLocalProperty(key);
-
-	            this.#checkGarbageCollection(); // Check if GC should run
+	            this.#checkGarbageCollection();
 
 	        } catch (error) {
 	            console.error(CONSOLE_PREFIX + "Failed to import property:", error);
@@ -1821,9 +1795,13 @@ function requireCrdtManager () {
 	     * @param {string} operation 
 	     * @param {*} value 
 	     * @param {*} updateValue 
+	     * @returns {Object} - Returns the property update
 	     */
 	    updateProperty(key, operation, value, updateValue) {
 	        try {
+	            // Debug log
+	            if (this.#debug) console.log(CONSOLE_PREFIX + `Updating property with key ${key}, operation ${operation}, value ${value} and updateValue ${updateValue}.`);
+
 	            // Increment vector clock
 	            const counter = this.#vectorClock.get(this.#replicaId) || 0;
 	            this.#vectorClock.set(this.#replicaId, counter + 1);
@@ -1834,13 +1812,16 @@ function requireCrdtManager () {
 	            // Add operation
 	            const newOp = this.#createOperation({ operation, value, updateValue }, Array.from(this.#vectorClock.entries()));
 	            currentOps.push(newOp);
+	            this.#keyOperations.set(key, currentOps); // Update the operations (no need to sort via vector clock since local updates are always the latest)
+	            this.#processLocalProperty(key); // Process local value
+	            this.#checkGarbageCollection();
 
-	            // Sort and process
-	            this.#keyOperations.set(key, this.#sortByVectorClock(currentOps));
-	            this.#opUuuidTimestamp.set(newOp.uuid, Date.now());
-	            this.#processLocalProperty(key);
-
-	            this.#checkGarbageCollection(); // Check if GC should run
+	            // Return the property update with the new operation (this can be imported using importPropertyUpdate)
+	            return {
+	                key,
+	                operation: { ...newOp },
+	                vectorClock: Array.from(this.#vectorClock.entries())
+	            };
 
 	        } catch (error) {
 	            console.error(CONSOLE_PREFIX + `Failed to add operation for key "${key}":`, error);
@@ -1859,15 +1840,16 @@ function requireCrdtManager () {
 
 	            let retainCount = operations.length;
 	            operations.forEach((op, index) => {
-	                // Count how many ops, from last to latest, are >10s old in a row
-	                if (op.uuid && this.#opUuuidTimestamp.has(op.uuid) && (Date.now() - this.#opUuuidTimestamp.get(op.uuid)) > MIN_AGE_FOR_GC) {
+	                // Count how many ops, from last to latest, are older than the min-age in a row
+	                if (op.uuid && this.#opUuidTimestamp.has(op.uuid) && (Date.now() - this.#opUuidTimestamp.get(op.uuid)) > MIN_AGE_FOR_GC) {
 	                    const removeCount = index + 1;
 	                    retainCount = operations.length - removeCount;
-	                    this.#opUuuidTimestamp.delete(op.uuid); // Remove from timestamps if set to be deleted
+	                    this.#opUuidTimestamp.delete(op.uuid); // Remove from timestamps if set to be deleted
 	                }
 	            });
 
 	            if (retainCount < operations.length) {
+	                if (this.#debug) console.log(CONSOLE_PREFIX + `Running garbage collection for key ${key} with current operations:`, operations);
 	                const retainOps = operations.slice(-retainCount); // newest ops
 	                const removeOps = operations.slice(0, -retainCount); // oldest ops (start =  idx 0, end = retainCount counted from right side)
 	                const baselineVectorClock = removeOps[removeOps.length - 1]?.vectorClock || []; // Use the vector clock from the last operation that we remove/overwrite 
@@ -1888,6 +1870,9 @@ function requireCrdtManager () {
 	                // Create a compact operation with baseline value and appropriate vector clock
 	                const compactOp = this.#createOperation({ operation: "set", value: baselineValue }, baselineVectorClock);
 
+	                // Debug log
+	                if (this.#debug) console.log(CONSOLE_PREFIX + "Operations after garbage collection for this key:", [compactOp, ...retainOps]);
+
 	                // Combine compact op with retained operations
 	                this.#keyOperations.set(key, [compactOp, ...retainOps]);
 	            }
@@ -1907,7 +1892,7 @@ function requireCrdtManager () {
 	            source: this.#replicaId,
 	            uuid: crypto.randomUUID()
 	        };
-	        this.#opUuuidTimestamp.set(newOperation.uuid, Date.now());
+	        this.#opUuidTimestamp.set(newOperation.uuid, Date.now());
 	        return newOperation;
 	    }
 
@@ -2062,7 +2047,8 @@ var crdtManagerExports = requireCrdtManager();
 
 const ERROR_PREFIX = "PlaySocket error: ";
 const WARNING_PREFIX = "PlaySocket warning: ";
-const TIMEOUT_MS = 5000; // 5 second timeout for operations
+const LOG_PREFIX = "PlaySocket log: ";
+const TIMEOUT_MS = 3000; // 3 second timeout for WS messages
 
 class PlaySocket {
     // Core properties
@@ -2078,22 +2064,28 @@ class PlaySocket {
     #roomId; // ID of the host (client only)
     #connectionCount = 0;
     #crdtManager;
+    #roomVersion = 0; // Update version (used to compare local vs. remote state to detect package loss)
+    #sentUpdates = new Set(); // Contains update uuids
 
     // Event handling
     #callbacks = new Map(); // Event callbacks
 
     // Async server operations
     #pendingJoin;
-    #pendingHost;
+    #pendingCreate;
     #pendingRegistration;
     #pendingConnect;
     #pendingReconnect;
+    #pendingStateRequest;
 
     // Timeouts or intervals
     #reconnectTimeout;
     #reconnectCount = 0;
     #isReconnecting = false;
 
+    // Debug
+    #debug = false;
+
     /**
      * Create a new PlaySocket instance
      * @param {string} id - Unique identifier for this client
@@ -2105,7 +2097,8 @@ class PlaySocket {
         this.#id = id;
         if (options.endpoint) this.#endpoint = options.endpoint;
         if (options.customData) this.#customData = { ...options.customData };
-        this.#crdtManager = new crdtManagerExports.CRDTManager(this.#id);
+        if (options.debug) this.#debug = true; // Enabling extra logging
+        this.#crdtManager = new crdtManagerExports.CRDTManager(this.#id, this.#debug);
     }
 
     /**
@@ -2210,9 +2203,11 @@ class PlaySocket {
                     case 'join_accepted':
                         // Connected to room
                         if (this.#pendingJoin) {
+                            if (this.#debug) console.log(LOG_PREFIX + "State received for join:", message.state);
                             this.#crdtManager.importState(message.state);
                             this.#connectionCount = message.participantCount - 1; // Counted without the user themselves
                             this.#roomHost = message.host;
+                            this.#roomVersion = message.version;
                             this.#triggerEvent("storageUpdated", this.getStorage);
                             this.#triggerEvent("status", `Connected to room.`);
                             this.#pendingJoin.resolve();
@@ -2233,7 +2228,9 @@ class PlaySocket {
                             this.#isReconnecting = false;
                             this.#reconnectCount = 0;
                             if (message.roomData) {
+                                if (this.#debug) console.log(LOG_PREFIX + "State received for reconnect:", message.roomData.state);
                                 this.#crdtManager.importState(message.roomData.state);
+                                this.#roomVersion = message.roomData.version;
                                 this.#connectionCount = message.roomData.participantCount - 1; // Counted without the user themselves
                                 this.#setHost(message.roomData.host); // Set host before in case there are .isHost checks in the storageUpdate fallback
                                 this.#triggerEvent("storageUpdated", this.getStorage);
@@ -2255,16 +2252,16 @@ class PlaySocket {
                         break;
 
                     case 'room_created':
-                        if (this.#pendingHost) {
-                            this.#pendingHost.resolve(this.#roomId);
-                            this.#triggerEvent("status", `Room created${this.#pendingHost.maxSize ? ` with max size ${this.#pendingHost.maxSize}.` : '.'}`);
+                        if (this.#pendingCreate) {
+                            this.#triggerEvent("status", `Room created${this.#pendingCreate.maxSize ? ` with max size ${this.#pendingCreate.maxSize}.` : '.'}`);
+                            this.#pendingCreate.resolve(this.#roomId);
                         }
                         break;
 
                     case 'room_creation_failed':
-                        if (this.#pendingHost) {
-                            this.#pendingHost.reject(new Error("Failed to create room: " + message.reason));
+                        if (this.#pendingCreate) {
                             this.#triggerEvent("error", "Failed to create room: " + message.reason);
+                            this.#pendingCreate.reject(new Error("Failed to create room: " + message.reason));
                         }
                         break;
 
@@ -2284,9 +2281,27 @@ class PlaySocket {
                         }
                         break;
 
-                    case 'property_sync':
-                        if (message.property) this.#crdtManager.importProperty(message.property);
+                    case 'state_sync':
+                        if (this.#pendingStateRequest) {
+                            if (this.#debug) console.log(LOG_PREFIX + "State received following state request:", message.state);
+                            this.#roomVersion = message.version;
+                            this.#crdtManager.importState(message.state);
+                            this.#triggerEvent("storageUpdated", this.getStorage);
+                            this.#triggerEvent("status", "State synchronized.");
+                            this.#pendingStateRequest.resolve();
+                        }
+                        break;
+
+                    case 'property_update':
+                        this.#roomVersion++; // Increment room version
+                        if (this.#debug) console.log(LOG_PREFIX + "Property update received:", message.update);
+                        this.#sentUpdates.delete(message.uuid); // If this is our sent update, delete it so that timeout check knows it was received
+                        this.#crdtManager.importPropertyUpdate(message.update);
                         if (this.#crdtManager.didPropertiesChange) this.#triggerEvent("storageUpdated", this.getStorage);
+                        if (this.#roomVersion != message.version) {
+                            this.#triggerEvent("error", "Detected missing update – requesting full state.");
+                            this.#requestStateSync();
+                        }
                         break;
 
                     case 'client_disconnected':
@@ -2350,11 +2365,34 @@ class PlaySocket {
                 this.#pendingReconnect = null;
             });
         } catch (error) {
+            if (!this.#initialized) return;
             this.#triggerEvent("status", "Reconnection failed: " + error.message);
             this.#reconnectTimeout = setTimeout(() => this.#attemptReconnect(), 500);
         }
     }
 
+    /**
+     * If the local state is out of sync, request the room state
+     */
+    async #requestStateSync() {
+        if (this.#pendingStateRequest) return; // Return if already requested
+        try {
+            Promise.race([
+                new Promise(async (resolve) => {
+                    this.#pendingStateRequest = { resolve };
+                    this.#sendToServer({ type: 'request_state' });
+                }),
+                this.#createTimeout("State request")
+            ]).finally(() => {
+                this.#pendingStateRequest = null;
+            });
+        } catch (error) {
+            if (!this.#initialized) return;
+            this.#triggerEvent("error", "Failed to re-sync state: " + error.message);
+            this.destroy();
+        }
+    }
+
     /**
      * Update the host in case a new one was chosen
      * @param {string} hostId - Client id of new host
@@ -2402,7 +2440,7 @@ class PlaySocket {
                 });
                 this.#roomId = this.#id; // Create room with your own ID as the room ID to mimic p2p
                 this.#roomHost = this.#id;
-                this.#pendingHost = { maxSize, resolve, reject };
+                this.#pendingCreate = { maxSize, resolve, reject };
                 this.#sendToServer({
                     type: 'create_room',
                     state: this.#crdtManager.getState,
@@ -2412,7 +2450,7 @@ class PlaySocket {
             }),
             this.#createTimeout("Room creation")
         ]).finally(() => {
-            this.#pendingHost = null;
+            this.#pendingCreate = null;
         });
     }
 
@@ -2451,12 +2489,22 @@ class PlaySocket {
      * @param {*} value - New value
      */
     updateStorage(key, value) {
-        this.#crdtManager.updateProperty(key, "set", value);
+        if (this.#debug) console.log(LOG_PREFIX + "Property set update for key '" + key + "':", value);
+        const propUpdate = this.#crdtManager.updateProperty(key, "set", value);
+        const updateUuid = crypto.randomUUID();
+        this.#sentUpdates.add(updateUuid);
         this.#sendToServer({
             type: 'property_update',
             key,
-            property: this.#crdtManager.exportPropertyLastOpOnly(key)
+            update: propUpdate,
+            uuid: updateUuid
         });
+        setTimeout(() => {
+            if (this.#initialized && this.#sentUpdates.has(updateUuid)) {
+                this.#triggerEvent("error", "Sent update did not go through – requesting state.");
+                this.#requestStateSync();
+            }
+        }, TIMEOUT_MS);
         if (this.#crdtManager.didPropertiesChange) this.#triggerEvent("storageUpdated", this.getStorage); // Always trigger callback after send in case msgs are sent in the callback (which would break the order)
     }
 
@@ -2468,12 +2516,22 @@ class PlaySocket {
      * @param {*} updateValue - New value for update-matching
      */
     updateStorageArray(key, operation, value, updateValue) {
-        this.#crdtManager.updateProperty(key, "array-" + operation, value, updateValue);
+        if (this.#debug) console.log(LOG_PREFIX + `Property array update for key '${key}', operation '${operation}', value '${value}' and updateValue '${updateValue}'.`);
+        const propUpdate = this.#crdtManager.updateProperty(key, "array-" + operation, value, updateValue);
+        const updateUuid = crypto.randomUUID();
+        this.#sentUpdates.add(updateUuid);
         this.#sendToServer({
             type: 'property_update',
             key,
-            property: this.#crdtManager.exportPropertyLastOpOnly(key)
+            update: propUpdate,
+            uuid: updateUuid
         });
+        setTimeout(() => {
+            if (this.#initialized && this.#sentUpdates.has(updateUuid)) {
+                this.#triggerEvent("error", "Sent update did not go through – requesting state.");
+                this.#requestStateSync();
+            }
+        }, TIMEOUT_MS);
         if (this.#crdtManager.didPropertiesChange) this.#triggerEvent("storageUpdated", this.getStorage);
     }
 
@@ -2501,13 +2559,16 @@ class PlaySocket {
         this.#connectionCount = 0;
         this.#isReconnecting = false;
         this.#reconnectCount = 0;
+        this.#roomVersion = 0;
+        this.#sentUpdates.clear();
 
         // Reject timeouts if currently active
         if (this.#pendingJoin) this.#pendingJoin.reject();
-        if (this.#pendingHost) this.#pendingHost.reject();
+        if (this.#pendingCreate) this.#pendingCreate.reject();
         if (this.#pendingRegistration) this.#pendingRegistration.reject();
         if (this.#pendingConnect) this.#pendingConnect.reject();
         if (this.#pendingReconnect) this.#pendingReconnect.reject();
+        if (this.#pendingStateRequest) this.#pendingStateRequest.reject();
     }
 
     // Public getters

package/dist/playsocket-server.js

@@ -1819,8 +1819,6 @@ function requireCrdtManager () {
 	    // Storage
 	    #replicaId;
 	    #keyOperations = new Map();
-
-	    // Vector clock
 	    #vectorClock = new Map();
 
 	    // Local only
@@ -1829,14 +1827,19 @@ function requireCrdtManager () {
 
 	    // Local Garbage Collection
 	    #lastGCCheck = 0;
-	    #opUuuidTimestamp = new Map(); // Map every operation to a timestamp for garbage collection
+	    #opUuidTimestamp = new Map(); // Map every operation to a timestamp for garbage collection
+
+	    // Debug
+	    #debug = false;
 
 	    /**
 	     * Create a new instance
-	     * @param {string} [replicaId] - Choose a uuid (falls back to random uuid)
+	     * @param {string} replicaId - Choose a uuid (falls back to random uuid)
 	     */
-	    constructor(replicaId) {
-	        this.#replicaId = replicaId || crypto.randomUUID();
+	    constructor(replicaId, debug) {
+	        if (!replicaId) return console.error("No replicaId provided!");
+	        if (debug) this.#debug = true;
+	        this.#replicaId = replicaId;
 	        this.#vectorClock.set(this.#replicaId, 0);
 	    }
 
@@ -1847,8 +1850,13 @@ function requireCrdtManager () {
 	    importState(state) {
 	        try {
 	            const { keyOperations, vectorClock } = state;
+	            if (this.#debug) console.log(CONSOLE_PREFIX + "Importing state:", state);
+
+	            // Resets
+	            this.#opUuidTimestamp.clear();
+	            this.#propertyStore = {};
+	            this.#lastPropertyStore = {};
 
-	            this.#opUuuidTimestamp.clear(); // Reset the uuid timestamps since it might contain uuid's that no longer exist in the new state
 	            this.#keyOperations = new Map(keyOperations); // Rebuild the map
 	            this.#vectorClock = new Map(vectorClock); // Also rebuild the map here
 	            if (!this.#vectorClock.has(this.#replicaId)) this.#vectorClock.set(this.#replicaId, 0); // Reset own vector clock if it wasn't present in the imported state
@@ -1856,7 +1864,7 @@ function requireCrdtManager () {
 	            // Map operation uuids to timestamp
 	            this.#keyOperations.forEach((value, key) => {
 	                value?.forEach((operation) => {
-	                    this.#opUuuidTimestamp.set(operation?.uuid, Date.now());
+	                    this.#opUuidTimestamp.set(operation?.uuid, Date.now());
 	                });
 	            });
 
@@ -1869,72 +1877,38 @@ function requireCrdtManager () {
 	    }
 
 	    /**
-	     * Export only the last operation of a property for a single key
-	     * This can still be imported using importProperty
-	     * @param {string} key 
-	     * @returns {Object} - Data export
-	     */
-	    exportPropertyLastOpOnly(key) {
-	        const lastOp = this.#keyOperations.get(key)?.[this.#keyOperations.get(key)?.length - 1];
-	        return {
-	            key,
-	            operations: lastOp ? [lastOp] : [],
-	            vectorClock: Array.from(this.#vectorClock.entries())
-	        };
-	    }
-
-	    /**
-	     * Export property for a single key
-	     * @param {string} key 
-	     * @returns {Object} - Data export
-	     */
-	    exportProperty(key) {
-	        return {
-	            key,
-	            operations: [...(this.#keyOperations.get(key) || [])],
-	            vectorClock: Array.from(this.#vectorClock.entries())
-	        };
-	    }
-
-	    /**
-	     * Import property for a single key and merge changes
+	     * Import property update
 	     * @param {Object} data - Data to import
 	     */
-	    importProperty(data) {
+	    importPropertyUpdate(data) {
 	        try {
-	            const { key, operations, vectorClock } = data;
+	            const { key, operation, vectorClock } = data;
+	            if (this.#debug) console.log(CONSOLE_PREFIX + "Importing update:", data); // Debug
 
 	            // Get COPY of current ops (or empty array if none yet)
 	            const currentOps = [...(this.#keyOperations.get(key) || [])];
 
 	            // Merge vector clocks (always take max value)
-	            if (vectorClock) {
-	                for (const [id, counter] of vectorClock) {
-	                    if (!this.#vectorClock.has(id) || this.#vectorClock.get(id) < counter) {
-	                        this.#vectorClock.set(id, counter);
-	                    }
+	            for (const [id, counter] of vectorClock) {
+	                if (!this.#vectorClock.has(id) || this.#vectorClock.get(id) < counter) {
+	                    this.#vectorClock.set(id, counter);
 	                }
 	            }
 
-	            // Safeguard against attack where new clients would rapidly connect and disconnect to fill up the vectorClock
+	            // Saveguard
 	            if (this.#vectorClock.size > 1000) this.#vectorClock = new Map([...this.#vectorClock].slice(-100));
 
-	            // Add new operations (diff) in correct order
+	            // Add new operation if it's not already added
 	            const existingUuids = new Set(currentOps.map(op => op.uuid));
-	            if (operations?.length) {
-	                for (const op of operations) {
-	                    if (op?.uuid && !existingUuids.has(op.uuid)) {
-	                        currentOps.push({ ...op }); // Add operation
-	                        this.#opUuuidTimestamp.set(op?.uuid, Date.now()); // Add timestamp for gc
-	                    }
-	                }
+	            if (operation?.uuid && !existingUuids.has(operation.uuid)) {
+	                currentOps.push({ ...operation }); // Add operation
+	                this.#opUuidTimestamp.set(operation?.uuid, Date.now()); // Add timestamp for gc
 	            }
 
 	            // Sort, update operations & local value
 	            this.#keyOperations.set(key, this.#sortByVectorClock(currentOps));
 	            this.#processLocalProperty(key);
-
-	            this.#checkGarbageCollection(); // Check if GC should run
+	            this.#checkGarbageCollection();
 
 	        } catch (error) {
 	            console.error(CONSOLE_PREFIX + "Failed to import property:", error);
@@ -1947,9 +1921,13 @@ function requireCrdtManager () {
 	     * @param {string} operation 
 	     * @param {*} value 
 	     * @param {*} updateValue 
+	     * @returns {Object} - Returns the property update
 	     */
 	    updateProperty(key, operation, value, updateValue) {
 	        try {
+	            // Debug log
+	            if (this.#debug) console.log(CONSOLE_PREFIX + `Updating property with key ${key}, operation ${operation}, value ${value} and updateValue ${updateValue}.`);
+
 	            // Increment vector clock
 	            const counter = this.#vectorClock.get(this.#replicaId) || 0;
 	            this.#vectorClock.set(this.#replicaId, counter + 1);
@@ -1960,13 +1938,16 @@ function requireCrdtManager () {
 	            // Add operation
 	            const newOp = this.#createOperation({ operation, value, updateValue }, Array.from(this.#vectorClock.entries()));
 	            currentOps.push(newOp);
+	            this.#keyOperations.set(key, currentOps); // Update the operations (no need to sort via vector clock since local updates are always the latest)
+	            this.#processLocalProperty(key); // Process local value
+	            this.#checkGarbageCollection();
 
-	            // Sort and process
-	            this.#keyOperations.set(key, this.#sortByVectorClock(currentOps));
-	            this.#opUuuidTimestamp.set(newOp.uuid, Date.now());
-	            this.#processLocalProperty(key);
-
-	            this.#checkGarbageCollection(); // Check if GC should run
+	            // Return the property update with the new operation (this can be imported using importPropertyUpdate)
+	            return {
+	                key,
+	                operation: { ...newOp },
+	                vectorClock: Array.from(this.#vectorClock.entries())
+	            };
 
 	        } catch (error) {
 	            console.error(CONSOLE_PREFIX + `Failed to add operation for key "${key}":`, error);
@@ -1985,15 +1966,16 @@ function requireCrdtManager () {
 
 	            let retainCount = operations.length;
 	            operations.forEach((op, index) => {
-	                // Count how many ops, from last to latest, are >10s old in a row
-	                if (op.uuid && this.#opUuuidTimestamp.has(op.uuid) && (Date.now() - this.#opUuuidTimestamp.get(op.uuid)) > MIN_AGE_FOR_GC) {
+	                // Count how many ops, from last to latest, are older than the min-age in a row
+	                if (op.uuid && this.#opUuidTimestamp.has(op.uuid) && (Date.now() - this.#opUuidTimestamp.get(op.uuid)) > MIN_AGE_FOR_GC) {
 	                    const removeCount = index + 1;
 	                    retainCount = operations.length - removeCount;
-	                    this.#opUuuidTimestamp.delete(op.uuid); // Remove from timestamps if set to be deleted
+	                    this.#opUuidTimestamp.delete(op.uuid); // Remove from timestamps if set to be deleted
 	                }
 	            });
 
 	            if (retainCount < operations.length) {
+	                if (this.#debug) console.log(CONSOLE_PREFIX + `Running garbage collection for key ${key} with current operations:`, operations);
 	                const retainOps = operations.slice(-retainCount); // newest ops
 	                const removeOps = operations.slice(0, -retainCount); // oldest ops (start =  idx 0, end = retainCount counted from right side)
 	                const baselineVectorClock = removeOps[removeOps.length - 1]?.vectorClock || []; // Use the vector clock from the last operation that we remove/overwrite 
@@ -2014,6 +1996,9 @@ function requireCrdtManager () {
 	                // Create a compact operation with baseline value and appropriate vector clock
 	                const compactOp = this.#createOperation({ operation: "set", value: baselineValue }, baselineVectorClock);
 
+	                // Debug log
+	                if (this.#debug) console.log(CONSOLE_PREFIX + "Operations after garbage collection for this key:", [compactOp, ...retainOps]);
+
 	                // Combine compact op with retained operations
 	                this.#keyOperations.set(key, [compactOp, ...retainOps]);
 	            }
@@ -2033,7 +2018,7 @@ function requireCrdtManager () {
 	            source: this.#replicaId,
 	            uuid: crypto.randomUUID()
 	        };
-	        this.#opUuuidTimestamp.set(newOperation.uuid, Date.now());
+	        this.#opUuidTimestamp.set(newOperation.uuid, Date.now());
 	        return newOperation;
 	    }
 
@@ -2205,6 +2190,10 @@ function requireServer () {
 	    #heartbeatInterval;
 	    #pendingDisconnects = new Map(); // ClientId -> {timeout, roomId}
 	    #clientTokens = new Map(); // ClientId -> Token
+	    #roomVersions = new Map(); // RoomId -> Version
+
+	    // Debug
+	    #debug = false;
 
 	    /**
 	     * Create a new PlaySocketServer instance
@@ -2214,7 +2203,9 @@ function requireServer () {
 	     * @param {string} [options.path='/socket'] - WebSocket endpoint path
 	     */
 	    constructor(options = {}) {
-	        const { server, port = 3000, path = '/' } = options;
+	        const { server, port = 3000, path = '/', debug = false } = options;
+
+	        if (debug) this.#debug = true; // Enable extra logging
 
 	        // Handle server creation / usage
 	        if (server) {
@@ -2223,7 +2214,7 @@ function requireServer () {
 	            this.#ownsServer = true;
 	            this.#server = http.createServer(); // Create HTTP server and start it
 	            this.#server.listen(port, () => {
-	                console.log(`PlaySocket server running on port ${port}`);
+	                console.log(`PlaySocket server running on port ${port}.`);
 	            });
 	        }
 
@@ -2300,12 +2291,15 @@ function requireServer () {
 
 	                        // If they were in a room, provide updated room data
 	                        let roomData;
-	                        const formerRoom = this.#rooms[this.#clientRooms.get(data.id)];
+	                        const formerRoomId = this.#clientRooms.get(data.id);
+	                        const formerRoom = this.#rooms[formerRoomId];
 	                        if (formerRoom) {
+	                            if (this.#debug) console.log(`State sent for reconnection for room ${formerRoomId}:`, formerRoom.crdtManager.getState);
 	                            roomData = {
 	                                state: formerRoom.crdtManager.getState,
 	                                participantCount: formerRoom.participants.length,
-	                                host: formerRoom.participants[0]
+	                                host: formerRoom.participants[0],
+	                                version: this.#roomVersions.get(formerRoomId)
 	                            };
 	                        }
 
@@ -2315,6 +2309,18 @@ function requireServer () {
 	                    }
 	                    break;
 
+	                case 'request_state':
+	                    const stateRoomId = this.#clientRooms.get(ws.clientId);
+	                    const stateRoom = stateRoomId ? this.#rooms[stateRoomId] : null;
+	                    if (stateRoom) {
+	                        ws.send(encode({
+	                            type: 'state_sync',
+	                            state: stateRoom.crdtManager.getState,
+	                            version: this.#roomVersions.get(stateRoomId)
+	                        }), { binary: true });
+	                    }
+	                    break;
+
 	                case 'create_room':
 	                    if (!ws.clientId) return;
 	                    const newRoomId = ws.clientId;
@@ -2326,15 +2332,19 @@ function requireServer () {
 	                        return;
 	                    }
 
-	                    // Create room object
+	                    // Create room
+	                    this.#roomVersions.set(newRoomId, 0); // Start with version 0
 	                    this.#rooms[newRoomId] = {
 	                        participants: [ws.clientId],
 	                        maxSize: data.size || null,
-	                        crdtManager: new CRDTManager()
+	                        crdtManager: new CRDTManager(crypto.randomUUID(), this.#debug)
 	                    };
 
 	                    // Load state if provided
-	                    if (data.state) this.#rooms[newRoomId].crdtManager.importState(data.state);
+	                    if (data.state) {
+	                        this.#rooms[newRoomId].crdtManager.importState(data.state);
+	                        if (this.#debug) console.log("Room created with initial state:", data.state);
+	                    }
 
 	                    this.#clientRooms.set(ws.clientId, newRoomId); // Add client to their room
 	                    ws.send(encode({ type: 'room_created' }), { binary: true });
@@ -2362,11 +2372,13 @@ function requireServer () {
 	                    this.#clientRooms.set(ws.clientId, roomId);
 
 	                    // Notify joiner with initial storage
+	                    if (this.#debug) console.log("Room state sent for join:", room.crdtManager.getState);
 	                    ws.send(encode({
 	                        type: 'join_accepted',
 	                        state: room.crdtManager.getState,
 	                        participantCount: room.participants.length,
-	                        host: room.participants[0]
+	                        host: room.participants[0],
+	                        version: this.#roomVersions.get(roomId)
 	                    }), { binary: true });
 
 	                    // Notify existing participants
@@ -2387,15 +2399,23 @@ function requireServer () {
 	                case 'property_update':
 	                    const updateRoomId = this.#clientRooms.get(ws.clientId);
 	                    const updateRoom = updateRoomId ? this.#rooms[updateRoomId] : null;
-	                    
-	                    if (updateRoom && data.key && data.property) {
-	                        updateRoom.crdtManager.importProperty(data.property);
+
+	                    if (updateRoom && data.key && data.update && data.uuid) {
+	                        updateRoom.crdtManager.importPropertyUpdate(data.update);
+
+	                        // Increment version for this room
+	                        const currentVersion = this.#roomVersions.get(updateRoomId) + 1;
+	                        this.#roomVersions.set(updateRoomId, currentVersion);
+
+	                        if (this.#debug) console.log("Property update received and imported:", data.update);
 	                        updateRoom.participants?.forEach(p => {
 	                            const client = this.#clients.get(p);
 	                            if (client) {
 	                                client.send(encode({
-	                                    type: 'property_sync',
-	                                    property: updateRoom.crdtManager.exportPropertyLastOpOnly(data.key)
+	                                    type: 'property_update',
+	                                    update: data.update,
+	                                    version: currentVersion,
+	                                    uuid: data.uuid
 	                                }), { binary: true });
 	                            }
 	                        });
@@ -2488,6 +2508,8 @@ function requireServer () {
 
 	            if (room.participants?.length === 0) {
 	                delete this.#rooms[roomId]; // Delete room if now empty
+	                this.#roomVersions.delete(roomId); // Delete room version
+	                if (this.#debug) console.log("Deleted room with id " + roomId + ".");
 	            } else {
 	                // Notify remaining participants
 	                room.participants.forEach(p => {
@@ -2539,7 +2561,7 @@ function requireServer () {
 	        }
 	        if (this.#server && this.#ownsServer) {
 	            this.#server.close(() => {
-	                console.log('PlaySocket server stopped');
+	                console.log('PlaySocket server stopped.');
 	            });
 	        }
 	        this.#pendingDisconnects.forEach((data) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playsocketjs",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "WebSocket wrapper for creating simple multiplayer systems with ease.",
   "module": "dist/playsocket-client.js",
   "exports": {