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

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

我想要实现的目标:

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

我的问题

当大厅中的一位玩家关闭 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
    }
  }

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

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

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