Giters

s00500 / ESPUI

A simple web user interface library for ESP32 and ESP8266

Home Page:https://valencia.lbsfilm.at/midterm-presentation/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cloud based UI

garudaonekh opened this issue · comments

commented

Hi,
I want to run this ESPUI from the Internet by hosting the HTML/JS/CSS on the cloud so that I can access my esp32 from a public URL.

My. current implementation is using MQTT_ESP_VPN library, which route all the HTTP request through MQTT. It works. Somehow, this MQTTVPN is not stable, it crashed the ESP32 very often due to TCP/IP stack delay.

Any suggestion?

Thanks;

commented

I would not really recommend that actually... I would either go with homeassistant (where the webui is backed by a proper webserver) or setup wireguard (eg with pivpn)

commented

I would not really recommend that actually... I would either go with homeassistant (where the webui is backed by a proper webserver) or setup wireguard (eg with pivpn)

HASS is an overkill.

Actually, I have used your library on several Controller Projects and I find it very convenient and fast to create a UI for a small/medium controllers.

**Go back to my issue, can we?

Step 1- Upload HTML/CSS/JS on the cloud
Step 2-Switch or route Websocket via MQTT and keep the original Websocket for local communication.**

commented

I am travelling so I can't really try it, but I think you could just serve the static files from a normal webserver, but edit start() to instead of connecting to localhost to connect to the IP of your ESP. That should just work, I think.

commented

I am travelling so I can't really try it, but I think you could just serve the static files from a normal webserver, but edit start() to instead of connecting to localhost to connect to the IP of your ESP. That should just work, I think.

Yes, I have uploaded JS/CSS on server. But the remaining part is WebSocket. I want to route it through MQTT.

You mean editing this part of code:


websock = new WebSocket(
            "ws://" + window.location.hostname + ":" + window.location.port + "/ws"
        );

If I understand your code correctly, Controller(ESP32) act as WebSOcket Server and response for event from the client. Thus, can we move the websocketServer to public server(Cloud) and let Contoller(ESP32) act as subscriber and response to event. Websocket is a new thing for me.

commented

The ESP C++ code creates two servers. A (static) webserver that serves the HTML, CS, JS, and a websocket server which the client (web browser) sends messages to. Theoretically, there is no need for these to be the same machine.

The line of Javascript you've highlighted there creates a websocket connection from the user's web browser back to window.location.hostname which is the host that served the JS. However you could edit this and redirect the websocket connection somewhere else. So if your ESP was on 192.168.1.10 if you make that

websock = new WebSocket("ws://192.168.1.10:80/ws");

then you have hardcoded the websocket connection to go to the ESP regardless of where the files were served from. However, you might find that your web browser gets picky about connecting an unauthenticated websocket from one domain to another, you'll have to see.

Routing a connection "through MQTT" doesn't mean anything or really make any sense, because you can just connect directly. In fact often people do the exact opposite, and send MQTT messages via websockets.

commented

I got it partially working now. Your idea works!

Thank you very much!