playsocketjs 1.0.12 → 1.0.14

package/dist/playsocket-client.js

@@ -17,9 +17,11 @@ class PlaySocket {
 
     // Room properties
     #storage = {}; // Shared storage object
+    #storageTimestamps = {}; // Tracks update timestamps per key to ensure that not-yet synced updates don't get overwritten
     #roomHost;
     #roomId; // ID of the host (client only)
     #connectionCount = 0;
+    #serverTimeOffset = 0; // Offset between server time and local time
 
     // Event handling
     #callbacks = new Map(); // Event callbacks
@@ -59,6 +61,14 @@ class PlaySocket {
         );
     }
 
+    /**
+     * Get synchronized timestamp
+     * @private
+     */
+    #getTimestamp() {
+        return Date.now() + this.#serverTimeOffset;
+    }
+
     /**
      * Register an event callback
      * @param {string} event - Event name
@@ -109,7 +119,8 @@ class PlaySocket {
                 this.#sendToServer({
                     type: 'register',
                     id: this.#id,
-                    customData: this.#customData || undefined
+                    customData: this.#customData || undefined,
+                    clientTime: Date.now()
                 });
             }),
             this.#createTimeout("Registration")
@@ -152,6 +163,7 @@ class PlaySocket {
                         // Connected to room
                         if (this.#pendingJoin) {
                             this.#storage = message.storage;
+                            this.#storageTimestamps = message.storageTimestamps;
                             this.#connectionCount = message.participantCount - 1; // Counted without the user themselves
                             this.#roomHost = message.host;
                             this.#triggerEvent("status", `Connected to room.`);
@@ -175,6 +187,7 @@ class PlaySocket {
                             this.#reconnectCount = 0;
                             if (message.roomData) {
                                 this.#storage = message.roomData.storage;
+                                this.#storageTimestamps = message.roomData.storageTimestamps;
                                 this.#connectionCount = message.roomData.participantCount - 1; // Counted without the user themselves
                                 this.#setHost(message.roomData.host);
                                 this.#triggerEvent("storageUpdated", { ...this.#storage });
@@ -220,6 +233,9 @@ class PlaySocket {
 
                     case 'registered':
                         if (this.#pendingRegistration) {
+                            const roundTripTime = Date.now() - message.clientTime;
+                            const serverTimeAtClientNow = message.serverTime + (roundTripTime / 2);
+                            this.#serverTimeOffset = serverTimeAtClientNow - Date.now();
                             this.#sessionToken = message.sessionToken;
                             this.#initialized = true;
                             this.#pendingRegistration.resolve();
@@ -229,8 +245,21 @@ class PlaySocket {
 
                     case 'storage_sync':
                         if (message.key) {
-                            if (JSON.stringify(this.#storage[message.key]) !== JSON.stringify(message.value)) {
+                            const localTimestamp = this.#storageTimestamps[message.key] || 0;
+                            if (message.timestamp > localTimestamp && JSON.stringify(this.#storage[message.key]) !== JSON.stringify(message.value)) {
                                 this.#storage[message.key] = message.value;
+                                this.#storageTimestamps[message.key] = message.timestamp;
+                                this.#triggerEvent("storageUpdated", { ...this.#storage });
+                            }
+                        }
+                        break;
+
+                    case 'storage_operation':
+                        if (message.key) {
+                            const updatedArray = this.#handleArrayUpdate(message.key, message.operation, message.value, message.updateValue);
+                            if (JSON.stringify(this.#storage[message.key]) !== JSON.stringify(updatedArray)) {
+                                this.#storage[message.key] = updatedArray;
+                                this.#storageTimestamps[message.key] = message.timestamp;
                                 this.#triggerEvent("storageUpdated", { ...this.#storage });
                             }
                         }
@@ -399,13 +428,16 @@ class PlaySocket {
      */
     updateStorage(key, value) {
         if (JSON.stringify(this.#storage[key]) === JSON.stringify(value)) return; // Prevent updates without changes
+        const timestamp = this.#getTimestamp();
         this.#sendToServer({
             type: 'room_storage_update',
             key,
-            value
+            value,
+            timestamp
         });
-        // Optimistic update for regular storage updates
+        // Optimistic update
         this.#storage[key] = value;
+        this.#storageTimestamps[key] = timestamp;
         this.#triggerEvent("storageUpdated", { ...this.#storage });
     }
 
