How can i post MQTT data to a blank webpage

I Would like to post data received over MQTT onto a blank HTML webpage, so that the only contents of that webpage is the original msg.payload sent over MQTT. For this I created the flow below.

Image of Node-Red flow

I have tried to use the GET and POST functions, and tried the websocket function too, but have had no luck, I am hoping someone could tell me where im going wrong. The intended webpage is simply a webpage displaying the temperature value.

Edit: Picture of what happened when i attempted to use the GET function, after setting global.temp as the msg.payload

Solution

You seem to be very close. One easy way is like shown below.

First, you save the payload to a flow context variable. I used inject nodes but you will replace by an MQTT node.

Secondly, you use an HTTP in node to trigger the flow that will read the flow context variable to msg.payload.

When you point your browser to the endpoint /mytemp you will see the temperature.

[{"id":"6eba3ed8.e29ba","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"a35c9258.340b1","type":"debug","z":"6eba3ed8.e29ba","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":570,"y":120,"wires":[]},{"id":"fb8bcf33.015ee","type":"http in","z":"6eba3ed8.e29ba","name":"/mytemp","url":"/mytemp","method":"get","upload":false,"swaggerDoc":"","x":180,"y":220,"wires":[["7bb7b19.2efd75"]]},{"id":"7bb7b19.2efd75","type":"change","z":"6eba3ed8.e29ba","name":"mytemp","rules":[{"t":"set","p":"payload","pt":"msg","to":"mytemp","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":220,"wires":[["8b54468f.82d758","2b02d89.dfec028"]]},{"id":"8b54468f.82d758","type":"debug","z":"6eba3ed8.e29ba","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":550,"y":280,"wires":[]},{"id":"a691c7d8.da5d78","type":"inject","z":"6eba3ed8.e29ba","name":"","topic":"","payload":"21","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":120,"wires":[["3af6ea2f.2c0476"]]},{"id":"3af6ea2f.2c0476","type":"change","z":"6eba3ed8.e29ba","name":"flow.mytemp","rules":[{"t":"set","p":"mytemp","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":120,"wires":[["a35c9258.340b1"]]},{"id":"2b02d89.dfec028","type":"http response","z":"6eba3ed8.e29ba","name":"","statusCode":"","headers":{},"x":570,"y":220,"wires":[]},{"id":"2f1ab064.3b768","type":"inject","z":"6eba3ed8.e29ba","name":"","topic":"","payload":"33","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":160,"wires":[["3af6ea2f.2c0476"]]}]