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

Question

我想要实现的目标：

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

我的问题

当大厅中的一个玩家关闭标签/浏览器，刷新或键入某个网站的地址时，我不知道该怎么办。起初我想使用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
    }
  }

Answer 1

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

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

否则，据我所知，只有JavaScript（即通过beforeunload事件等）才能实现这种任务。