tldr:
I search for a reliable method to identify on client side an open WebSocket connection which hadn't incoming messages for some time and a procedure to reconnect to the WebSocket server without reloading the full page.
long story:
On an ESP32 I try to implement a webserver with several values (e.g. a button state).
These values should be updated on the page immediately when they change.
Therefore I decided to use a websocket connection. I'm using "WebSockets" by Markus Sattler from the library manager.
New values are sent as JSON. On client side the JSON gets parsed by the JavaScript and updates the page.
My current code works as long nothing goes wrong.
the problem:
esp_webserver_websocket.zip (6.9 KB)
It gets messy under following conditions:
- when the Server (ESP32) gets offline
- when the Server (ESP32) gets resetted
- when either Server or Client looses wifi connection for a short time - even if wifi is stable again
In these cases the WebSocket connection on client stays in state 1 (open) and never times out.
I have tried several experiments/workarounds based on heartbeats from the server.
a) on timeout: close and reconnect WebSocket:
On timeout close the connection and reconnect. Even when respecting the proper connection.readyState like checking for closing (2) and "wait" till closed (3) before doing a new connecting (0) and see if I get a open (1) connection - the only result is, that I see that a connection was established.
On client side I do not get an event fired for .onopen() (even the readyState is clearly 1!)
On client side I do not get any data from the server.
b) on timeout: reload the page
when I just reload the page with the JavaScript (instead of close connection - wait - open) - the page reloads as expected, the WebSocket gets opened and the server data is received again by the client.
Even if this is somehow working, I don't want to take this as final solution.
I add a zip with my sketch. The sketch is splitted in several tabs.
The only "external" library can be found in the library manager.
Most of the "receiving" part for the client is obvious in the tab server - see the function handleWS() for the full JavaScript. There is also a stripped down version handleWS_XXX() without any timeout handling which can replace the other handleWS by renaming the two functions.
Now I'm searching for hints - better even a working examples how a websocket connection can be reastablished for an ESP32 (or ESP8266). I prefer to use the default webserver/websockets (not the async ones). I would like to keep the JavaScript small/simple.
I don't mind to switch over to another websocket library, as long as the sketch can handle my three test conditions.
Thank you for reading.
Sketch with several tabs:
esp_webserver_websocket.zip (6.9 KB)
