Add: Protocol structures can now contain strings (#336)

* Modify message struct: no need for byteLength; strings are now supported as a type

* Remove TwoWayMap as it's no longer needed. Add getter for streamer handlers

* Fix keyup sending too many args

* Update log message to print js types. Update default protocol

* Register handler for TextboxEntry. Add check to make sure handler is defined when registering for a fromStreamer message

* Remove unncessary import from player.ts

* Update data type to reflect that it could contain strings

Frontend/implementations/typescript/src/player.ts

@@ -15,6 +15,7 @@ document.body.onload = function() {
 
 	// Create a Native DOM delegate instance that implements the Delegate interface class
 	const stream = new PixelStreaming(config);
+
 	const application = new Application({
 		stream,
 		onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode)

Frontend/library/src/Inputs/KeyboardController.ts

@@ -232,10 +232,7 @@ export class KeyboardController {
         Logger.Log(Logger.GetStackTrace(), `key up ${keyCode}`, 6);
         const toStreamerHandlers =
             this.toStreamerMessagesProvider.toStreamerHandlers;
-        toStreamerHandlers.get('KeyUp')([
-            keyCode,
-            keyboardEvent.repeat ? 1 : 0
-        ]);
+        toStreamerHandlers.get('KeyUp')([ keyCode ]);
 
         if (
             this.config.isFlagEnabled(Flags.SuppressBrowserKeys) &&

Frontend/library/src/PixelStreaming/PixelStreaming.ts

@@ -30,6 +30,7 @@ import {
 } from '../Util/EventEmitter';
 import { MessageOnScreenKeyboard } from '../WebSockets/MessageReceive';
 import { WebXRController } from '../WebXR/WebXRController';
+import { MessageDirection } from '../UeInstanceMessage/StreamMessageController';
 
 export interface PixelStreamingOverrides {
     /** The DOM elment where Pixel Streaming video and user input event handlers are attached to.
@@ -732,4 +733,33 @@ export class PixelStreaming {
     public get webXrController() {
         return this._webXrController;
     }
+
+    public registerMessageHandler(name: string, direction: MessageDirection, handler?: (data: ArrayBuffer | Array<number | string>) => void) {
+        if(direction === MessageDirection.FromStreamer && typeof handler === 'undefined') {
+            Logger.Warning(Logger.GetStackTrace(), `Unable to register an undefined handler for ${name}`)
+            return;
+        }
+
+        if(direction === MessageDirection.ToStreamer && typeof handler === 'undefined') {
+            this._webRtcController.streamMessageController.registerMessageHandler(
+                direction,
+                name,
+                (data: Array<number | string>) =>
+                this._webRtcController.sendMessageController.sendMessageToStreamer(
+                    name,
+                    data
+                )
+            );
+        } else {
+            this._webRtcController.streamMessageController.registerMessageHandler(
+                direction,
+                name,
+                (data: ArrayBuffer) => handler(data)
+            );
+        }
+    }
+
+    public get toStreamerHandlers() {
+        return this._webRtcController.streamMessageController.toStreamerHandlers;
+    }
 }

Frontend/library/src/UeInstanceMessage/SendMessageController.ts

@@ -26,14 +26,14 @@ export class SendMessageController {
      * @param messageData - the message data we are sending over the data channel
      * @returns - nil
      */
-    sendMessageToStreamer(messageType: string, messageData?: Array<number>) {
+    sendMessageToStreamer(messageType: string, messageData?: Array<number | string>) {
         if (messageData === undefined) {
             messageData = [];
         }
 
         const toStreamerMessages =
             this.toStreamerMessagesMapProvider.toStreamerMessages;
-        const messageFormat = toStreamerMessages.getFromKey(messageType);
+        const messageFormat = toStreamerMessages.get(messageType);
         if (messageFormat === undefined) {
             Logger.Error(
                 Logger.GetStackTrace(),
@@ -42,39 +42,100 @@ export class SendMessageController {
             return;
         }
 
-        const data = new DataView(
-            new ArrayBuffer(messageFormat.byteLength + 1)
-        );
+        if(messageFormat.structure && messageData && messageFormat.structure.length !== messageData.length) {
+            Logger.Error(
+                Logger.GetStackTrace(),
+                `Provided message data doesn't match expected layout. Expected [ ${messageFormat.structure.map((element: string) => {
+                    switch (element) {
+                        case 'uint8':
+                        case 'uint16':
+                        case 'int16':
+                        case 'float':
+                        case 'double':
+                            return 'number';
+                        case 'string':
+                            return 'string';
+                    }
+                }).toString() } ] but received [ ${messageData.map((element: number | string) => typeof element).toString()} ]`
+            );
+            return;
+        }
+
+        let byteLength = 0;
+        const textEncoder = new TextEncoder();
+        // One loop to calculate the length in bytes of all of the provided data
+        messageData.forEach((element: number | string, idx: number) => {
+            const type = messageFormat.structure[idx];
+            switch (type) {
+                case 'uint8':
+                    byteLength += 1;
+                    break;
+
+                case 'uint16':
+                    byteLength += 2;
+                    break;
+
+                case 'int16':
+                    byteLength += 2;
+                    break;
+
+                case 'float':
+                    byteLength += 4;
+                    break;
+
+                case 'double':
+                    byteLength += 8;
+                    break;
+
+                case 'string':
+                    // 2 bytes for string length
+                    byteLength += 2;
+                    // 2 bytes per characters
+                    byteLength += 2 * textEncoder.encode(element as string).length;
+                    break;
+            }
+        });
+
+        const data = new DataView(new ArrayBuffer(byteLength + 1));
         data.setUint8(0, messageFormat.id);
         let byteOffset = 1;
 
-        messageData.forEach((element: number, idx: number) => {
+        messageData.forEach((element: number | string, idx: number) => {
             const type = messageFormat.structure[idx];
             switch (type) {
                 case 'uint8':
-                    data.setUint8(byteOffset, element);
+                    data.setUint8(byteOffset, element as number);
                     byteOffset += 1;
                     break;
 
                 case 'uint16':
-                    data.setUint16(byteOffset, element, true);
+                    data.setUint16(byteOffset, element as number, true);
                     byteOffset += 2;
                     break;
 
                 case 'int16':
-                    data.setInt16(byteOffset, element, true);
+                    data.setInt16(byteOffset, element as number, true);
                     byteOffset += 2;
                     break;
 
                 case 'float':
-                    data.setFloat32(byteOffset, element, true);
+                    data.setFloat32(byteOffset, element as number, true);
                     byteOffset += 4;
                     break;
 
                 case 'double':
-                    data.setFloat64(byteOffset, element, true);
+                    data.setFloat64(byteOffset, element as number, true);
                     byteOffset += 8;
                     break;
+
+                case 'string':
+                    data.setUint16(byteOffset, (element as string).length, true);
+                    byteOffset += 2;
+                    for (let i = 0; i < (element as string).length; i++) {
+                        data.setUint16(byteOffset, (element as string).charCodeAt(i), true);
+                        byteOffset += 2;
+                    }
+                    break;
             }
         });
 
@@ -86,8 +147,8 @@ export class SendMessageController {
                 )}`
             );
             return;
-        } else {
-            this.dataChannelSender.sendData(data.buffer);
         }
+
+        this.dataChannelSender.sendData(data.buffer);
     }
 }