I want to POST data to an API when user close the browser tab

Question

I'm stuck in a scenario need input from you guys. Currently, I'm working on a feature which is to lock the booking for other admins. I created a field inside the bookings table where I put the user_id when an admin comes inside the booking that fields get updated with the current admin ID and other admins do have access to that booking at the moment.

So the problem is If the user closes the tab the booking remains locked for other admins as well.

I tried many different ways in vueJs such as beforeunload Method. I have used Xhr methods and axios both are failed in this condition. What else I can do to fix this issue

removeUser () {

    var params = JSON.stringify({ locked_by: '' });
    let xhr = new XMLHttpRequest()
    xhr.open('PUT',Url, true)
    xhr.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('app_access_token'))
    xhr.setRequestHeader("Content-length", params.length);
    xhr.setRequestHeader("Content-type", "application/json; charset=utf-8")
    xhr.responseType = 'arraybuffer'
    xhr.onreadystatechange = function() {//Call a function when the state changes.
    if(xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
}
xhr.send(params);

mounted() {
    window.addEventListener('beforeunload', this.removeUser)

also tried the axios call on beforeunload event

removeUser (id) {
    let payload = {
        locked_by: '',
        id: id
    }
    this.updateIsLockedField(payload).then(() => {
        console.log('updated')
        return 'something'
    })
},

I need to post the API when the user closes the tab

Answer 1

There is no reliable way to execute something on tab/window close. It is against the very principle of "closing" the tab i.e. freeing up resources.

The way I would handle your situation is to have the frontend hold something that dies on it own when the tab closes.

Either open a websocket which you can use for many other purposes, and when it dies and does not come back within a few seconds you know that the client is disconnected, or send a regular ping while the tab is open and when it has missed a few pings you can safely assume the client is disconnected.