feat: packetsToSend

client/app.js

@@ -96,6 +96,7 @@ export class App extends decorate(class {}) {
     // this.AugmentedParser = augmentParserWithThroughput(SocketIoParser);
     this.hasReceivedState = false;
     this.isConnected = false;
+    this.packetsToSend = [];
     this.socket = undefined;
     // Simulation.
     this.tps = new CycleTracker(config.simulationFrequency);
@@ -210,6 +211,26 @@ export class App extends decorate(class {}) {
     return reactContainer;
   }
 
+  sendPackets() {
+    // Merge.
+    const packetMergeMap = new Map();
+    for (let i = 0; i < this.packetsToSend.length; i++) {
+      const packet = this.packetsToSend[i];
+      const Packet = packet.constructor;
+      if (!packetMergeMap.has(Packet)) {
+        packetMergeMap.set(Packet, packet);
+        continue;
+      }
+      packetMergeMap.get(Packet).mergeWith(packet);
+    }
+    const packetList = Array.from(packetMergeMap.values());
+    for (let i = 0; i < packetList.length; i++) {
+      const packet = packetList[i];
+      this.socket.send(packet);
+    }
+    this.packetsToSend = [];
+  }
+
   eventIsInUi(event) {
     let walk = event.target;
     while (walk) {
@@ -451,7 +472,7 @@ export class App extends decorate(class {}) {
     this.inputHandle = setInterval(() => {
       if (this.actionState !== this.actionRegistry.state) {
         this.actionState = this.actionRegistry.state;
-        this.socket.send(InputPacket.fromState(this.actionState));
+        this.packetsToSend.push(InputPacket.fromState(this.actionState));
       }
     }, 1000 * config.inputFrequency);
     // Mouse/touch movement.
@@ -515,6 +536,8 @@ export class App extends decorate(class {}) {
       // Tick synchronized.
       this.synchronizer.tick(elapsed);
       this.state = this.synchronizer.state;
+      // Emit packets.
+      this.sendPackets();
       // Sample.
       this.tps.sample(elapsed);
     }, 1000 * config.simulationFrequency);