diff --git a/app/client/local.js b/app/client/local.js index 42417fb..36405ba 100644 --- a/app/client/local.js +++ b/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); } } diff --git a/app/client/remote.js b/app/client/remote.js index 243081e..4747b95 100644 --- a/app/client/remote.js +++ b/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); } diff --git a/app/net/client.js b/app/net/client.js index 1d79f9d..f7be2a1 100644 --- a/app/net/client.js +++ b/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); diff --git a/app/react/components/devtools.jsx b/app/react/components/devtools.jsx index a8f65ca..4896bbd 100644 --- a/app/react/components/devtools.jsx +++ b/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({
+
{Math.round(((client.throughput.down * 8) / 1024) * 10) / 10}kb/s
+
{Math.round(((client.throughput.up * 8) / 1024) * 10) / 10}kb/s
{mainEntityJson}