Firefox cannot establish the websocket connection but other browsers and firefox private browsing can.

[kj4tmp]

Description

It looks like firefox cannot connect to the websocket while other browsers can.
I believe this issue has been present for a few months.
This issue seems to only present itself when starting the app multiple times (while developing). I have not been able to reproduce the issue when the app is run inside a docker container and the entire docker container is restarted / rebuilt between code changes.

The issue is also present when restarting the app multiple times inside a docker container without restarting the entire container (when using vscode devcontainers), indicating the issue is present on windows and linux(WSL).

Here is how I can produce the issue:

1. Write main.py
2. run it using python main.py

nicegui version: 1.4.18
windows 11
python 3.11.19

main.py:

from nicegui import ui

ui.button("click me!", on_click=lambda: ui.notify('clicked!'))

ui.run(
    port=80,
    title="test",
    favicon="🚀",
    reload=False,
    storage_secret="redacted",
    show=False,
    uvicorn_logging_level="debug",
)

Sometimes, Firefox reports error in the web developer tools:

Firefox can’t establish a connection to the server at ws://localhost/_nicegui_ws/socket.io/?client_id=5cd0b96f-d751-4877-b732-1bbabb013077&EIO=4&transport=websocket. socket.io.min.js:6:17426

The connection to ws://localhost/_nicegui_ws/socket.io/?client_id=5cd0b96f-d751-4877-b732-1bbabb013077&EIO=4&transport=websocket was interrupted while the page was loading. socket.io.min.js:6:17426

and the page refreshes periodically while showing sometimes:

1. a white page, or
2. the expected content but nothing happens when clicking things.

Firefox can connect again when in private browsing:

[kj4tmp]

the working browser shown above is Edge

[kj4tmp]

I suspect it has something to do with the browser cache.

[rodja]

Can anyone else reproduce this issue?

[kj4tmp]

it may require making small changes to the code (add / remove the button) between restarts to trigger the firefox failure

[me21]

Firefox works for me and my project. Probably one of the extensions interferes since the problem doesn't exist in private mode?.. 🤔
I start the app using Debug in PyCharm IDE.
If you suspect the cache is the issue, does reloading the page with Ctrl+F5 (bypassing the cache) help?

[kj4tmp]

I was not able to repeat the issue after re-installing the Adblock Ultimate Extension. I think I was running a multi-year old version of the extension.

[kj4tmp]

nevermind the issue is back.

Issue persists after:

1. Removing all extensions
2. ctrl + F5

[kj4tmp]

restarting firefox in "troubleshooting mode" also seems to fix the issue (from the hamburger menu -> help -> troubleshooting mode

[guessvic]

This is only for reference as I was experiencing when using self-signed certificate in my JAVA (openjdk version "21.0.2" 2024-01-16 LTS) project running apache-tomcat (apache-tomcat-11.0.0-M20).

1. HTTPS: Microsoft Edge, Google Chrome, and Mozilla Firefox all working fine.
2. WSS: Microsoft Edge and Google Chrome can establish the WSS connect. Mozilla Firefox cannot establish the WSS connection.

Eventually, I simply added the port of WSS to the Mozilla Firefox and problem was resolved. Below are steps of what I did:

1. Entered in its address bar "about:settings#privacy" and scroll to find "View Certificates...".
2. Once "View Certificates..." is found and clicked, will lead to "Certificate Manager".
3. Select "Servers" in "Certificate Manager" and "Add Exception...".
4. In appeared dialog (Add Security Exception), enter the "https://[domain]:[port of the WSS uses].

So for my case, I used https://localhost:8444 as an example for my WSS port and now my Mozilla Firefox can establish the WSS connection.

I hope this reference may help you or anyone who maybe experiencing similar issue with the Mozilla Firefox.