WebSockets: decouple Message from MessageChannel

share/web_surfaces/builtin/mixer-demo/js/main.js

@@ -16,7 +16,7 @@
  * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
  */
 
-import { MessageChannel } from '/shared/channel.js';
+import { MessageChannel, Message } from '/shared/channel.js';
 
 import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
         StripPanSlider, StripGainSlider, StripMeter } from './widget.js';
@@ -33,18 +33,18 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
     main();
 
     function main () {
-        channel.messageCallback = (node, addr, val) => {
-            log(`↙ ${node} (${addr}) = ${val}`, 'message-in');
+        channel.messageCallback = (msg) => {
+            log(`↙ ${msg}`, 'message-in');
 
-            if (node == 'strip_desc') {
-                createStrip (addr, ...val);
-            } else if (node == 'strip_plugin_desc') {
-                createStripPlugin (addr, ...val);
-            } else if (node == 'strip_plugin_param_desc') {
-                createStripPluginParam (addr, ...val);
-            } else if (FEEDBACK_NODES.includes(node)) {
-                if (widgets[[node, addr]]) {
-                    widgets[[node, addr]].value = val[0];
+            if (msg.node == 'strip_desc') {
+                createStrip (msg.addr, ...msg.val);
+            } else if (msg.node == 'strip_plugin_desc') {
+                createStripPlugin (msg.addr, ...msg.val);
+            } else if (msg.node == 'strip_plugin_param_desc') {
+                createStripPluginParam (msg.addr, ...msg.val);
+            } else if (FEEDBACK_NODES.includes(msg.node)) {
+                if (widgets[[msg.node, msg.addr]]) {
+                    widgets[[msg.node, msg.addr]].value = msg.val[0];
                 }
             }
         };
@@ -127,9 +127,9 @@ import { Switch, DiscreteSlider, ContinuousSlider, LogarithmicSlider,
     }
 
     function send (widget) {
-        const val = widget.value;
-        log(`↗ ${widget.node} (${widget.addr}) = ${val}`, 'message-out');
-        channel.send(widget.node, widget.addr, [val]);
+        const msg = new Message(widget.node, widget.addr, [widget.value]);
+        log(`↗ ${msg}`, 'message-out');
+        channel.send(msg);
     }
 
     function createElem (html, parent) {

share/web_surfaces/builtin/mixer-demo/js/widget.js

@@ -39,7 +39,7 @@ export class Widget {
     }
 
     get hash () {
-        return [this.node, this.addr];
+        return [this.node].concat(this.addr).join('_');
     }
 
 }

share/web_surfaces/shared/channel.js

@@ -28,13 +28,23 @@ export class MessageChannel {
     open () {
         return new Promise((resolve, reject) => {
             this.socket = new WebSocket(`ws://${this.host}`);
+
             this.socket.onclose = () => this.closeCallback();
+
             this.socket.onerror = (error) => this.errorCallback(error);
-            this.socket.onmessage = (event) => this._onMessage(event);
+
+            this.socket.onmessage = (event) => {
+                this.messageCallback (Message.fromJsonText(event.data));
+            };
+
             this.socket.onopen = resolve;
         });
     }
 
+    send (msg) {
+        this.socket.send(msg.toJsonText());
+    }
+
     closeCallback () {
         // empty
     }
@@ -43,36 +53,58 @@ export class MessageChannel {
         // empty
     }
 
-    messageCallback (node, addr, val) {
+    messageCallback (msg) {
         // empty
     }
 
-    send (node, addr, val) {
+}
+
+
+export class Message {
+
+    constructor (node, addr, val) {
+        this.node = node;
+        this.addr = addr;
+        this.val = [];
+
         for (const i in val) {
-            if (val[i] == Infinity) {
-                val[i] = JSON_INF;
-            } else if (val[i] == -Infinity) {
-                val[i] = -JSON_INF;
+            if (val[i] >= JSON_INF) {
+                this.val.push(Infinity);
+            } else if (val[i] <= -JSON_INF) {
+                this.val.push(-Infinity);
+            } else {
+                this.val.push(val[i]);
+            }
+        }
+    }
+
+    toJsonText () {
+        let val = [];
+
+        for (const i in this.val) {
+            if (this.val[i] == Infinity) {
+                val.push(JSON_INF);
+            } else if (this.val[i] == -Infinity) {
+                val.push(-JSON_INF);
+            } else {
+                val.push(this.val[i]);
             }
         }
         
-        const json = JSON.stringify({node: node, addr: addr, val: val});
-
-        this.socket.send(json);
+        return JSON.stringify({node: this.node, addr: this.addr, val: val});
     }
 
-    _onMessage (event) {
-        const msg = JSON.parse(event.data);
+    get hash () {
+        return [this.node].concat(this.addr).join('_');
+    }
 
-        for (const i in msg.val) {
-            if (msg.val[i] >= JSON_INF) {
-                msg.val[i] = Infinity;
-            } else if (msg.val[i] <= -JSON_INF) {
-                msg.val[i] = -Infinity;
-            }
-        }
-
-        this.messageCallback(msg.node, msg.addr || [], msg.val);
+    toString () {
+        return `${this.node} (${this.addr}) = ${this.val}`;
     }
 
 }
+
+Message.fromJsonText = (jsonText) => {
+    let rawMsg = JSON.parse(jsonText);
+    return new Message(rawMsg.node, rawMsg.addr || [], rawMsg.val);
+};