Web Sockets Web Page Part 3

For this to make sense you should look at Websockets Web Page Part 1 and Websockets Web Page Part 2 first.

In this final section I add styling to the page  and also change the code so that you can send a partial message  i.e. {“my_input”:”Hello”} without affecting other parts of the page.

So in order to demonstrate this latest version you’ll need to go make yourself a theme (actually only one file needed for this – the css file) and put it in a directory called themes under the page shown here.

You’ll also need to change the Node-Red to this…

node-red

You’ll see here that I have to two experimental injects… and also I pull out the incoming web socket data – process the SWITCH and send a command off to one of my boards via MQTT to turn a light on or off, so NOW our simply page as well as looking pretty, actually DOES something. It does not take too much of a stretch of the imagine to ponder how to replace those injects with status info from, say an input or an MQTT input etc..

Here’s what my new page looks like…

new page

The process commands box looks like this..

process

As you can see – I’m merely taking the input message – and parsing it – and I’m only interested in “my_switch”… I return in this case a message to turn my ESP8266-board relay output on or off.

Here is the code for the page – don’t forget to set the WS to your Node-Red websocket and don’t forget the theme data…

[github file="/scargill/various/blob/master/blog2.html"]

Note a link to a second page – as yet doing nothing but basically you can build a multi-page app all in one html file… check out Jquery Mobile site – or click the link in the page.

Facebooktwittergoogle_pluspinterestlinkedin

12 thoughts on “Web Sockets Web Page Part 3

  1. Have you been able to use websockets over gsm/3g?
    It works on my mobile from wifi, but not from 3g, so it seems like this is a very nice solution which i would love, but I cannot use for its purpose, to help me control my devices from my cellphone.

    does anyone have a way to fix this nodered+http+websocket over 3g issue/Do you see that issue too?

    1. So node-red is on the PI, the web page is on the PI and I've a port redirect on the router so I can access externally - the answer is yes, definitely - runs on 3G.

  2. I dont' have a problem with websockets over 3G. I'm using the company THREE (3) and one of the first things I did was to test the websockets connection. No problem. I have of course put a port redirect onto my router for external use.

    1. Ok, I just tested. So I have a Raspberry Pi which serves up everything including the web pages - I have a router where I'm using port 80 for something else externally and so I've redirected external port 8180 to port 80 on the Pi - where I have a number of pages sitting in VAR/WWW. I just tried turning the WIFI off on my phone - and accessing the web page sitting on the PI which then accesses the node-red websocket feature. All works a treat. I would have responded more quickly but I'd forgotten that on the webserver on the PI I'd implemented passwords just to make life a little more difficult for intruders.. and of course I'd forgotten the username... yes, all works a treat over 3G (THREE - and I'm in Spain just to make matters more complicated - Spain is a "feel at home" country - so - if it works here, it's going to work elsewhere.

  3. First off: Thanks very much for documenting this, I'm very much a newbie to javascript/websockets and it's of great help to get stuff up and running.

    I have a problem that I hope you can help me with - I'm trying to adapt what you've got here to show status of and control several z-wave switches around the house. The setup I have is that all the zwave devices are set by MQTT messages, or if they are changed at the switch, an MQTT message is sent. I can't work out how I would modify your system to load the current state of switches when the web page is opened. Do you have any suggestions?

    1. I was thinking of a similar approach for my project. You can have a database that holds the information of all your switches etc in its tables. Then, using php you can get the latest data from the database want and create the html using these values as the default ones.

      My only concern is if I should just create a huge html page and let javascript paginate it(better term: hide the unwanted data), or if I should create smaller html pages(one for bedroom, one for kitchen, one for bathroom etc) and connect them all. Obviously the second option is better resource wise but adds complexity.

    2. Ok so you have a websockets input - taking info from the web page - and an output - feeding it back - and process the incoming info and sent to MQTT. I guess if your Node-Red is monitoring the MQTT sent out from your switches you could store that in global variables - and in your WS in processing - pick up on the state of those global vars

      1. I've been working on and off for a while on this subject, using your examples as a springboard. I come up with a solution based on the Paho JavaScript MQTT client. I'm going to write this up in detail on my blog, once I've got it going a bit less buggy than it is at the moment, but it's basically a case of:

        Download and compile libwebsockets
        Download and compile Mosquitto with websockets enabled
        Edit the Mosquitto conf file so that it has a second listener for MQTT over websockets

        The web page then subscribes to the subject (or using a wildcard, multiple subjects) and by making the subjects retain messages, they're all delivered to the web page upon its connection to the MQTT broker.

  4. Peter, first thanks for sharing all this knowledge and ideas.
    I started using Node Red recently and find it a challenge, there is so much you can do.
    When I read your work on using NetIO and Node Red websocket I just had to try that out.
    Got the App and I just can't figure out how the connection between NetIO and a WS node is working.
    In NetIO you setup the connection using the IP and socket number, but in the Node Red WS you only set the URL ws:///directory. What am I missing, what connects the 2 together?
    If anybody can help me out, please lat me know.

Comments are closed.