dev: measure throughput

app/client/local.js

@@ -12,6 +12,7 @@ export default class LocalClient extends Client {
         this.worker = undefined;
         return;
       }
+      this.throughput.$$down += event.data.byteLength;
       this.accept(event.data);
     });
   }
@@ -19,6 +20,7 @@ export default class LocalClient extends Client {
     this.worker.postMessage(0);
   }
   transmit(packed) {
+    this.throughput.$$up += packed.byteLength;
     this.worker.postMessage(packed);
   }
 }

app/client/remote.js

@@ -21,6 +21,7 @@ export default class RemoteClient extends Client {
       );
       this.worker.postMessage({host});
       this.worker.onmessage = (event) => {
+        this.throughput.$$down += event.data.byteLength;
         this.accept(event.data);
       };
     }
@@ -29,6 +30,7 @@ export default class RemoteClient extends Client {
       this.socket = new WebSocket(url.href);
       this.socket.binaryType = 'arraybuffer';
       const onMessage = (event) => {
+        this.throughput.$$down += event.data.byteLength;
         this.accept(event.data);
       }
       const {promise, resolve} = withResolvers();
@@ -54,6 +56,7 @@ export default class RemoteClient extends Client {
     }
   }
   transmit(packed) {
+    this.throughput.$$up += packed.byteLength;
     if (CLIENT_PREDICTION) {
       this.worker.postMessage(packed);
     }

app/net/client.js

@@ -2,8 +2,15 @@ import {CLIENT_LATENCY} from '@/util/constants.js';
 import EventEmitter from '@/util/event-emitter.js';
 
 export default class Client {
+  emitter = new EventEmitter();
+  throughput = {$$down: 0, down: 0, $$up: 0, up: 0};
   constructor() {
-    this.emitter = new EventEmitter();
+    setInterval(() => {
+      const {throughput} = this;
+      throughput.down = throughput.$$down * 4;
+      throughput.up = throughput.$$up * 4;
+      throughput.$$down = throughput.$$up = 0;
+    }, 250);
   }
   accept(packet) {
     this.emitter.invoke(packet.type, packet.payload);

app/react/components/devtools.jsx

@@ -2,6 +2,7 @@ import {useCallback, useState} from 'react';
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 import 'react-tabs/style/react-tabs.css';
 
+import {useClient} from '@/react/context/client.js';
 import {useEcsTick} from '@/react/context/ecs.js';
 import {useMainEntity} from '@/react/context/main-entity.js';
 
@@ -12,6 +13,7 @@ import Tiles from './devtools/tiles.jsx';
 export default function Devtools({
   eventsChannel,
 }) {
+  const client = useClient();
   const [mainEntity] = useMainEntity();
   const [mainEntityJson, setMainEntityJson] = useState('');
   const onEcsTick = useCallback((payload, ecs) => {
@@ -32,6 +34,8 @@ export default function Devtools({
           <div className={styles.dashboard}>
             <form>
               <div className={styles.engineBar}>
+                <div>{Math.round(((client.throughput.down * 8) / 1024) * 10) / 10}kb/s</div>
+                <div>{Math.round(((client.throughput.up * 8) / 1024) * 10) / 10}kb/s</div>
               </div>
             </form>
             <pre><code><small>{mainEntityJson}</small></code></pre>