How can I know if a socket disconnection occurred due to the page closing?

[trevorwrightdev]

I am in a situation where I want to do different things depending on the following two possibilities:

1. If a disconnect occurs because the page has been unloaded
2. If a disconnect occurs through other means

Right now, by default I keep players logged in to the game for two minutes if they disconnect. This is because unpredictable disconnects can occur. But this means that any player that leaves the game on purpose will linger, which I want to prevent.

The solution I attempted was this:

On the client,

window.addEventListener('beforeunload', () => {
    this.socket.emit('manualDisconnect')
})

On the server,

import { Event } from '../lib/types'
import { logout } from '../lib/utils/logout'

const ManualDisconnect: Event = {
    name: 'manualDisconnect',
    lobbyRequired: false,
    handler: ({ player }) => {
        player.socket.disconnect()
        logout(player.id)
        console.log(`${player.profile.displayName} was manually disconnected.`)
    }
}

export default ManualDisconnect

This solution works okay on some browsers, but it is unreliable. According to the code for this project, Firefox and Chrome have different behaviors concerning their onbeforeunload disconnect events.

Another solution I tried was to use the disconnect event reason to determine if a socket connection was closed due to the page unloading. The reason for disconnects from the page unload event is "transport close" which according to the documentation can also be a reason for a disconnect if the user just loses connection or switches from wifi to 5G, which is the opposite of what I would have hoped.

If you have any suggestions on how I can tell whether or not a disconnect was due to a page unload, I would greatly appreciate it! Thank you.

[darrachequesne]

Hi!

I think your best option indeed is the beforeunload event, eventhough it's not perfect.

Alternatively, you could maybe use the sendBeacon() method to send the socket.id?

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon