playsocketjs 1.0.6 → 1.0.7

package/dist/playsocket-client.js

@@ -16,10 +16,12 @@ class PlaySocket {
 
     // Room properties
     #storage = {}; // Shared storage object
+    #storageTimestamps = {}; // Tracks update timestamps per key
     #isHost = false; // Whether this client is host
     #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
@@ -55,6 +57,14 @@ class PlaySocket {
         );
     }
 
+    /**
+     * Get synchronized timestamp
+     * @private
+     */
+    #getTimestamp() {
+        return Date.now() + this.#serverTimeOffset;
+    }
+
     /**
      * Register an event callback
      * @param {string} event - Event name
@@ -119,7 +129,8 @@ class PlaySocket {
                 this.#sendToServer({
                     type: 'register',
                     id: this.#id,
-                    customData: this.#customData || undefined
+                    customData: this.#customData || undefined,
+                    clientTime: Date.now()
                 });
             };
         });
@@ -140,6 +151,7 @@ class PlaySocket {
                         // Connected to room
                         if (this.#pendingJoin) {
                             this.#storage = message.storage;
+                            this.#storageTimestamps = message.storageTimestamps;
                             this.#connectionCount = message.participantCount - 1;
                             this.#triggerEvent("status", `Connected to room.`);
                             this.#triggerEvent("storageUpdated", { ...this.#storage });
@@ -184,6 +196,9 @@ class PlaySocket {
 
                     case 'registered':
                         if (this.#pendingInit) {
+                            const roundTripTime = Date.now() - message.clientTime;
+                            const serverTimeAtClientNow = message.serverTime + (roundTripTime / 2);
+                            this.#serverTimeOffset = serverTimeAtClientNow - Date.now();
                             this.#pendingInit.resolve();
                             this.#triggerEvent("status", "Connected to server.");
                             this.#pendingInit = null;
@@ -191,9 +206,13 @@ class PlaySocket {
                         break;
 
                     case 'storage_sync':
-                        if (message.key && JSON.stringify(this.#storage[message.key]) !== JSON.stringify(message.value)) {
-                            this.#storage[message.key] = message.value;
-                            this.#triggerEvent("storageUpdated", { ...this.#storage });
+                        if (message.key) {
+                            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;
 
@@ -333,12 +352,15 @@ 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
         });
         this.#storage[key] = value;
+        this.#storageTimestamps[key] = timestamp;
         this.#triggerEvent("storageUpdated", { ...this.#storage });
     }
 
@@ -360,6 +382,7 @@ class PlaySocket {
             updateValue
         });
         this.#storage[key] = updatedArray;
+        this.#storageTimestamps[key] = this.#getTimestamp();
         this.#triggerEvent("storageUpdated", { ...this.#storage });
     }
 
@@ -416,6 +439,7 @@ class PlaySocket {
         this.#isHost = false;
         this.#roomHost = null;
         this.#storage = {};
+        this.#storageTimestamps = {};
         this.#roomId = null;
         this.#connectionCount = 0;
         clearTimeout(this.#reconnectTimeout);

package/dist/playsocket-server.js

@@ -98,7 +98,7 @@ function requireServer () {
 	                    }
 	                    ws.clientId = data.id; // Adds the provided id to the ws object as clientId
 	                    this.#clients.set(data.id, ws);
-	                    ws.send(JSON.stringify({ type: 'registered' }));
+	                    ws.send(JSON.stringify({ type: 'registered', serverTime: Date.now(), clientTime: data.clientTime }));
 	                    this.#triggerEvent("clientRegistered", data.id, data.customData);
 	                    break;
 
@@ -117,6 +117,7 @@ function requireServer () {
 	                        participants: [ws.clientId],
 	                        maxSize: data.size || null,
 	                        storage: data.storage || {},
+	                        storageTimestamps: {},
 	                    };
 
 	                    this.#clientRooms.set(ws.clientId, newRoomId);
@@ -148,6 +149,7 @@ function requireServer () {
 	                    ws.send(JSON.stringify({
 	                        type: 'connection_accepted',
 	                        storage: room.storage,
+	                        storageTimestamps: room.storageTimestamps,
 	                        participantCount: room.participants.length
 	                    }));
 
@@ -169,9 +171,13 @@ function requireServer () {
 	                case 'room_storage_update':
 	                    const updateRoomId = this.#clientRooms.get(ws.clientId);
 	                    const updateRoom = updateRoomId ? this.#rooms[updateRoomId] : null;
-	                    if (updateRoom && data.key && JSON.stringify(updateRoom.storage[data.key]) !== JSON.stringify(data.value)) {
-	                        updateRoom.storage[data.key] = data.value;
-	                        this.#syncRoomStorageKey(updateRoomId, data.key);
+	                    if (updateRoom && data.key) {
+	                        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;
+	                            updateRoom.storageTimestamps[data.key] = data.timestamp;
+	                            this.#syncRoomStorageKey(updateRoomId, data.key, data.timestamp);
+	                        }
 	                    }
 	                    break;
 
@@ -182,7 +188,8 @@ function requireServer () {
 	                        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(arrayRoomId, data.key);
+	                            arrayRoom.storageTimestamps[data.key] = Date.now(); // New date to ensure that they are applied regardless of age (they don't overwrite – they transform)
+	                            this.#syncRoomStorageKey(arrayRoomId, data.key, Date.now());
 	                        }
 	                    }
 	                    break;
@@ -224,7 +231,7 @@ function requireServer () {
 	     * Sync storage key to all clients in room
 	     * @private
 	     */
-	    #syncRoomStorageKey(roomId, key) {
+	    #syncRoomStorageKey(roomId, key, timestamp) {
 	        const room = this.#rooms[roomId];
 	        if (!room) return;
 	        room.participants.forEach(p => {
@@ -233,7 +240,8 @@ function requireServer () {
 	                client.send(JSON.stringify({
 	                    type: 'storage_sync',
 	                    key,
-	                    value: room.storage[key]
+	                    value: room.storage[key],
+	                    timestamp
 	                }));
 	            }
 	        });

package/package.json

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