Web Interface not responsive after several menu tab transitions

[JoDaSa]

First of all, congratulation @theelims for the great Framework. The fact that I, a not so experimented programmer, have been able to work just based on documentation and examples the last couple of months shows the great quality of your work. Unfortunately, I hit a wall solving a problem related to reiterative navigation between tabs of the menu. The steps to reproduce the problem are:

1. The ESP32-S3 connects to the station successfully.
2. Open the browser to the root (panel)
3. Move between the tabs of Control Panel and Setting six times

5. The interface becomes unresponsive (no updates or commands from/to the interface), “Connection to device” toasts appear and the browser console shows “WebSocket connection to 'ws://localhost:5173/ws/events' failed: WebSocket is closed before the connection is established.”
6. From here on the interface is stuck for several seconds until the “Arduino Event 5” happens, the connection resets and the ESP32 reconnects to the network again. In some occasions the stuck state lasts much longer.
   

I’m using a custom service “master” that implements _httpEndpoint, _eventEndpoint and _webSocketServer, in a similar fashion that the LightStateService example.

In the “Control Panel” and the “Settings” I use:

    onDestroy(() => {       
            socket.off('master');
            console.log(`Panel on destroy`);
        });

I thing this is related to the creation of more than 5 clients and the fact that each time that I change tabs the previous client is not disconnected.

I checked the issue #64 that is somehow related to the fact of changing between tabs, but I could not fix it using the recommendations provided.

I’ll appreciate any guidance on how to solve this issue. Thanks

[theelims]

@JoDaSa I just realized this is still open. Can you please share your onMount(() => ..) function as well? It looks to me, that you establishing a new connection each time, instead of using the existing. It must not contain socket.init, only socket.on.

[JoDaSa]

@theelims I use only socket.on on onMount (() => ..) . Nevertheless I implemented a workaround to force socket closing by placing disconnect('close') in socket.ts

      function createWebSocket() {
      		...	
      		off: (event: string, listener?: (data: any) => void) => {
      			
      			unsubscribe(event, listener);
      			disconnect('close'); //add this to force disconnection
      		}
      	};

and add a semaphore in EventSocket.cpp

      else if (event == "unsubscribe")
            {
                xSemaphoreTake(clientSubscriptionsMutex, portMAX_DELAY);
                client_subscriptions[doc["data"]].remove(request->client()->socket());
                xSemaphoreGive(clientSubscriptionsMutex);
                ESP_LOGI("EventSocket", "Unsubscribed from event: %s", doc["data"].as<String>());
            }

DISCALIMER: I'm not sure if this happens to other users or is simply a problem in my project. I leave this as reference in case someone else encounters the same problem.

Again, thanks for this great project.