Node-RED interface with Webpage

General
1

Hello,

i have an Apache-Webserver installed and running on my raspberry pi 3b+. I would like to send data to my http-webpage (maybe via a json file). The data only consists of a number, which triggers a change on my webpage. I would like the number to be entered through the node red dashboard. Does anybody know what nodes i can use to send data to my webpage?

Thank you all very much for your help!

2

Welcome to the forum @leonski

Do you mean you want to perform an http request to the website? If so then I suggest trying the http request node :slight_smile:

The node red cookbook has a section on performing http requests.

3

Generally speaking, you cannot send data to a webpage because the page actually "runs" in the client browser.

But there are many ways to incorporate dynamic or static data into a web page. Need to help with dinner just now, if nobody has added the various solutions by the time I come back, I'll try to outline them.

4

OK, so lets see:

  • Use Node-RED to create a file that the web-server incorporates to your page when it is loaded (Server-side include).

  • Do everything from Node-RED (including service static assets) but use the web server as a reverse proxy and cache. (most likely the simplest solution).

  • Use the web server to serve static assets and use client-side JavaScript to:

    • Get a JSON file that is created by Node-RED (closest to your original ask I think).
    • Call a REST API provided by Node-RED.
    • Add a websocket connection that connects to a websocket node in Node-RED.
    • Output data from Node-RED to an MQTT broker, configure the broker to support websocket connections, get the data in the client via MQTT over websockets.
6

Thanks for your quick reply. I am really thankful for your help.
I have to say this is the first time I use Node-Red (University Project).

For me, the easiest way (and also the way that best reflects my task) is using a MQTT broker.
But how do I set up the broker to support websocket? And how does the client get the data then?

Thanks in advance!

7

No problem. First choice is to select a broker. Most people use Mosquitto which is widely available, cross-platform and, of course, free.

Go to the Mosquitto web site where it tells you how to configure for websockets.

Then you need a suitable client that will work in a web browser. The Paho client is the most commonly used version.

Eclipse Paho | The Eclipse Foundation.

Note that one thing you may have to take on and that is rather more complex is setting up your Broker not only to support websocket connections but to support secure websockets. This is a must if you are wanting access over the Internet. However, you may be able to get your web server to handle the TLS stuff for you. Only if using on a secure network should you consider not implementing secure websockets.

You can avoid the complexity of having to set up the broker for websockets and using the paho client by getting Node-RED to do the hard work for you. In this case, Node-RED listens to your broker and forwards data to your clients using standard (or secure of course) websockets. In that case, your client only needs a websocket client.

Alternatively, you could go the whole hog and deliver your web app using uibuilder which incorporates websockets for you and provides a front-end helper library that not only does the websockets but provides an event driven link for Node-RED comms. Then, as previously mentioned, use your web server as a reverse proxy for efficiency, TLS termination (and maybe user authentication if you like). uibuilder makes no assumptions about what, if any, front-end frameworks you use so you can use any (or none) and it should be simple to use any existing pages in uibuilder.

8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.