我想在用户关闭浏览器选项卡时将数据发布到 API

Question

我陷入了一个需要你们输入的场景。目前，我正在开发一项功能，即锁定其他管理员的预订。我在预订表中创建了一个字段，当管理员进入预订时，我将 user_id 放置在该字段中，该字段会使用当前管理员 ID 进行更新，并且其他管理员目前确实可以访问该预订。

所以问题是，如果用户关闭该选项卡，其他管理员的预订也会保持锁定状态。

我在 vueJs 中尝试了很多不同的方法，例如beforeunloadMethod. 我使用过 Xhr 方法和 axios 在这种情况下都失败了。我还能做什么来解决这个问题

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)

还尝试了 beforeunload 事件上的 axios 调用

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

当用户关闭选项卡时我需要发布 API

Answer 1

没有可靠的方法可以在选项卡/窗口关闭时执行某些操作。这违背了“关闭”选项卡（即释放资源）的原则。

我处理你的情况的方法是让前端保存一些在选项卡关闭时自行消失的东西。

要么打开一个可用于许多其他目的的 websocket，当它死机并且在几秒钟内没有返回时，您就知道客户端已断开连接，或者在选项卡打开时以及错过了某个时间时发送常规 ping几次 ping 操作后，您就可以安全地假设客户端已断开连接。