Socket disconnects before the onBeforeUnload event is fired.

[chuckntaylor]

Describe the bug
I ensure that the user really meant to navigate away from the page by listening to the beforeUnload event on the window. However, before this is handled, the disconnect event is emitted before the user has a chance to make their choice of whether or not they want to stay on the page.

I would like to note that this issue does not happen when I downgrade to v2.

Stack where I have this issue:

• socket.io-client ^3.1.2
• socket.io 3.1.0
• socket.io-redis ^6.0.1

Stack where this is not an issue:

• socket.io-client 2.4.0
• socket.io 2.4.1
• socket.io-redis 5.4.0

Lastly, I am working within a Vue.js app, and so I do also work with the vue-socket.io package.

To Reproduce

window.addEventListener('beforeunload', (event) => {
      if (sessionHasStarted) {
        this.$socket.emit('test') // test emit to catch on the server. Does not appear on server - only the  disconnect event.
        event.preventDefault()
        event.returnValue = ''
      }
    })

Expected behavior
The disconnect should not trigger until a user confirms navigating away.

Platform:

• Device: MacBook Pro 2017
• OS: macOS Big Sur 11.2.3

Additional context
I found what appeared to be an old option

const socket = io(url, { 'sync disconnect on unload':false });

But this does not seem to work.

[darrachequesne]

A temporary workaround is to call event.stopImmediatePropagation():

window.addEventListener('beforeunload', (event) => {
  if (sessionHasStarted) {
    this.$socket.emit('test') // test emit to catch on the server. Does not appear on server - only the  disconnect event.
    event.preventDefault()
    event.stopImmediatePropagation()
    event.returnValue = ''
  }
})

More information here: socketio/engine.io-client#658

[chuckntaylor]

While I have since moved my entire project to v2 to resolve my issue, I should thank you for your suggestion. I will take a look at this. I was unaware of the event.stopImmediatePropagation() method.

[darrachequesne]

Starting with socket.io-client@4.1.0, you can now disable the "beforeunload" handler with the closeOnBeforeUnload option:

const socket = io(url, {
  closeOnBeforeunload: false
});

[rickgbw]

Using closeOnBeforeunload it solves the problem, however the server will take a long time to detect the user disconnection. Of course it is the side effect, but in 2.x versions this detection seems to be instantaneous, even without this "beforeunload" trigger.

[chuckntaylor]

I have finally moved up to the latest versions of these packages while at the same time moving my project to Typescript.
I can confirm that with:

• socket.io-client ^4.1.2
• socket.io ^4.1.2
• socket.io-redis 6.1.1

Using the closeOnBeforeunload: false option resolved my previous issues. Thank you kindly for this awesome package!