Simple Web page with live data updates via websocket

This flow creates a simple web page at 'http://{your-server-ip:1880/simple'

The web page then connects back to the server using a websocket and receives time updates every 5 seconds and updates the web page with that information.

There is also a simple button to push a message back to the server - which will appear in the debug.

[{"id":"985ecbc7.67a138","type":"websocket-listener","z":"9e538f88.61ac7","path":"/ws/simple","wholemsg":"false"},{"id":"e3e4522e.1c1bb","type":"inject","z":"9e538f88.61ac7","name":"Tick every 5 secs","topic":"test","payload":"","payloadType":"date","repeat":"5","crontab":"","once":false,"x":139,"y":320,"wires":[["45dbf990.ba2408"]]},{"id":"50da04b3.af25fc","type":"websocket out","z":"9e538f88.61ac7","name":"","server":"985ecbc7.67a138","client":"","x":539,"y":320,"wires":[]},{"id":"42a28745.bd5d78","type":"http response","z":"9e538f88.61ac7","name":"","x":510,"y":260,"wires":[]},{"id":"1787be40.e87842","type":"http in","z":"9e538f88.61ac7","name":"","url":"/simple","method":"get","swaggerDoc":"","x":141,"y":260,"wires":[["1857548e.e7a8ab"]]},{"id":"1857548e.e7a8ab","type":"template","z":"9e538f88.61ac7","name":"Simple Web Page","field":"payload","format":"html","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.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 =;\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":338,"y":260,"wires":[["42a28745.bd5d78"]]},{"id":"45dbf990.ba2408","type":"function","z":"9e538f88.61ac7","name":"format time nicely","func":"msg.payload = Date(msg.payload).toString();\nreturn msg;","outputs":1,"noerr":0,"x":327,"y":320,"wires":[["50da04b3.af25fc"]]},{"id":"eccc8bc2.133378","type":"websocket in","z":"9e538f88.61ac7","name":"","server":"985ecbc7.67a138","client":"","x":326,"y":372,"wires":[["9adfff59.652"]]},{"id":"9adfff59.652","type":"debug","z":"9e538f88.61ac7","name":"","active":true,"console":"false","complete":"false","x":516,"y":372,"wires":[]}]

Flow Info

Created 9 years, 4 months ago
Updated 4 years, 4 months ago
Rating: 4.6 5




Node Types

  • debug (x1)
  • function (x1)
  • http in (x1)
  • http response (x1)
  • inject (x1)
  • template (x1)
  • websocket in (x1)
  • websocket out (x1)
  • websocket-listener (x1)


  • web
  • page
  • websocket
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option