node-red-contrib-snap4city-user/dashboard-web-socket.html

Nodes for Snap4city project, targeted to standard user (no developer)

<!--
  Copyright JS Foundation and other contributors, http://js.foundation

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<!-- dashboard-websocket-input Node -->
<script type="text/javascript">
    (function () {

        function ws_oneditprepare() {
            $("#dashboard-websocket-client-row").hide();
            $("#node-input-mode").change(function () {
                if ($("#node-input-mode").val() === 'client') {
                    $("#dashboard-websocket-server-row").hide();
                    $("#dashboard-websocket-client-row").show();
                } else {
                    $("#dashboard-websocket-server-row").show();
                    $("#dashboard-websocket-client-row").hide();
                }
            });

            if (this.client) {
                $("#node-input-mode").val('client').change();
            } else {
                $("#node-input-mode").val('server').change();
            }
        }

        function ws_oneditsave() {
            if ($("#node-input-mode").val() === 'client') {
                $("#node-input-server").append('<option value="">Dummy</option>');
                $("#node-input-server").val('');
            } else {
                $("#node-input-client").append('<option value="">Dummy</option>');
                $("#node-input-client").val('');
            }
        }

        function ws_label() {
            var nodeid = (this.client) ? this.client : this.server;
            var wsNode = RED.nodes.node(nodeid);
            return this.name || (wsNode ? "[ws] " + wsNode.label() : "websocket");
        }

        function ws_validateserver() {
            if ($("#node-input-mode").val() === 'client' || (this.client && !this.server)) {
                return true;
            } else {
                return RED.nodes.node(this.server) != null;
            }
        }

        function ws_validateclient() {
            if ($("#node-input-mode").val() === 'client' || (this.client && !this.server)) {
                return RED.nodes.node(this.client) != null;
            } else {
                return true;
            }
        }

        RED.nodes.registerType('dashboard-websocket-in', {
            category: 'S4CDashboard',
            defaults: {
                name: {
                    value: ""
                },
                server: {
                    type: "dashboard-websocket-listener",
                    validate: ws_validateserver
                },
                client: {
                    type: "dashboard-websocket-client",
                    validate: ws_validateclient
                }
            },
            color: "rgb(215, 215, 160)",
            inputs: 0,
            outputs: 1,
            icon: "white-globe.png",
            labelStyle: function () {
                return this.name ? "node_label_italic" : "";
            },
            label: ws_label,
            oneditsave: ws_oneditsave,
            oneditprepare: ws_oneditprepare
        });

        RED.nodes.registerType('dashboard-websocket-out', {
            category: 'S4CDashboard',
            defaults: {
                name: {
                    value: ""
                },
                server: {
                    type: "dashboard-websocket-listener",
                    validate: ws_validateserver
                },
                client: {
                    type: "dashboard-websocket-client",
                    validate: ws_validateclient
                }
            },
            color: "rgb(215, 215, 160)",
            inputs: 1,
            outputs: 0,
            icon: "white-globe.png",
            align: "right",
            labelStyle: function () {
                return this.name ? "node_label_italic" : "";
            },
            label: ws_label,
            oneditsave: ws_oneditsave,
            oneditprepare: ws_oneditprepare
        });

        RED.nodes.registerType('dashboard-websocket-listener', {
            category: 'config',
            defaults: {
                path: {
                    value: "",
                    required: true,
                    validate: RED.validators.regex(/^((?!\/debug\/ws).)*$/)
                },
                wholemsg: {
                    value: "false"
                }
            },
            inputs: 0,
            outputs: 0,
            label: function () {
                var root = RED.settings.httpNodeRoot;
                if (root.slice(-1) != "/") {
                    root = root + "/";
                }
                if (this.path.charAt(0) == "/") {
                    root += this.path.slice(1);
                } else {
                    root += this.path;
                }
                return root;
            },
            oneditprepare: function () {
                var root = RED.settings.httpNodeRoot;
                if (root.slice(-1) == "/") {
                    root = root.slice(0, -1);
                }
                if (root === "") {
                    $("#node-config-ws-tip").hide();
                } else {
                    $("#node-config-ws-path").html(root);
                    $("#node-config-ws-tip").show();
                }
            }
        });

        RED.nodes.registerType('dashboard-websocket-client', {
            category: 'config',
            defaults: {
                path: {
                    value: "",
                    required: true,
                    validate: RED.validators.regex(/^((?!\/debug\/ws).)*$/)
                },
                tls: {
                    type: "tls-config",
                    required: false
                },
                wholemsg: {
                    value: "false"
                }
            },
            inputs: 0,
            outputs: 0,
            label: function () {
                return this.path;
            },
            oneditprepare: function () {
                $("#node-config-input-path").on("change keyup paste", function () {
                    $(".node-config-row-tls").toggle(/^wss:/i.test($(this).val()))
                });
                $("#node-config-input-path").change();
            },
            oneditsave: function () {
                if (!/^wss:/i.test($("#node-config-input-path").val())) {
                    $("#node-config-input-tls").val("_ADD_");
                }
            }
        });

    })();
</script>

