当用户 closes/refreshes 浏览器时，如何向后端发送请求？

Question

我想要实现的目标：

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

我的问题

当大厅中的一位玩家关闭 tab/browser、刷新或键入某些网站的地址时，我不知道该怎么办。起初我想使用 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()，但是当用户关闭 tab/browser 时，不会调用 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
    }
  }

Answer 1

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

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

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

当用户 closes/refreshes 浏览器时，如何向后端发送请求？

How can I send request to backend when user closes/refreshes browser?

angular

typescript

web-applications

onbeforeunload

ondestroy