如何在浏览器关闭/标签关闭时进行服务器调用反应答案

【问题标题】：How to do server call on browser close/tab close in react如何在浏览器关闭/标签关闭时进行服务器调用反应
【发布时间】：2019-12-17 20:40:52
【问题描述】：

我正在尝试使用 JavaScript 事件在浏览器关闭/选项卡关闭时使用 redux saga 进行服务器调用以保存数据，但它会在调用服务之前关闭浏览器。

onClose = () =>{
  return this.props.saveData()  // saveData will save data using redux saga.
}

componentDidMount() {
  window.addEventListener('beforeunload',this.close);
}

componentWillMount() {
  window.addEventListener('beforeunload',this.onClose);
}

我希望在关闭浏览器或选项卡之前调用服务并保存数据，但它会在调用服务保存数据之前关闭浏览器

【问题讨论】：

标签： javascript reactjs react-redux dom-events redux-saga

【解决方案1】：

浏览器关闭不会等到您的服务到达服务器并返回。更好的是，您可以根据以下 stackoverflow 答案更改您的实现。

Trying to detect browser close event

更新：

请尝试从您的 api 返回一个布尔值，从中您可以了解到达服务器的命中。然后就可以将关闭事件返回给浏览器了。

onClose = () =>{
   let status = this.props.saveData();  // saveData will save data using redux saga.
   if(status){
      return;
}

更新：

onClose = () =>{
   let status = this.props.saveData();  // saveData will save data using redux saga.
   if(status){
      return;
}

componentDidMount() {
  setTimeout(function() {
     window.addEventListener('beforeunload',this.close);
  }, 2000);
}

componentWillMount() {
}

【讨论】：

浏览器关闭事件也是不可预测的，根据我的经验，有时它不会像预期的那样调用。
它正在返回消息。我不想返回和显示消息。想要调用服务器。没有从您发布的 url 获取如何使用代码。
我尝试了示例程序，它的工作正常并等待响应。一旦它到达返回语句，选项卡就会立即关闭。
感谢阿尔文·何塞。它有时有效，有时无效。此外，它不适用于 IE11
正如我之前所说，浏览器关闭事件不可预测。它可能会打电话，也可能不会。我可以在浏览器关闭时知道该 api 调用的目的吗？这样我会找到任何合适的解决方案。你在做任何多次登录检查吗？

【解决方案2】：

一种解决方案是在页面加载时建立 websocket 连接。

关闭选项卡/浏览器将关闭连接，您的服务器会立即知道。

一个完善的解决方案是 socket.io，如果 websocket 不可用，它会提供回退到“长轮询”或定期轮询（您需要“基于事件”的方法来处理请求在那种情况下）。

根据jfriend00's answer to Websockets and scalability，它们的可扩展性非常好：

适当配置的单个服务器可以同时处理数十万个大部分空闲的 webSocket 连接，因为空闲的 webSocket 几乎不使用服务器 CPU。

【讨论】：