B4R Tutorial Full responsive ESP8266 settings WebApp with websockets

Merry Christmass everyone in the Christian community of this forum,

Yesterday I 've had a great crazy idea which turned out to be a working one too.

Normally one would answer to the question if it is possible to create a fully functioning fully responsive ESP8266 settings webapp in the board that this is impossible. And it is (as far as my knowledge goes). So if you can't go through an obstacle just go around it. The solution is to create the web app in B4J and when you reach through your browser to your ESP8266 board it sends you a brief html code with an iFrame pointing to the WebApp passing also an id parameter. The web app is MQTT enabled both as broker and as a client and the board connects through MQTT to it and subscribes to the Topic with a name as the ID. To the same topic subscribes also the WebApp when the socket is connected as it gets it from the parameter passed. This ensures the return path to the board from the WebApp of the settings.

I used the code shown in this thread as a base which I changed a lot.

Long delay before iOS browser gets first page from ESP server

I am finding that it takes a long time for an iOS browser (e.g Safari on iOS 14.8) to get the first page from a basic ESP8266 server. Sometimes can take more than 30s or even not get it at all. Having stripped the code to pretty much the bare minimum and with some judicious logging I have...

www.b4x.com

You can watch the following video to get an idea of how it works (it is watched better maximized). The code follows. Don't forget to open inbound connections in your computer's firewall in ports 51041 and 51042 and also to change the credentials to the WiFi in the B4RWebServer as well as the variables bIP and sIP which must point to the IP of the computer that runs the WebApp. It goes without saying that the board is already connected to the same network as your computer running the B4J WebApp.

 

[pliroforikos]

Can you please tell us some of uses of the above? Why to run a server on esp? Iot or something else?

 

[hatzisn]

Can you please tell us some of uses of the above? Why to run a server on esp? Iot or something else?

You can create as I did a webapp for the settings of an IOT device which you can access and after passing credentials check, set it from everywhere with port forwarding or with a slight modification also without port forwarding. You can also connect a GPIO expansion to the ESP8266 and see the measurements of multiple sensors with this approach, and what ever else anyone can think of as a case. There is a misunderstanding though. The web app runs outside but the web server in the ESP8266 embedes it in its page. This application is definitely usefull for IOT only because for everything else you can use a computer.

 

[hatzisn]

It was also definitely a situation of let's see what will happen if we do this (iframe) in the html the server returns.

 

[pliroforikos]

The magic of research...

 

[hatzisn]

Can you please tell us some of uses of the above? Why to run a server on esp? Iot or something else?

Just out of curiosity. I read again my message and I think that my intention (ESP8266 settings web app) was clear enough, wasn't it?

 

[pliroforikos]

You can create as I did a webapp for the settings of an IOT device which you can access and after passing credentials check...

There is a misunderstanding though. The web app runs outside but the web server in the ESP8266 embedes it in its page. This application is definitely usefull for IOT only because for everything else you can use a computer.

Well, let me tell you how i'm working and tell me if there are any differences.
ESP + MQTT server + Android App to read topics from mqtt. Mqtt runs on a rock64 (like raspberry pi) with openmediavault os in a docker container. Its only for my hobbies so i dont need the maximun security.
Αλλά πάντα μου αρέσει να μαθαίνω νέες ιδέες και για αυτό σε ρώτησα!

 

[hatzisn]

Well, let me tell you how i'm working and tell me if there are any differences.
ESP + MQTT server + Android App to read topics from mqtt. Mqtt runs on a rock64 (like raspberry pi) with openmediavault os in a docker container. Its only for my hobbies so i dont need the maximun security.
Αλλά πάντα μου αρέσει να μαθαίνω νέες ιδέες και για αυτό σε ρώτησα!

It is the same. You can add security too if you save in ESP8266's EEPROM a JSON with username-password. The only advantage with the webapp is that you can access it also with your browser and no mobile app.