From 22199e8845c08b707c2a547cf262b94342ffc646 Mon Sep 17 00:00:00 2001 From: Luciano Iam Date: Sun, 12 Apr 2020 12:01:41 +0200 Subject: WebSockets: decouple Message from MessageChannel --- share/web_surfaces/builtin/mixer-demo/js/main.js | 32 +++++----- share/web_surfaces/builtin/mixer-demo/js/widget.js | 2 +- share/web_surfaces/shared/channel.js | 70 ++++++++++++++++------ 3 files changed, 68 insertions(+), 36 deletions(-) (limited to 'share') diff --git a/share/web_surfaces/builtin/mixer-demo/js/main.js b/share/web_surfaces/builtin/mixer-demo/js/main.js index 081aa722f3..703448d7bc 100644 --- a/share/web_surfaces/builtin/mixer-demo/js/main.js +++ b/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'); - - 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]; + channel.messageCallback = (msg) => { + log(`↙ ${msg}`, 'message-in'); + + 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) { diff --git a/share/web_surfaces/builtin/mixer-demo/js/widget.js b/share/web_surfaces/builtin/mixer-demo/js/widget.js index 1d5cab22b9..45231cff18 100644 --- a/share/web_surfaces/builtin/mixer-demo/js/widget.js +++ b/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('_'); } } diff --git a/share/web_surfaces/shared/channel.js b/share/web_surfaces/shared/channel.js index ada2485b7f..4bb3c10ade 100644 --- a/share/web_surfaces/shared/channel.js +++ b/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]); } } - - const json = JSON.stringify({node: node, addr: addr, val: val}); - - this.socket.send(json); } - _onMessage (event) { - const msg = JSON.parse(event.data); + toJsonText () { + let val = []; - 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; + 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]); } } + + return JSON.stringify({node: this.node, addr: this.addr, val: val}); + } + + get hash () { + return [this.node].concat(this.addr).join('_'); + } - 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); +}; -- cgit v1.2.3