WebSocket Multiple data sends at once

Not shure if this is a node red question or html. But I am trying to send data to a webpage when an update occurs it is working as is but "document.getElementById" will only pull one value at a time and the other values will post as "undefined". I have tried "document.querySelectorAll('#id2, #id3, #id5');",
but I havent had any luck with that either. Any help would be appreciated thanks..


[
{
"id": "fd423f74.74bc2",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": ""
},
{
"id": "5c7d5f33.5ce36",
"type": "websocket out",
"z": "fd423f74.74bc2",
"name": "",
"server": "3863b2b9.06f79e",
"client": "",
"x": 620,
"y": 580,
"wires":
},
{
"id": "e4188d00.288c9",
"type": "http response",
"z": "fd423f74.74bc2",
"name": "",
"x": 1170,
"y": 120,
"wires":
},
{
"id": "23313337.8648dc",
"type": "http in",
"z": "fd423f74.74bc2",
"name": "",
"url": "/simple",
"method": "get",
"swaggerDoc": "",
"x": 1170,
"y": 40,
"wires": [
[
"bf7bfef0.e4cab"
]
]
},
{
"id": "bf7bfef0.e4cab",
"type": "template",
"z": "fd423f74.74bc2",
"name": "Simple Web Page",
"field": "payload",
"fieldType": "msg",
"format": "html",
"syntax": "mustache",
"template": "\n\n \n Simple Live Display\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 // 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 = JSON.parse(msg.data);\n //console.log(data);\n // build the output from the topic and payload parts of the object\n line += "

SAT "+data.SAT+"

";\n line += "

OAT "+data.OAT+"

";\n line += "

OAH "+data.OAH+"

";\n line += "

SAT "+data.SAT+"

";\n line += "

RAT "+data.RAT+"

";\n line += "

Space T "+data.Space_T+"

";\n line += "

Space H "+data.Space_H+"

";\n line += "

Attic T "+data.Attic_T+"

";\n line += "

Gas "+data.Gas+"

";\n line += "

Compressor "+data.Compressor+"

";\n line += "

Heat Stage1 "+data.Heat_Stage_1+"

";\n line += "

Attic T SP "+data.Attic_T_SP+"

";\n line += "

Space T SP "+data.Space_T_SP+"

";\n line += "

Evap Fan "+data.Evap_Fan+"

";\n line += "

Attic Fan "+data.Attic_Fan+"

";\n // replace the messages div with the new "line"\n document.getElementById('SAT').innerHTML = "Supply Air Temp &nbsp = &nbsp"+data.SAT;\n document.getElementById('OAT').innerHTML = "Outside Air Temp &nbsp = &nbsp"+data.OAT;\n document.getElementById('OAH').innerHTML = "Outside Air Humidity &nbsp = &nbsp"+ data.OAH;\n document.getElementById('RAT').innerHTML = "Return Air Temp &nbsp = &nbsp"+ data.RAT;\n document.getElementById('Space T').innerHTML = "Space Temp &nbsp = &nbsp"+ data.Space_T;\n document.getElementById('Space H').innerHTML = "Space Humidity &nbsp = &nbsp"+ data.Space_H;\n document.getElementById('Attic T').innerHTML = "Attic Temp &nbsp = &nbsp"+ data.Attic_T;\n document.getElementById('Gas').innerHTML = "Gas Heat &nbsp = &nbsp"+ data.Gas;\n document.getElementById('Compressor').innerHTML = "Compressor &nbsp = &nbsp"+ data.Compressor;\n document.getElementById('Heat Stage1').innerHTML = "Reversing Valve &nbsp = &nbsp"+ data.Heat_Stage_1;\n document.getElementById('Attic T SP').innerHTML = "Attic Temp SP &nbsp = &nbsp"+ data.Attic_T_SP;\n document.getElementById('Space T SP').innerHTML = "Space Temp SP &nbsp = &nbsp"+ data.Space_T_SP;\n document.getElementById('Evap Fan').innerHTML = "Evap Fan &nbsp = &nbsp"+ data.Evap_Fan;\n document.getElementById('Attic Fan').innerHTML = "Attic Fan &nbsp = &nbsp"+ data.Attic_Fan;\n \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\n \n <body onload="wsConnect();" onunload="ws.disconnect();">\n <font face="Arial">\n

Simple Live Display

\n <div id="OAT">Outside Air Temp\n <div id="OAH">Outside Air Humidity\n <div id="SAT">Supply Air Temp\n <div id="RAT">Return Air Temp\n <div id="Space T">Space Temp\n <div id="Space H">Space Humidity\n <div id="Attic T">Attic Temp\n <div id="Gas">Gas Heat\n <div id="Compressor">Compressor\n <div id="Heat Stage1">Reversing Valve\n <div id="Attic T SP">Attic Temp SP\n <div id="Space T SP">Space Temp SP\n <div id="Evap Fan">Evap Fan\n <div id="Attic Fan">Attic Fan\n <div id="status">unknown\n \n \n\n",
"x": 1170,
"y": 80,
"wires": [
[
"e4188d00.288c9"
]
]
},
{
"id": "2db21164.c3733e",
"type": "json",
"z": "fd423f74.74bc2",
"name": "",
"property": "payload",
"action": "",
"pretty": false,
"x": 390,
"y": 180,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "9d70ea1f.d528d8",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "SAT",
"label": "SAT",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 5,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "SAT",
"min": 0,
"max": "100",
"step": 1,
"x": 90,
"y": 380,
"wires": [
[
"86620492.5e9a48"
]
]
},
{
"id": "fbcc6e96.21cee",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "RAT",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 6,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 90,
"y": 440,
"wires": [
[
"3ef077e8.01d2c8"
]
]
},
{
"id": "e446c106.10a71",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "OAT",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 7,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 90,
"y": 500,
"wires": [
[
"ec873096.77c7f"
]
]
},
{
"id": "6d4fd8e6.1da138",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "OAH",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 8,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 90,
"y": 560,
"wires": [
[
"21d74047.ea8a2"
]
]
},
{
"id": "7bf277e6.7a62b8",
"type": "ui_switch",
"z": "fd423f74.74bc2",
"name": "",
"label": "Attic Fan",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 10,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "",
"style": "",
"onvalue": "{"Attic_Fan":"On"}",
"onvalueType": "json",
"onicon": "",
"oncolor": "",
"offvalue": "{"Attic_Fan":"Off"}",
"offvalueType": "json",
"officon": "",
"offcolor": "",
"x": 80,
"y": 300,
"wires": [
[
"2db21164.c3733e"
]
]
},
{
"id": "4aa368b8.f2f688",
"type": "ui_switch",
"z": "fd423f74.74bc2",
"name": "",
"label": "Gas",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 11,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "",
"style": "",
"onvalue": "{"Gas":"The Gas is On"}",
"onvalueType": "json",
"onicon": "",
"oncolor": "",
"offvalue": "{"Gas":"The Gas is Off"}",
"offvalueType": "json",
"officon": "",
"offcolor": "",
"x": 70,
"y": 180,
"wires": [
[
"2db21164.c3733e"
]
]
},
{
"id": "8433756b.40b198",
"type": "ui_switch",
"z": "fd423f74.74bc2",
"name": "",
"label": "Compressor",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 9,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "",
"style": "",
"onvalue": "{"Compressor":"On"}",
"onvalueType": "json",
"onicon": "",
"oncolor": "",
"offvalue": "{"Compressor":"Off"}",
"offvalueType": "json",
"officon": "",
"offcolor": "",
"x": 90,
"y": 60,
"wires": [
[
"2db21164.c3733e"
]
]
},
{
"id": "86620492.5e9a48",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"SAT": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 270,
"y": 380,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "21d74047.ea8a2",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"OAH": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 270,
"y": 560,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "ec873096.77c7f",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"OAT": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 270,
"y": 500,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "3ef077e8.01d2c8",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"RAT": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 270,
"y": 440,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "34caf7ce.46e818",
"type": "ui_switch",
"z": "fd423f74.74bc2",
"name": "",
"label": "Heat Stage 1 (RV)",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 11,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "",
"style": "",
"onvalue": "{"Heat_Stage_1":"Heat"}",
"onvalueType": "json",
"onicon": "",
"oncolor": "",
"offvalue": "{"Heat_Stage_1":"Cool"}",
"offvalueType": "json",
"officon": "",
"offcolor": "",
"x": 110,
"y": 120,
"wires": [
[
"2db21164.c3733e"
]
]
},
{
"id": "b419ad7c.9236d",
"type": "ui_switch",
"z": "fd423f74.74bc2",
"name": "",
"label": "Evap Fan",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 10,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "",
"style": "",
"onvalue": "{"Evap_Fan":"On"}",
"onvalueType": "json",
"onicon": "",
"oncolor": "",
"offvalue": "{"Evap_Fan":"Off"}",
"offvalueType": "json",
"officon": "",
"offcolor": "",
"x": 80,
"y": 240,
"wires": [
[
"2db21164.c3733e"
]
]
},
{
"id": "7c2ee3fa.7fc32c",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "Attic_T_SP",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 8,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 110,
"y": 800,
"wires": [
[
"f950758d.67b268"
]
]
},
{
"id": "367247fd.5468a8",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "Attic_T",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 7,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 100,
"y": 740,
"wires": [
[
"c219628d.d85e"
]
]
},
{
"id": "4b959404.4694ac",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "Space_T_SP",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 6,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 110,
"y": 680,
"wires": [
[
"fdf989b6.50d728"
]
]
},
{
"id": "5ff36044.c9275",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "Space_T",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 5,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 100,
"y": 620,
"wires": [
[
"792d92db.1dabdc"
]
]
},
{
"id": "792d92db.1dabdc",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"Space_T": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 270,
"y": 620,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "fdf989b6.50d728",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"Space_T_SP": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 290,
"y": 680,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "c219628d.d85e",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"Attic_T": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 290,
"y": 740,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "f950758d.67b268",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"Attic_T_SP": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 310,
"y": 800,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "ae21864.4b43d78",
"type": "function",
"z": "fd423f74.74bc2",
"name": "Change to JSON",
"func": "msg.payload = {"Space_H": msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 310,
"y": 860,
"wires": [
[
"5c7d5f33.5ce36"
]
]
},
{
"id": "186809d8.9bd3b6",
"type": "ui_slider",
"z": "fd423f74.74bc2",
"name": "",
"label": "Space_H",
"tooltip": "",
"group": "1ed18b69.46ba65",
"order": 8,
"width": 0,
"height": 0,
"passthru": true,
"outs": "all",
"topic": "",
"min": 0,
"max": "100",
"step": 1,
"x": 100,
"y": 860,
"wires": [
[
"ae21864.4b43d78"
]
]
},
{
"id": "3863b2b9.06f79e",
"type": "websocket-listener",
"z": "fd423f74.74bc2",
"path": "/ws/simple",
"wholemsg": "false"
},
{
"id": "1ed18b69.46ba65",
"type": "ui_group",
"z": "",
"name": "HVAC",
"tab": "9038450b.0c1c68",
"order": 1,
"disp": true,
"width": 30,
"collapse": false
},
{
"id": "9038450b.0c1c68",
"type": "ui_tab",
"z": "",
"name": "AC",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]Preformatted text
[{"id":"bf7bfef0.e4cab","type":"template","z":"fd423f74.74bc2","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              // 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 = JSON.parse(msg.data);\n                //console.log(data);\n                // build the output from the topic and payload parts of the object\n                line += \"<p><b>SAT</b> \"+data.SAT+\"</p>\";\n                line += \"<p><b>OAT</b> \"+data.OAT+\"</p>\";\n                line += \"<p><b>OAH</b> \"+data.OAH+\"</p>\";\n                line += \"<p><b>SAT</b> \"+data.SAT+\"</p>\";\n                line += \"<p><b>RAT</b> \"+data.RAT+\"</p>\";\n                line += \"<p><b>Space T</b> \"+data.Space_T+\"</p>\";\n                line += \"<p><b>Space H</b> \"+data.Space_H+\"</p>\";\n                line += \"<p><b>Attic T</b> \"+data.Attic_T+\"</p>\";\n                line += \"<p><b>Gas</b> \"+data.Gas+\"</p>\";\n                line += \"<p><b>Compressor</b> \"+data.Compressor+\"</p>\";\n                line += \"<p><b>Heat Stage1</b> \"+data.Heat_Stage_1+\"</p>\";\n                line += \"<p><b>Attic T SP</b> \"+data.Attic_T_SP+\"</p>\";\n                line += \"<p><b>Space T SP</b> \"+data.Space_T_SP+\"</p>\";\n                line += \"<p><b>Evap Fan</b> \"+data.Evap_Fan+\"</p>\";\n                line += \"<p><b>Attic Fan</b> \"+data.Attic_Fan+\"</p>\";\n                // replace the messages div with the new \"line\"\n                document.getElementById('SAT').innerHTML = \"Supply Air Temp &nbsp = &nbsp\"+data.SAT;\n                document.getElementById('OAT').innerHTML = \"Outside Air Temp &nbsp = &nbsp\"+data.OAT;\n                document.getElementById('OAH').innerHTML = \"Outside Air Humidity &nbsp = &nbsp\"+ data.OAH;\n                document.getElementById('RAT').innerHTML = \"Return Air Temp &nbsp = &nbsp\"+ data.RAT;\n                document.getElementById('Space T').innerHTML = \"Space Temp &nbsp = &nbsp\"+ data.Space_T;\n                document.getElementById('Space H').innerHTML = \"Space Humidity &nbsp = &nbsp\"+ data.Space_H;\n                document.getElementById('Attic T').innerHTML = \"Attic Temp &nbsp = &nbsp\"+ data.Attic_T;\n                document.getElementById('Gas').innerHTML = \"Gas Heat &nbsp = &nbsp\"+ data.Gas;\n                document.getElementById('Compressor').innerHTML = \"Compressor &nbsp = &nbsp\"+ data.Compressor;\n                document.getElementById('Heat Stage1').innerHTML = \"Reversing Valve &nbsp = &nbsp\"+ data.Heat_Stage_1;\n                document.getElementById('Attic T SP').innerHTML = \"Attic Temp SP &nbsp = &nbsp\"+ data.Attic_T_SP;\n                document.getElementById('Space T SP').innerHTML = \"Space Temp SP &nbsp = &nbsp\"+ data.Space_T_SP;\n                document.getElementById('Evap Fan').innerHTML = \"Evap Fan &nbsp = &nbsp\"+ data.Evap_Fan;\n                document.getElementById('Attic Fan').innerHTML = \"Attic Fan &nbsp = &nbsp\"+ data.Attic_Fan;\n   \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    </script>\n\n    </head>\n    <body onload=\"wsConnect();\" onunload=\"ws.disconnect();\">\n        <font face=\"Arial\">\n        <h1>Simple Live Display</h1>\n        <div id=\"OAT\">Outside Air Temp</div>\n        <div id=\"OAH\">Outside Air Humidity</div>\n        <div id=\"SAT\">Supply Air Temp</div>\n        <div id=\"RAT\">Return Air Temp</div>\n        <div id=\"Space T\">Space Temp</div>\n        <div id=\"Space H\">Space Humidity</div>\n        <div id=\"Attic T\">Attic Temp</div>\n        <div id=\"Gas\">Gas Heat</div>\n        <div id=\"Compressor\">Compressor</div>\n        <div id=\"Heat Stage1\">Reversing Valve</div>\n        <div id=\"Attic T SP\">Attic Temp SP</div>\n        <div id=\"Space T SP\">Space Temp SP</div>\n        <div id=\"Evap Fan\">Evap Fan</div>\n        <div id=\"Attic Fan\">Attic Fan</div>\n        <div id=\"status\">unknown</div>\n        </font>\n    </body>\n</html>\n","x":1170,"y":80,"wires":[["e4188d00.288c9"]]}]