Dynamic webpage using node-red websockets/mqtt

[Matt]

This may be a little off topic, but I get the sense a lot of people are doing or trying to do the same thing

I'm a bit of an html/js newbie, so I'm trying to figure out the "correct" way to do dynamic updates on a webpage based on WS/MQTT messages from NR. I have successfully configured a single dynamic element, but I'm not clear on the best way to update many elements. Do I configure one catchall socket/mqtt subscription and a function that updates elements based on the topic? If so, how do I identify the elements, by setting id = topic? What about if I want the same data in multiple places on the page, how does that work if ids are supposed to be unique? I'm trying to avoid having a socket/subscription and/or a function for each piece of data, that seems crazy.

Getting input into NR has been easy (so far), I just make a button with onclick=my_mqtt_publish_function(topic,payload) and it works. It would be nice if I could figure out an equally "elegant" way of displaying data.

[Julian Knight]

Hi Matt, welcome.

I don't think there really is a "Right" way. 

The advantage of MQTT in the browser is that you can subscribe directly to multiple messages. The downsides are that you need an MQTT library plus a broker that can talk websockets. You may also need to expose your MQTT broker over the Internet which may be dangerous if you are using it to control things, securing it will require careful planning and execution.

The advantage of websockets is that it is easy to secure, designed for web use but it only really gives you single "channel" unless you set up multiple sockets. In practice I don't think this is really an issue and is fairly easily handled though you tend to end up creating your own API. It is also easy to keep separate from other processing which is better if using it over the Internet.

Even after deciding on a channel, you still need to handle the dynamic updates part. Something like REACT or one of the other similar libraries can be good for that. Some people prefer Angular but personally I'd only consider that for a really big project.

There are some examples of page updates, etc in the flows library so have a look at that. If you only need a form, I have an example that uses websockets to dynamically update the data (look for my flows under the TotallyInformation name). If you need full dynamic pages though, REACT or similar would certainly be better.

[Timur Fatykhov]

Hi, I am working on node-red app wich works with one of the home automation systems - wink plus more (it has integration with several camera model, lifx) I am using websockets to push data from node-red to web browser UI.

you can check it here https://github.com/tfatykhov/WinkRedNode/tree/master/Flows/Bluemix it is based on blue-mix version of node-red and also using cloudant DB.

[Matt]

Thanks for the insights and info guys. I've done some more digging and it looks like jquery makes a lot of this stuff pretty easy.

I think I will stick with the mqtt connection as opposed to websockets since none of this is going to touch the internet and it saves me a bunch of NR "republishing".

--

http://nodered.org
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.