用户关闭/刷新浏览器时如何向后端发送请求？答案

【问题标题】：How can I send request to backend when user closes/refreshes browser?用户关闭/刷新浏览器时如何向后端发送请求？
【发布时间】：2019-04-25 16:49:54
【问题描述】：

我想要达到的目标：

我有一个自动更新的大厅，所以如果任何玩家离开，其他人可以立即看到它。当玩家退出时，我向后端发送请求将他踢出大厅，然后我使用套接字“戳”玩家留下的大厅，以便该大厅可以自我更新并显示实际的玩家列表。

我的问题

当大厅中的一名玩家关闭标签/浏览器、刷新或键入某些网站的地址时，我不知道该怎么办。起初我想使用beforeunload 事件，但我只设法得到用户的确认，他是否真的想离开。不幸的是，我找不到任何信息来检查用户的操作（离开或留下）。

  @HostListener('window:beforeunload', ['$event'])
  unloadNotification($event: any) {
    // if shouldnt be closed ask for confirm
    if (!this.canDeactivate()) {
      $event.preventDefault();
      $event.returnValue = true;
    }
    // it would be ideal for me if something like this was possible
    // but according to what I have read so far, browsers dont allow checking user's response
    // for this event
    if(userDecidedToLeave){
      this.cleanUp(); // sends request to backend to kick player from lobby
    }
  }
}

然后我决定采取“简单的方法”，在离开时跳过用户的确认，只使用ngOnDestroy()，但是当用户关闭选项卡/浏览器、刷新、输入某个网站的地址或它时，ngOnDestroy() 不会被调用在这种情况下无法从ngOnDestroy() 发送请求。（或其他我想不出的原因）。

  ngOnDestroy() {
    // if user left the lobby
    if (!this.canDeactivate()) {
      this.cleanUp(); // send request to backend to kick user from the lobby and then update lobby
    }
  }

【问题讨论】：

标签： angular typescript web-applications onbeforeunload ondestroy

【解决方案1】：

由于您使用 Web 套接字，因此您可以定期检查每个用户以查看他们当前是否在线。这样做更适合以下用例：

用户可以简单地重新加载页面。在这种情况下，无需向他显示确认对话框或将他踢出聊天，因为他会马上回来。
他的浏览器可能会意外关闭（例如浏览器崩溃，或者如果他使用移动浏览器，他可以随时退出浏览器应用等）

否则，据我所知，仅使用 JavaScript 是不可能完成此类任务的（即通过beforeunload 事件等）。

【讨论】：