Combine sequential raw packets

Author: pimterry

src/model/raw-tunnel.ts

@@ -1,4 +1,4 @@
-import { observable } from 'mobx';
+import { action, observable } from 'mobx';
 
 import { InputRawPassthrough, InputRawPassthroughData } from '../types';
 import { HTKEventBase } from './events/event-base';
@@ -8,6 +8,8 @@ export interface RawTunnelMessage extends InputRawPassthroughData {
     isBinary: true;
 }
 
+const PACKET_COMBINE_LIMIT = 500_000;
+
 export class RawTunnel extends HTKEventBase {
 
     constructor(
@@ -35,9 +37,33 @@ export class RawTunnel extends HTKEventBase {
         return true;
     }
 
+    @observable
     readonly packets: StreamMessage[] = [];
 
+    @action
     addChunk(dataEvent: InputRawPassthroughData) {
+        const lastPacket = this.packets[this.packets.length - 1] as StreamMessage | undefined;
+
+        // Combine together small sequential packets from the same client within 10ms, to
+        // simplify & clarify busy streams
+        if (
+            lastPacket?.direction === dataEvent.direction &&
+            (dataEvent.eventTimestamp - lastPacket.timestamp < 10) &&
+            lastPacket.content.byteLength + dataEvent.content.byteLength < PACKET_COMBINE_LIMIT
+        ) {
+            this.packets[this.packets.length - 1] = new StreamMessage(
+                {
+                    id: this.id,
+                    direction: lastPacket.direction,
+                    eventTimestamp: lastPacket.timestamp, // Use the first packet in the chunk's timestamp
+                    content: Buffer.concat([lastPacket.content, dataEvent.content]),
+                    isBinary: true
+                },
+                this.packets.length
+            );
+            return;
+        }
+
         this.packets.push(
             new StreamMessage(Object.assign(dataEvent, { isBinary: true } as const), this.packets.length)
         );
@@ -46,6 +72,7 @@ export class RawTunnel extends HTKEventBase {
     @observable
     private open = true;
 
+    @action
     markClosed(closeEvent: InputRawPassthrough) {
         this.timingEvents.disconnectTimestamp = closeEvent.timingEvents.disconnectTimestamp;
         this.open = false;