How to show analog/digital information in a URL from a PLC via MQTT

Hi everyone,
First of all, I am brand new in IoT technologies so excuse me if I make a mistake and say something wrong.

I am trying to control inputs and outputs from a PLC via MQTT and get all data in node-red, to send it to a URL: localhost:1880/plc (for example) so that I can manage from the website.
When I get the data from analog inputs in the URL, I have to refresh the URL everytime to get new information about the input status, and I don't know how to show all information (digital In/digital out/analog in/analog out).

Does anybody know how could I do it?

Thank you so much in advance!

This is my project:

[{"id":"b394f1c9.465ec","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"a9244ba0.6cc368","type":"debug","z":"b394f1c9.465ec","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":610,"y":160,"wires":[]},{"id":"739032d2.cd7b5c","type":"http in","z":"b394f1c9.465ec","name":"/plc","url":"/plc","method":"get","upload":false,"swaggerDoc":"","x":170,"y":280,"wires":[["72356951.90c558"]]},{"id":"72356951.90c558","type":"change","z":"b394f1c9.465ec","name":"change node","rules":[{"t":"set","p":"payload","pt":"msg","to":"mytemp","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":280,"wires":[["c89a095f.ea22a8"]]},{"id":"c8e69d92.bea71","type":"debug","z":"b394f1c9.465ec","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":670,"y":340,"wires":[]},{"id":"c6780ce3.3362b","type":"change","z":"b394f1c9.465ec","name":"change node","rules":[{"t":"set","p":"mytemp","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":160,"wires":[["a9244ba0.6cc368"]]},{"id":"8084b072.bd0b1","type":"http response","z":"b394f1c9.465ec","name":"","statusCode":"","headers":{},"x":690,"y":280,"wires":[]},{"id":"17ff3a17.4f1ce6","type":"mqtt in","z":"b394f1c9.465ec","name":"","topic":"I","qos":"2","datatype":"auto","broker":"b2f50d89.7375f","x":190,"y":160,"wires":[["c6780ce3.3362b"]]},{"id":"c89a095f.ea22a8","type":"template","z":"b394f1c9.465ec","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n<style>\n\n.taula1 {\n\tpadding-bottom: 2em;\n}\n\ntable {\n  font-family: arial, sans-serif;\n  border-collapse: collapse;\n  width: 100%;\n}\n\ntd, th {\n  text-align: left;\n  padding: 8px;\n}\n\ntr:nth-child(even) {\n  background-color: #f3f7d0;\n  width: 25%;\n}\n\nh2 {\n  font-family: arial, sans-serif;\n}\n</style>\n</head>\n<body>\n\n<h2>Control your inputs/outputs</h2>\n\n<div class=\"taula1\">\n<table>\n  <tr>\n    <th>Digital inputs</th>\n    <th></th>\n    <th>Analog inputs</th>\n    <th></th>\n  </tr>\n  <tr>\n    <td>I0.0</td>\n    <td>{{payload}}</td>\n    <td>I0.7</td>\n    <td>{{payload}}</td>\n  </tr>\n  <tr>\n    <td>I0.1</td>\n    <td>{{payload}}</td>\n    <td>I0.8</td>\n    <td>{{payload}}</td>\n  </tr>\n  <tr>\n    <td>I0.2</td>\n    <td>{{payload}}</td>\n    <td>I0.9</td>\n    <td>{{payload}}</td>\n  </tr>\n  <tr>\n    <td>I0.3</td>\n    <td>{{payload}}</td>\n    <td>I0.10</td>\n    <td>{{payload}}</td>\n  </tr>\n  <tr>\n    <td>I0.4</td>\n    <td>{{payload}}</td>\n    <td>I0.11</td>\n    <td>{{payload}}</td>\n  </tr>\n  <tr>\n    <td>I0.5</td>\n    <td>{{payload}}</td>\n    <td>I0.12</td>\n    <td>{{payload}}</td>\n  </tr>\n  <tr>\n    <td>I0.6</td>\n    <td>{{payload}}</td>\n    <td></td>\n    <td></td>\n  </tr>\n</table>\n</div>\n\n\n<div>\n<table>\n\t<tr>\n      <th>Digital outputs</th>\n      <th></th>\n      <th>Analog outputs</th>\n      <th></th>\n\t</tr>\n    <tr>\n      <td>Q0.0</td>\n      <td>{{payload}}</td>\n      <td>A0.5</td>\n      <td>{{payload}}</td>\n\t</tr>\n    <tr>\n      <td>Q0.1</td>\n      <td>{{payload}}</td>\n      <td>A0.6</td>\n      <td>{{payload}}</td>\n  \t</tr>\n    <tr>\n      <td>Q0.2</td>\n      <td>{{payload}}</td>\n      <td>A0.7</td>\n      <td>{{payload}}</td>\n  \t</tr>\n    <tr>\n      <td>Q0.3</td>\n      <td>{{payload}}</td>\n      <td></td>\n      <td></td>\n  \t</tr>    \n    <tr>\n      <td>Q0.4</td>\n      <td>{{payload}}</td>\n      <td></td>\n      <td></td>\n  \t</tr>  \n</table>\n</div>\n\n\n</body>\n</html>\n","output":"str","x":520,"y":280,"wires":[["8084b072.bd0b1","c8e69d92.bea71"]]},{"id":"b2f50d89.7375f","type":"mqtt-broker","z":"","name":"Localhost Broker","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""}]

I don't understand what you mean by that. If you already have it in node-red why are you trying to send it to node red again?

Perhaps you mean you want the user to be able to see the data by going to such a page? If so then have you looked at the node-red dashboard?

Hi Colin! Thanks for the answer. Yes, that's what I want, but I don't want to use the dashboard, I just want to control my inputs and outputs through a page made by myself.
Do you know how could I control and show every input and output?
This is my project now:

[{"id":"b394f1c9.465ec","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"a9244ba0.6cc368","type":"debug","z":"b394f1c9.465ec","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":690,"y":160,"wires":[]},{"id":"739032d2.cd7b5c","type":"http in","z":"b394f1c9.465ec","name":"/plc","url":"/plc","method":"get","upload":false,"swaggerDoc":"","x":150,"y":320,"wires":[["72356951.90c558"]]},{"id":"72356951.90c558","type":"change","z":"b394f1c9.465ec","name":"change node","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":320,"wires":[["c89a095f.ea22a8"]]},{"id":"c8e69d92.bea71","type":"debug","z":"b394f1c9.465ec","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":750,"y":380,"wires":[]},{"id":"8084b072.bd0b1","type":"http response","z":"b394f1c9.465ec","name":"","statusCode":"","headers":{},"x":770,"y":320,"wires":[]},{"id":"17ff3a17.4f1ce6","type":"mqtt in","z":"b394f1c9.465ec","name":"","topic":"I","qos":"2","datatype":"auto","broker":"b2f50d89.7375f","x":170,"y":160,"wires":[["4b450e49.acfe5"]]},{"id":"c89a095f.ea22a8","type":"template","z":"b394f1c9.465ec","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n<style>\n\n.taula1 {\n\tpadding-bottom: 2em;\n}\n\ntable {\n  font-family: arial, sans-serif;\n  border-collapse: collapse;\n  width: 100%;\n}\n\ntd, th {\n  text-align: left;\n  padding: 8px;\n}\n\ntr:nth-child(even) {\n  background-color: #f3f7d0;\n  width: 25%;\n}\n\nh2 {\n  font-family: arial, sans-serif;\n}\n</style>\n</head>\n<body>\n\n<h2>PLC I/O</h2>\n\n<div class=\"taula1\">\n<table>\n  <tr>\n    <th>Digital inputs</th>\n    <th></th>\n    <th>Analog inputs</th>\n    <th></th>\n  </tr>\n  <tr>\n    <td>I0.0</td>\n    <td>{{payload.inputs[0][0]}}</td>\n    <td>I0.7</td>\n    <td>{{payload.inputs[0][7]}}</td>\n  </tr>\n  <tr>\n    <td>I0.1</td>\n    <td>{{payload.inputs[0][1]}}</td>\n    <td>I0.8</td>\n    <td>{{payload.inputs[0][8]}}</td>\n  </tr>\n  <tr>\n    <td>I0.2</td>\n    <td>{{payload.inputs[0][2]}}</td>\n    <td>I0.9</td>\n    <td>{{payload.inputs[0][9]}}</td>\n  </tr>\n  <tr>\n    <td>I0.3</td>\n    <td>{{payload.inputs[0][3]}}</td>\n    <td>I0.10</td>\n    <td>{{payload.inputs[0][10]}}</td>\n  </tr>\n  <tr>\n    <td>I0.4</td>\n    <td>{{payload.inputs[0][4]}}</td>\n    <td>I0.11</td>\n    <td>{{payload.inputs[0][11]}}</td>\n  </tr>\n  <tr>\n    <td>I0.5</td>\n    <td>{{payload.inputs[0][5]}}</td>\n    <td>I0.12</td>\n    <td>{{payload.inputs[0][12]}}</td>\n  </tr>\n  <tr>\n    <td>I0.6</td>\n    <td>{{payload.inputs[0][6]}}</td>\n    <td></td>\n    <td> - </td>\n  </tr>\n</table>\n</div>\n\n\n<div>\n<table>\n\t<tr>\n      <th>Digital outputs</th>\n      <th></th>\n      <th>Analog outputs</th>\n      <th></th>\n\t</tr>\n    <tr>\n      <td>Q0.0</td>\n      <td>{{payload.outputs[0][0]}}</td>\n      <td>A0.5</td>\n      <td>{{payload.outputs[0][5]}}</td>\n\t</tr>\n    <tr>\n      <td>Q0.1</td>\n      <td>{{payload.outputs[0][1]}}</td>\n      <td>A0.6</td>\n      <td>{{payload.outputs[0][6]}}</td>\n  \t</tr>\n    <tr>\n      <td>Q0.2</td>\n      <td>{{payload.outputs[0][2]}}</td>\n      <td>A0.7</td>\n      <td>{{payload.outputs[0][7]}}</td>\n  \t</tr>\n    <tr>\n      <td>Q0.3</td>\n      <td>{{payload.outputs[0][3]}}</td>\n      <td></td>\n      <td></td>\n  \t</tr>    \n    <tr>\n      <td>Q0.4</td>\n      <td>{{payload.outputs[0][4]}}</td>\n      <td></td>\n      <td></td>\n  \t</tr>  \n</table>\n</div>\n\n</body>\n</html>\n","output":"str","x":600,"y":320,"wires":[["8084b072.bd0b1","c8e69d92.bea71"]]},{"id":"4b450e49.acfe5","type":"function","z":"b394f1c9.465ec","name":"","func":"var z, i, v;\nlet inputs = get;\nmsg.payload = flow.inputs[z][i];\nflow.set('inputs', inputs);\n","outputs":1,"noerr":0,"x":420,"y":160,"wires":[["a9244ba0.6cc368"]]},{"id":"b2f50d89.7375f","type":"mqtt-broker","z":"","name":"Localhost Broker","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""}]

And I know that I should do something like this in the function node:

var z, i, v;
let inputs = get;
msg.payload = flow.inputs[z][i];
flow.set('inputs', inputs);

but I'm not so good at javascript, and as you can see, I'm a bit lost.

Thank you,
Q.