Node red websocket multiple data send to web page

I can send single data from node-red to web page using the following flow.

[{"id":"38ea9d64.e96db2","type":"inject","z":"39ebd91b.6a6e86","name":"","topic":"","payload":"111111","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":390,"y":600,"wires":[["f62a5c2f.d369c"]]},{"id":"b1d1ac47.e9935","type":"inject","z":"39ebd91b.6a6e86","name":"","topic":"","payload":"222222","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":390,"y":640,"wires":[["f62a5c2f.d369c"]]},{"id":"9d9e3a29.ad0138","type":"inject","z":"39ebd91b.6a6e86","name":"","topic":"","payload":"333333","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":390,"y":680,"wires":[["f62a5c2f.d369c"]]},{"id":"e935218b.0c0ea","type":"inject","z":"39ebd91b.6a6e86","name":"","topic":"","payload":"444444","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":390,"y":720,"wires":[["f62a5c2f.d369c"]]},{"id":"29a418ba.f4cec8","type":"inject","z":"39ebd91b.6a6e86","name":"","topic":"","payload":"555555","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":390,"y":760,"wires":[["f62a5c2f.d369c"]]},{"id":"745cf76c.af8328","type":"websocket out","z":"39ebd91b.6a6e86","name":"","server":"f2759208.7a31c","client":"","x":980,"y":700,"wires":[]},{"id":"162f6aa5.806805","type":"http response","z":"39ebd91b.6a6e86","name":"","x":1050,"y":620,"wires":[]},{"id":"fbec4733.43eb38","type":"http in","z":"39ebd91b.6a6e86","name":"","url":"/simple","method":"get","swaggerDoc":"","x":681,"y":620,"wires":[["1a22a1f0.a9d29e"]]},{"id":"1a22a1f0.a9d29e","type":"template","z":"39ebd91b.6a6e86","name":"Simple Web Page","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n    <head>\n    <title>Simple Live Display</title>\n    <script type=\"text/javascript\">\n        var ws;\n        var wsUri = \"ws:\";\n        var loc = window.location;\n        console.log(loc);\n        if (loc.protocol === \"https:\") { wsUri = \"wss:\"; }\n        // This needs to point to the web socket in the Node-RED flow\n        // ... in this case it's ws/simple\n        wsUri += \"//\" + loc.host + loc.pathname.replace(\"simple\",\"ws/simple\");\n\n        function wsConnect() {\n            console.log(\"connect\",wsUri);\n            ws = new WebSocket(wsUri);\n            //var line = \"\";    // either uncomment this for a building list of messages\n            ws.onmessage = function(msg) {\n                var line = \"\";  // or uncomment this to overwrite the existing message\n                // parse the incoming message as a JSON object\n                var data = msg.data;\n                //console.log(data);\n                // build the output from the topic and payload parts of the object\n                line += \"<p>\"+data+\"</p>\";\n                // replace the messages div with the new \"line\"\n                document.getElementById('messages').innerHTML = line;\n                //ws.send(JSON.stringify({data:data}));\n            }\n            ws.onopen = function() {\n                // update the status div with the connection status\n                document.getElementById('status').innerHTML = \"connected\";\n                //ws.send(\"Open for data\");\n                console.log(\"connected\");\n            }\n            ws.onclose = function() {\n                // update the status div with the connection status\n                document.getElementById('status').innerHTML = \"not connected\";\n                // in case of lost connection tries to reconnect every 3 secs\n                setTimeout(wsConnect,3000);\n            }\n        }\n        \n        function doit(m) {\n            if (ws) { ws.send(m); }\n        }\n    </script>\n    </head>\n    <body onload=\"wsConnect();\" onunload=\"ws.disconnect();\">\n        <font face=\"Arial\">\n        <h1>Simple Live Display</h1>\n        <div id=\"messages\"></div>\n        <button type=\"button\" onclick='doit(\"click\");'>Click to send message</button>\n        <hr/>\n        <div id=\"status\">unknown</div>\n        </font>\n    </body>\n</html>\n","x":878,"y":620,"wires":[["162f6aa5.806805"]]},{"id":"f62a5c2f.d369c","type":"function","z":"39ebd91b.6a6e86","name":"format time nicely","func":"msg.payload = msg.payload.toString();\nreturn msg;","outputs":1,"noerr":0,"x":768,"y":700,"wires":[["745cf76c.af8328"]]},{"id":"b052ceb9.0437b","type":"websocket in","z":"39ebd91b.6a6e86","name":"","server":"f2759208.7a31c","client":"","x":767,"y":752,"wires":[["218546d0.da694a"]]},{"id":"218546d0.da694a","type":"debug","z":"39ebd91b.6a6e86","name":"","active":true,"console":"false","complete":"false","x":957,"y":752,"wires":[]},{"id":"f2759208.7a31c","type":"websocket-listener","z":"39ebd91b.6a6e86","path":"/ws/simple","wholemsg":"false"}]

Now I need to send multiple data from nodered to web page. What should I do?

Exactly the same question was asked by @GChapo earlier today. Simple Web page heading issues

Is this a task set on a course?

Unbelievable!

No course here, although it might be a good idea!

Did you get any solution?

Julian suggest uibuilder. I'm still trying to digest it. Vue.js looks good and allows for dynamic input to differing website sections

1 Like

Yeah! I am also working on it. Awesome node. But still have some confusion. Like, How can I extract only received value in a different variable and so on...

That is a JavaScript question.

uibuilder.onChange('msg', function(newVal){
    //console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', newVal)
    vueApp.msgRecvd = newVal

    // Get a property from within the payload and pass it to a Vue variable defined in the `data` section:
    vueApp.vueVariable = newVal.payload.someProperty
})

Note that, if you want Vue to be able to dynamically display your data, you have to declare the variable in advance in the data property of your app.

1 Like