Simple Interface via Website to Raspberry Pi with Node Red

[Tom S.]

Hi,

I need a very simple interaction between a website and node red.

Node Red is running on my raspberry pi. It is connected to a lamp. The raspi has apache installed. I can access the index.html from within my home network.

I have a very simple index.html with one link, like this: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_w3schools 

When I press the link, from any device, it should trigger node red to turn on one GPIO and thus the lamp.

This is supposed to be a very simple tutorial for a noob like me, because I have been struggling with too complex solutions far to long. I don't know what JSON, MQTT or whatever else is and if I need it in that case.I just need a connection between a website and node red, that is not using the dashboard nodes, because I will build something more complex later on, once I understand how to use a custom interface.

It would be great if you could build a simple node-flow, so that I understand if i need a html, get, mqtt or whatever node to listen for the click, and if you'd help me find the correct link/json/whatever target I need at the index.html to communicate with my pi.

Thanks

Tom.S

[Michael Hogan]

The flow on this page is a pretty standard solution for the kind of thing that you are talking about.

The flow serves up a web-page that has a script to send and receive messages over websockets.  You will need to alter the flow a bit to have messages pass from the web page buttons to logic that turns the GPIO pins on and off.

You will need to install the package that allows node-red to talk to the R-PI GPIO, like this one: https://flows.nodered.org/node/node-red-node-pi-gpiod

[Tom S.]

Hi Michael,

did you forget to post a link to "the flow on this page"? ;-)

But websocket was one of the keywords I was looking for. thanks, i found this tutorial, using an existing websocket server/listener:

http://noderedguide.com/tag/websocket/

However, it is important for my system to not share data with external websites. I only intend to use it within the home-network. How difficult is it to create an own websocket server?

[Michael Hogan]

Doh! Yes, I forgot to publish this link :
https://flows.nodered.org/flow/8666510f94ad422e4765

This example has a web page and a websocket served up locally.

[Tom S.]

Awesome Michael! This is exactly the kind of template I had been looking for. Fantastic :-D and it really works.

It still needs to connect to the internet though.... Do you think the same interaction between an html frontend and node red is also possible offline, i.e. locally on my raspberry pi and a connected monitor?

[Michael Hogan]

Yes, just fire up the Raspberry Pi browser (whose name I cannot recall), and go to http://127.0.0.1:1880/simple .. that will always work locally, irrespective of whether you are hooked up to the internet or not.