javascript 如何在react中对浏览器关闭/选项卡关闭进行服务器调用

rryofs0p  于 12个月前  发布在  Java
关注(0)|答案(2)|浏览(210)

在React应用程序中,尝试使用react js中的redux Saga 在浏览器关闭/标签关闭时使用JavaScript事件进行服务器调用以保存数据,但它在调用服务之前关闭了浏览器。

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

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

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

字符串
在关闭浏览器或选项卡之前,应调用服务并保存数据,但在调用服务以保存数据之前,它会关闭浏览器

ghg1uchk

ghg1uchk1#

一种解决方案是在页面加载时建立WebSocket连接。
关闭选项卡/浏览器将关闭连接,您的服务器将立即知道。
一个成熟的解决方案是 * socket.io *,如果websockets不可用,它提供了“长轮询”或定期轮询的回退(在这种情况下,您需要一种“基于事件”的方法来处理请求)。
根据jfriend00's answer to Websockets and scalability,它们是相当可扩展的:
一台配置适当的服务器可以同时处理数十万个WebSocket连接,这些连接大多是空闲的,因为空闲的WebSocket几乎不使用服务器CPU。

hmmo2u0o

hmmo2u0o2#

浏览器关闭不会等到你的服务到达服务器并返回。更好的是,你可以根据下面的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() {
}

相关问题