Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix unreasonable room user information status #27

Merged
merged 2 commits into from
Nov 28, 2024
Merged

fix unreasonable room user information status #27

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b37003
fix unreasonable room user information status
WinterJack002 Nov 27, 2024
8d40f57
fix(webapp): api delStream keeplive
a-wing Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions webapp/components/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,19 @@ export default function Layout(props: { meetingId: string }) {
setMeetingJoined(false)
}

useEffect(() => {
const cleanup = () => {
delStream(props.meetingId, localStreamId)
}
// Need to set separate Browser Events Parameters for Firefox refresh and browser termination
window.addEventListener('beforeunload', cleanup) // Used to monitor the browser termination of Firefox event
window.addEventListener('unload', cleanup) // Used to monitor Firefox refresh event
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

return () => {
window.removeEventListener('beforeunload', cleanup)
window.removeEventListener('unload', cleanup)
}
}, [props.meetingId, localStreamId])

//useEffect(() => {
// let shareScreenId = ""
// const setShareScreenId = (id: string) => shareScreenId = id
Expand Down