如何在瀏覽器關閉/選項卡關閉中進行服務器調用

Question

我正在嘗試使用redux saga在服務器上使用JavaScript事件在瀏覽器關閉/選項卡關閉中的React js中使用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);
}

我希望在關閉瀏覽器或選項卡之前先調用服務並保存數據，但是在調用服務以保存數據之前它將關閉瀏覽器

Answer 1

瀏覽器關閉不會等到您的服務到達服務器並返回。 更好的是，您可以根據以下stackoverflow答案更改實現。

嘗試檢測瀏覽器關閉事件

更新：

請嘗試從您的API返回布爾值，從中您可以了解到達服務器的匹配。 然后，您可以將close事件返回到瀏覽器。

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() {
}

Answer 2

一種解決方案是在頁面加載時建立Websocket連接。

關閉標簽/瀏覽器將關閉連接，服務器將立即知道。

一個完善的解決方案是socket.io ，如果Websocket不可用，它可以回退到 “長輪詢”或常規輪詢（在這種情況下，您將需要“基於事件”的方法來處理請求）。

---

根據jfriend00對Websockets和可伸縮性的回答 ，它們具有很好的可伸縮性：

正確配置的單個服務器可以處理成千上萬個同時處於空閑狀態的webSocket連接，因為空閑的webSocket幾乎不使用服務器CPU。