binary messages not working

Author: nvs119

packages/compass-web/polyfills/net/index.ts

@@ -7,6 +7,11 @@ import { Duplex } from 'stream';
  * used when running compass-web in a local sandbox, mms has their own
  * implementation
  */
+enum MESSAGE_TYPE {
+  JSON = 0x01,
+  BINARY = 0x02,
+}
+
 class Socket extends Duplex {
   private _ws: WebSocket | null = null;
   constructor() {
@@ -36,7 +41,7 @@ class Socket extends Duplex {
           ok: 1,
         });
         setTimeout(() => {
-          this._ws?.send(connectMsg);
+          this._ws?.send(this.encodeStringMessageWithTypeByte(connectMsg));
         });
       },
       { once: true }
@@ -49,10 +54,12 @@ class Socket extends Duplex {
     });
     this._ws.addEventListener(
       'message',
-      ({ data }: MessageEvent<string | ArrayBuffer>) => {
-        if (typeof data === 'string') {
+      ({ data }: MessageEvent<ArrayBuffer>) => {
+        const dataView = new Uint8Array(data);
+        if (dataView[0] === 0x01) {
           try {
-            const res = JSON.parse(data) as { preMessageOk: 1 };
+            const res = this.decodeMessageWithTypeByte(dataView);
+            // const res = JSON.parse(data) as { preMessageOk: 1 };
             if (res.preMessageOk) {
               setTimeout(() => {
                 this.emit(options.tls ? 'secureConnect' : 'connect');
@@ -64,7 +71,7 @@ class Socket extends Duplex {
           }
         } else {
           setTimeout(() => {
-            this.emit('data', Buffer.from(data));
+            this.emit('data', this.decodeMessageWithTypeByte(dataView));
           });
         }
       }
@@ -75,7 +82,8 @@ class Socket extends Duplex {
     // noop
   }
   _write(chunk: ArrayBufferLike, _encoding: BufferEncoding, cb: () => void) {
-    this._ws?.send(chunk);
+    // need this to change
+    this._ws?.send(this.encodeBinaryMessageWithTypeByte(new Uint8Array(chunk)));
     setTimeout(() => {
       cb();
     });
@@ -110,6 +118,37 @@ class Socket extends Duplex {
   setNoDelay() {
     return this;
   }
+
+  encodeStringMessageWithTypeByte(message: string) {
+    const utf8Encoder = new TextEncoder();
+    const utf8Array = utf8Encoder.encode(message);
+    return this.encodeMessageWithTypeByte(utf8Array, MESSAGE_TYPE.JSON);
+  }
+
+  encodeBinaryMessageWithTypeByte(message: Uint8Array) {
+    return this.encodeMessageWithTypeByte(message, MESSAGE_TYPE.BINARY);
+  }
+
+  encodeMessageWithTypeByte(message: Uint8Array, type: MESSAGE_TYPE) {
+    const encoded = new Uint8Array(message.length + 1);
+    encoded[0] = type;
+    encoded.set(message, 1);
+    return encoded;
+  }
+
+  decodeMessageWithTypeByte(message: Uint8Array) {
+    const typeByte = message[0];
+    if (typeByte === MESSAGE_TYPE.JSON) {
+      const jsonBytes = message.subarray(1);
+      const textDecoder = new TextDecoder('utf-8');
+      const jsonStr = textDecoder.decode(jsonBytes);
+      return JSON.parse(jsonStr);
+    }
+    // this has to change still too
+    else if (typeByte === MESSAGE_TYPE.BINARY) {
+      return message.subarray(1);
+    }
+  }
 }
 
 export { isIPv4, isIPv6 } from 'is-ip';

packages/compass-web/scripts/ws-proxy.js

@@ -29,9 +29,19 @@ function createWebSocketProxy(port = 1337, logger = console) {
         socket.write(data, 'binary');
       } else {
         // First message before socket is created is with connection info
-        const { tls: useSecureConnection, ...connectOptions } = JSON.parse(
-          data.toString()
-        );
+        const dataView = new Uint8Array(data);
+        const messageByte = dataView[0];
+        if (messageByte !== 0x01) {
+          logger.log('first message should have type byte,(%s)', evt, err);
+          ws.close(evt === 'close' ? 1001 : 1011);
+        }
+        const jsonBytes = dataView.subarray(1);
+        const jsonStr = new TextDecoder('utf-8').decode(jsonBytes);
+        console.log('pre message received on backend: ', jsonStr);
+        const { tls: useSecureConnection, ...connectOptions } =
+          JSON.parse(jsonStr);
+
+        // const { tls: useSecureConnection, ...connectOptions } = JSON.parse(data.toString);
         logger.log(
           'setting up new%s connection to %s:%s',
           useSecureConnection ? ' secure' : '',
@@ -61,10 +71,22 @@ function createWebSocketProxy(port = 1337, logger = console) {
             connectOptions.port
           );
           socket.setTimeout(0);
-          ws.send(JSON.stringify({ preMessageOk: 1 }));
+          const utf8Encoder = new TextEncoder();
+          const message = JSON.stringify({ preMessageOk: 1 });
+          const utf8Array = utf8Encoder.encode(message);
+
+          const encoded = new Uint8Array(utf8Array.length + 1);
+          encoded[0] = 0x01;
+          encoded.set(utf8Array, 1);
+          ws.send(encoded);
         });
         socket.on('data', async (data) => {
-          ws.send(data);
+          const encoded = new Uint8Array(data.length + 1);
+          encoded[0] = 0x02;
+          encoded.set(data, 1);
+          // ws.send(encoded);
+          logger.log(encoded);
+          ws.send(encoded);
         });
       }
     });