fix unreasonable room user information status

[WinterJack002]

When a user who originally joined a room exits due to some interruption (like a page refresh or browser closure), their status still appears online to other users in the room(like the picture), which doesn't make sense. Additionally, the Redis database will perpetually retain this "frozen" stream, resulting in a waste of resources.

Add 'useEffect' listen interruption and release resources.

[a-wing]

BTW: When beforeunload use http request will display cancel in console

Maybe should set keepalive: true

https://stackoverflow.com/questions/63157089/sending-post-request-with-fetch-after-closing-the-browser-with-beforeunload

[a-wing]

refresh action can send event beforeunload

Why separate refresh and termination?

unload event is Deprecated https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event

[WinterJack002]

I see carefully.

• Test result:

Based on my testing results in the development mode on my local machine: The beforeunload event is sufficient for Chrome , meaning there's no need to add a keepalive request. However, Firefox behaves differently. When refreshing the page, it doesn't trigger the callback function of the beforeunload event, and when closing the window, it doesn't trigger the 'unload' event. That's why I'm using both of them here.

unload event is Deprecated, but still work in Firefox.

Most importantly, I tried the keepalive solution, but it seemed ineffective.

• Possible reason:

By the way, I found these introductions to beforeunload on MDN Web Docs, and I think it may be related to Woom's SPA design.

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

• Test environment:

User-Agent:
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:132.0) Gecko/20100101 Firefox/132.0

• Personal suggestion:

So, in a word: Perhaps this is the simplest way to solve this problem:

    window.addEventListener('unload', cleanup) // used to monitor Firefox refresh event

or we can change delStream() by using navigator.sendBeacon maybe? how do u think?

Looking forward to your opinion.

• Personal understanding:

The 'beforeunload' is used to perform callback BEFORE the page is unloaded, but it can prevent some asynchronous operations (like network requests) from completing within the event. This is why DELETE requests sometimes show as "canceled" in the console. That's why using the 'unload' event allows the request to trigger AFTER the interface is unloaded (or refreshed).

When close a browser window, the browser doesn't immediately interrupt all activities. Instead, it tries to complete asynchronous operations (like sending network requests) before the window is closed. That's why the 'beforeunload' event works when close the window.

[WinterJack002]

user-agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

[a-wing]

OS: MacOS 15.1 (24B83) (M3 Pro)
Chrome: 130.0.6723.70
Friefox: 132.0.2 (aarch64)
Safari: 18.1 (20619.2.8.11.10)

event	Chrome	Firefox	Safari
beforeunload	ok	console error, no request	console error, request ok
unload	console error, no request	ok	console no request log, no request
beforeunload + keepalive	ok	console error, no request	console error, request ok
unload + keepalive	console error, request ok	ok	console no request log, request ok