@@ -417,8 +449,8 @@ class PlaySocket {
      * @param {*} updateValue - New value for update-matching
      */
     updateStorageArray(key, operation, value, updateValue) {
-        // Send operation to server (no optimistic update – we can't guarantee that it is correct)
-        // If another client has sent an update to the server that is processed first, the end result will differ.
+        const updatedArray = this.#handleArrayUpdate(key, operation, value, updateValue);
+        if (JSON.stringify(this.#storage[key]) === JSON.stringify(updatedArray)) return; // Prevent updates without changes
         this.#sendToServer({
             type: 'room_storage_array_update',
             key,
@@ -426,6 +458,44 @@ class PlaySocket {
             value,
             updateValue
         });
+        // Optimistic update
+        this.#storage[key] = updatedArray;
+        this.#storageTimestamps[key] = this.#getTimestamp();
+        this.#triggerEvent("storageUpdated", { ...this.#storage });
+    }
+
+    /**
+     * Handle array operations client-side
+     * @private
+     */
+    #handleArrayUpdate(key, operation, value, updateValue) {
+        let array = (!this.#storage[key] || !Array.isArray(this.#storage[key])) ? [] : [...this.#storage[key]];
+        const isObject = typeof value === 'object' && value !== null;
+        const compare = (item) => isObject ? JSON.stringify(item) === JSON.stringify(value) : item === value;
+
+        switch (operation) {
+            case 'add':
+                array.push(value);
+                break;
+
+            case 'add-unique':
+                if (!array.some(compare)) array.push(value);
+                break;
+
+            case 'remove-matching':
+                array = array.filter(item => !compare(item));
+                break;
+
+            case 'update-matching':
+                const index = array.findIndex(compare);
+                if (index !== -1) array[index] = updateValue;
+                break;
+
+            default:
+                console.error(ERROR_PREFIX + `Unknown array operation: ${operation}`);
+        }
+
+        return array;
     }
 
     /**
@@ -449,6 +519,8 @@ class PlaySocket {
         clearTimeout(this.#reconnectTimeout);
         this.#roomHost = null;
         this.#storage = {};
+        this.#storageTimestamps = {};
+        this.#serverTimeOffset = 0;
         this.#roomId = null;
         this.#connectionCount = 0;
         this.#isReconnecting = false;
@@ -457,7 +529,7 @@ class PlaySocket {
 
     // Public getters
     get connectionCount() { return this.#connectionCount; }
-    get getStorage() { return { ...this.#storage }; }
+    get getStorage() { return JSON.parse(JSON.stringify(this.#storage)); }
     get isHost() { return this.#id == this.#roomHost; }
     get id() { return this.#id; }
 }

package/dist/playsocket-server.js

@@ -102,7 +102,7 @@ function requireServer () {
 	                    this.#clients.set(data.id, ws);
 	                    const sessionToken = this.#generateSessionToken();
 	                    this.#clientTokens.set(data.id, sessionToken); // Token is used when reconnecting to prevent impersonation attacks
-	                    ws.send(JSON.stringify({ type: 'registered', sessionToken }));
+	                    ws.send(JSON.stringify({ type: 'registered', sessionToken, serverTime: Date.now(), clientTime: data.clientTime }));
 	                    this.#triggerEvent("clientRegistered", data.id, data.customData);
 	                    break;
 
@@ -127,6 +127,7 @@ function requireServer () {
 	                        if (formerRoom) {
 	                            roomData = {
 	                                storage: formerRoom.storage,
+	                                storageTimestamps: formerRoom.storageTimestamps,
 	                                participantCount: formerRoom.participants.length,
 	                                host: formerRoom.participants[0]
 	                            };
@@ -152,7 +153,8 @@ function requireServer () {
 	                    this.#rooms[newRoomId] = {
 	                        participants: [ws.clientId],
 	                        maxSize: data.size || null,
-	                        storage: data.storage || {}
+	                        storage: data.storage || {},
+	                        storageTimestamps: {},
 	                    };
 
 	                    this.#clientRooms.set(ws.clientId, newRoomId);
@@ -184,6 +186,7 @@ function requireServer () {
 	                    ws.send(JSON.stringify({
 	                        type: 'join_accepted',
 	                        storage: room.storage,
+	                        storageTimestamps: room.storageTimestamps,
 	                        participantCount: room.participants.length,
 	                        host: room.participants[0]
 	                    }));
@@ -207,9 +210,11 @@ function requireServer () {
 	                    const updateRoomId = this.#clientRooms.get(ws.clientId);
 	                    const updateRoom = updateRoomId ? this.#rooms[updateRoomId] : null;
 	                    if (updateRoom && data.key) {
-	                        if (JSON.stringify(updateRoom.storage[data.key]) !== JSON.stringify(data.value)) {
+	                        const existingTimestamp = updateRoom.storageTimestamps[data.key] || 0;
+	                        if (data.timestamp > existingTimestamp && JSON.stringify(updateRoom.storage[data.key]) !== JSON.stringify(data.value)) {
 	                            updateRoom.storage[data.key] = data.value;
-	                            this.#syncRoomStorageKey(updateRoom, data.key, ws.clientId);
+	                            updateRoom.storageTimestamps[data.key] = data.timestamp;
+	                            this.#syncRoomStorageKey(updateRoom, data.key, data.timestamp);
 	                        }
 	                    }
 	                    break;
@@ -218,10 +223,12 @@ function requireServer () {
 	                    const arrayRoomId = this.#clientRooms.get(ws.clientId);
 	                    const arrayRoom = arrayRoomId ? this.#rooms[arrayRoomId] : null;
 	                    if (arrayRoom && data.key) {
+	                        // No timestamp check for array operations as they are designed to work unordered
 	                        const updatedArray = this.#arrayUpdate(arrayRoom.storage, data.key, data.operation, data.value, data.updateValue);
 	                        if (JSON.stringify(arrayRoom.storage[data.key]) !== JSON.stringify(updatedArray)) {
 	                            arrayRoom.storage[data.key] = updatedArray;
-	                            this.#syncRoomStorageKey(arrayRoom, data.key);
+	                            arrayRoom.storageTimestamps[data.key] = Date.now(); // Assign new date to ensure that this update is always being applied
+	                            this.#syncRoomStorageOperation(arrayRoom, ws.clientId, data.key, data.operation, data.value, data.updateValue, Date.now());
 	                        }
 	                    }
 	                    break;
@@ -277,19 +284,48 @@ function requireServer () {
 	    /**
 	     * Sync storage key with all clients in room
 	     * @private
-	     * @param {Object} room
+	     * @param {string} room
+	     * @param {string} requesterId - Client id of whom initiated the operation
 	     * @param {string} key 
-	     * @param {string} exclude
+	     * @param {number} timestamp - In milliseconds
 	     */
-	    #syncRoomStorageKey(room, key, exclude) {
+	    #syncRoomStorageKey(room, key, timestamp) {
 	        room?.participants?.forEach(p => {
-	            if (p === exclude) return;
 	            const client = this.#clients.get(p);
 	            if (client) {
 	                client.send(JSON.stringify({
 	                    type: 'storage_sync',
 	                    key,
-	                    value: room?.storage?.[key]
+	                    value: room?.storage[key],
+	                    timestamp
+	                }));
+	            }
+	        });
+	    }
+
+	    /**
+	     * Sync storage operations with all clients in room
+	     * @private
+	     * @param {string} room
+	     * @param {string} requesterId - Client id of whom initiated the operation
+	     * @param {string} key 
+	     * @param {string} operation 
+	     * @param {*} value 
+	     * @param {*} updateValue 
+	     * @param {number} timestamp - In milliseconds
+	     */
+	    #syncRoomStorageOperation(room, requesterId, key, operation, value, updateValue, timestamp) {
+	        room?.participants?.forEach(p => {
+	            if (p == requesterId) return; // Don't send the operation to the requester
+	            const client = this.#clients.get(p);
+	            if (client) {
+	                client.send(JSON.stringify({
+	                    type: 'storage_operation',
+	                    key,
+	                    operation,
+	                    value,
+	                    updateValue,
+	                    timestamp
 	                }));
 	            }
 	        });

package/package.json

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