<!-- dashboard-websocket-in Node -->
<script type="text/x-red" data-template-name="dashboard-websocket-in">
    <div class="form-row">
        <label for="node-input-mode">
            <i class="fa fa-dot-circle-o"></i> Type</label>
        <select id="node-input-mode">
            <option value="server" data-i18n="websocket.listenon">Listen On</option>
            <option value="client" data-i18n="websocket.connectto">Connect To</option>
        </select>
    </div>
    <div class="form-row" id="dashboard-websocket-server-row">
        <label for="node-input-server">
            <i class="fa fa-bookmark"></i> Path</label>
        <input type="text" id="node-input-server">
    </div>
    <div class="form-row" id="dashboard-websocket-client-row">
        <label for="node-input-client">
            <i class="fa fa-bookmark"></i> URL</label>
        <input type="text" id="node-input-client">
    </div>
    <div class="form-row">
        <label for="node-input-name">
            <i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
    </div>
</script>

<script type="text/x-red" data-help-name="dashboard-websocket-in">
    <p>dashboard-websocket-input node.</p>
    <p>By default, the data received from the WebSocket will be in
        <code>msg.payload</code>. The socket can be configured to expect a properly formed JSON string, in which case it will parse
        the JSON and send on the resulting object as the entire message.</p>
</script>

<!-- dashboard-websocket-out Node -->
<script type="text/x-red" data-template-name="dashboard-websocket-out">
    <div class="form-row">
        <label for="node-input-mode">
            <i class="fa fa-dot-circle-o"></i> Type</label>
        <select id="node-input-mode">
            <option value="server" data-i18n="websocket.listenon">Listen On</option>
            <option value="client" data-i18n="websocket.connectto">Connect To</option>
        </select>
    </div>
    <div class="form-row" id="dashboard-websocket-server-row">
        <label for="node-input-server">
            <i class="fa fa-bookmark"></i> Path</label>
        <input type="text" id="node-input-server">
    </div>
    <div class="form-row" id="dashboard-websocket-client-row">
        <label for="node-input-client">
            <i class="fa fa-bookmark"></i> URL</label>
        <input type="text" id="node-input-client">
    </div>
    <div class="form-row">
        <label for="node-input-name">
            <i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
    </div>
</script>

<script type="text/x-red" data-help-name="dashboard-websocket-out">
    <p>dashboard-websocket-out node.</p>
    <p>By default,
        <code>msg.payload</code> will be sent over the WebSocket. The socket can be configured to encode the entire
        <code>msg</code> object as a JSON string and send that over the WebSocket.</p>

    <p>If the message arriving at this node started at a dashboard-websocket-in node, the message will be sent back to the client
        that triggered the flow. Otherwise, the message will be broadcast to all connected clients.</p>
    <p>If you want to broadcast a message that started at a dashboard-websocket-in node, you should delete the
        <code>msg._session</code> property within the flow.</p>
</script>

<!-- WebSocket Server configuration node -->
<script type="text/x-red" data-template-name="dashboard-websocket-listener">
    <div class="form-row">
        <label for="node-config-input-path">
            <i class="fa fa-bookmark"></i> Path</label>
        <input id="node-config-input-path" type="text" placeholder="/ws/example">
    </div>
    <div class="form-row">
        <label for="node-config-input-wholemsg">Send/Receive</label>
        <select type="text" id="node-config-input-wholemsg" style="width: 70%;">
            <option value="false" data-i18n="websocket.payload">payload</option>
            <option value="true" data-i18n="websocket.message">entire message</option>
        </select>
    </div>
    <div class="form-tips">
        By default,
        <code>payload</code> will contain the data to be sent over, or received from a websocket. The listener can be configured
        to send or receive the entire message object as a JSON formatted string.

        <p id="node-config-ws-tip">This path will be relative to
            <code>
                <span id="node-config-ws-path"></span>
            </code>.</p>
    </div>
</script>

<script type="text/x-red" data-help-name="dashboard-websocket-listener">
    <p>This configuration node creates a WebSocket Server endpoint using the specified path.</p>
</script>

<!-- WebSocket Client configuration node -->
<script type="text/x-red" data-template-name="dashboard-websocket-client">
    <div class="form-row">
        <label for="node-config-input-path">
            <i class="fa fa-bookmark"></i> URL</label>
        <input id="node-config-input-path" type="text" placeholder="ws://example.com/ws">
    </div>
    <div class="form-row node-config-row-tls hide">
        <label for="node-config-input-tls" data-i18n="httpin.tls-config"></label>
        <input type="text" id="node-config-input-tls">
    </div>

    <div class="form-row">
        <label for="node-config-input-wholemsg" data-i18n="websocket.sendrec">Send/Receive</label>
        <select type="text" id="node-config-input-wholemsg" style="width: 70%;">
            <option value="false" data-i18n="websocket.payload">payload</option>
            <option value="true" data-i18n="websocket.message">entire message</option>
        </select>
    </div>
    <div class="form-tips">
        <p>URL should use ws:// or wss:// scheme and point to an existing websocket listener.</p>
        By default,
        <code>payload</code> will contain the data to be sent over, or received from a websocket. The client can be configured
        to send or receive the entire message object as a JSON formatted string.
    </div>
</script>

<script type="text/x-red" data-help-name="dashboard-websocket-client">
    <p>This configuration node connects a WebSocket client to the specified URL.</p>
</script>