Improve server -> client worldstate communication; 20.8 KBps*n -> 2.4…

… KBps*n (88%)
nickyvanurk · Jun 18, 2019 · 0ea57c4 · 0ea57c4
1 parent 5e2af08
commit 0ea57c4
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 27 deletions.
diff --git a/app.js b/app.js
@@ -9,6 +9,12 @@ const app = express();
 
 app.use(express.static('public'));
 
+const command = {
+  initClient: 0,
+  initWorld: 1,
+  worldState: 2
+};
+
 class Vector3 {
   constructor(x, y, z) {
     this.x = x;
@@ -406,17 +412,51 @@ class Server {
 
   sendWorldState() {
     let worldState = [];
+
     for (let id in this.players) {
       let player = this.players[id];
 
-      let playerPos = {x: player.position.x, y: player.position.y, z: player.position.z};
-      let playerRot = {x: player.rotation.x, y: player.rotation.y, z: player.rotation.z, w: player.rotation.w};
+      worldState.push([
+        player.id,
+        player.position.x,
+        player.position.y,
+        player.position.z,
+        player.rotation.x,
+        player.rotation.y,
+        player.rotation.z,
+        player.rotation.w,
+        this.lastProcessedInput[id],
+        player.health,
+        player.speed,
+        player.rollSpeed,
+        player.yaw,
+        player.pitch,
+        player.kills
+      ]);
+    }
+
+    const worldStateFields = 15;
+
+    const num_elements = 1 + worldState.length * worldStateFields;
+
+    const buffer = new ArrayBuffer(num_elements * 4);
+    const array = new Float32Array(buffer);
 
-      worldState.push([player.id, playerPos, playerRot, this.lastProcessedInput[id], player.health,
-        player.speed, player.rollSpeed, player.yaw, player.pitch, player.kills]);
+    array[0] = command.worldState;
+
+    for (let i = 0; i < worldState.length; i++) {
+      for (let j = 0; j < worldState[i].length; j++) {
+        array[1+i*worldStateFields+j] = worldState[i][j];
+      }
+    }
+
+    for (const key in this.clients) {
+      if (this.clients[key].readyState === WebSocket.OPEN) {
+        this.clients[key].send(array);
+      }
     }
 
-    this.broadcast({type: 'worldState', states: worldState});
+    // this.broadcast({type: 'worldState', states: worldState});  240*2 bytes per player
   }
 
   setUpdateRate(hz) {

diff --git a/public/js/client.js b/public/js/client.js
@@ -313,19 +313,32 @@ class Client {
         this.destroyBullet(msg.id);
     }
 
-    onWorldState(msg) {
-        for (let i = 0; i < msg.states.length; i++) {
+    onWorldState(message) {
+        var array = new Float32Array(message);
+
+        const worldStateFields = 15;
+
+        for (let i = 0; i < (array.length-1)/worldStateFields; i++) {
             let state = {
-                id: msg.states[i][0],
-                position: msg.states[i][1],
-                rotation: msg.states[i][2],
-                lastProcessedInput: msg.states[i][3],
-                health: msg.states[i][4],
-                speed: msg.states[i][5],
-                rollSpeed: msg.states[i][6],
-                yaw: msg.states[i][7],
-                pitch: msg.states[i][8],
-                kills: msg.states[i][9]
+                id: array[1+i*worldStateFields],
+                position: {
+                    x: array[1+i*worldStateFields + 1],
+                    y: array[1+i*worldStateFields + 2],
+                    z: array[1+i*worldStateFields + 3]
+                },
+                rotation: {
+                    x: array[1+i*worldStateFields + 4],
+                    y: array[1+i*worldStateFields + 5],
+                    z: array[1+i*worldStateFields + 6],
+                    w: array[1+i*worldStateFields + 7],
+                },
+                lastProcessedInput: array[1+i*worldStateFields + 8],
+                health: array[1+i*worldStateFields + 9],
+                speed: array[1+i*worldStateFields + 10],
+                rollSpeed: array[1+i*worldStateFields + 11],
+                yaw: array[1+i*worldStateFields + 12],
+                pitch: array[1+i*worldStateFields + 13],
+                kills: array[1+i*worldStateFields + 14]
             };
 
             if (!this.players[state.id]) continue;

diff --git a/public/js/network-manager.js b/public/js/network-manager.js
@@ -24,17 +24,20 @@ class NetworkManager {
     }
 
     processServerMessages(event) {
-        let msg = JSON.parse(event.data);
+        if (typeof event.data === 'string') {
+            let msg = JSON.parse(event.data);
 
-        switch (msg.type) {
-            case 'initClient': this.client.onInitClient(msg); break;
-            case 'initWorld': this.client.onInitWorld(msg); break;
-            case 'message': this.client.onMessage(msg); break;
-            case 'addPlayer': this.client.onAddPlayer(msg); break;
-            case 'removePlayer': this.client.onRemovePlayer(msg); break;
-            case 'addBullet': this.client.onAddBullet(msg); break;
-            case 'removeBullet': this.client.onRemoveBullet(msg); break;
-            case 'worldState': this.client.onWorldState(msg); break;
+            switch (msg.type) {
+                case 'initClient': this.client.onInitClient(msg); break;
+                case 'initWorld': this.client.onInitWorld(msg); break;
+                case 'message': this.client.onMessage(msg); break;
+                case 'addPlayer': this.client.onAddPlayer(msg); break;
+                case 'removePlayer': this.client.onRemovePlayer(msg); break;
+                case 'addBullet': this.client.onAddBullet(msg); break;
+                case 'removeBullet': this.client.onRemoveBullet(msg); break;
+            }
+        } else {
+            this.client.onWorldState(event.data);
         }
     }