Some improvements

resources/js/net/NetworkClient.js

@@ -66,9 +66,9 @@ export class NetworkClient {
     this.currAt = 0;
 
     this.socket.subscribe(this._snapshotChannel(), {
-      onEvent: (event, payload) => {
+      onEvent: (event, payload, rawBytes) => {
         if (event === 'snapshot') {
-          this._ingest(payload);
+          this._ingest(payload, rawBytes);
         } else if (event === 'room-error') {
           this.onRoomError?.(payload);
         }
@@ -188,13 +188,14 @@ export class NetworkClient {
     });
   }
 
-  _ingest(payload) {
+  _ingest(payload, rawBytes = 0) {
     if (this.curr && payload.seq !== undefined && this.curr.seq !== undefined && payload.seq <= this.curr.seq) {
       return;
     }
     this.prev = this.curr;
     this.prevAt = this.currAt;
     this.curr = payload;
+    this.curr.bytes = rawBytes;
     this.currAt = performance.now();
   }
 }

resources/js/net/SocketClient.js

@@ -42,7 +42,8 @@ export class SocketClient {
       } catch {
         return;
       }
-      this._handle(msg);
+      const rawBytes = typeof event.data === 'string' ? new Blob([event.data]).size : 0;
+      this._handle(msg, rawBytes);
     };
 
     socket.onclose = () => {
@@ -76,7 +77,7 @@ export class SocketClient {
     this.socketId = null;
   }
 
-  _handle(msg) {
+  _handle(msg, rawBytes = 0) {
     const { event, channel } = msg;
 
     if (event === 'pusher:connection_established') {
@@ -117,7 +118,7 @@ export class SocketClient {
           return;
         }
       }
-      this.handlers.get(channel)?.onEvent?.(event, payload);
+      this.handlers.get(channel)?.onEvent?.(event, payload, rawBytes);
     }
   }