在html5 web worker中使用setinterval函数来轮询服务器

Question

我的页面中有一个电子邮件按钮，它显示用户有多少条未读消息。 有一个端点返回未读消息的数量。

我希望刷新消息的数量而无需用户刷新整个页面。

我想在html5 web worker中使用setInterval每10秒调用一次端点，并相应地更新ui，如果有新消息。

这种方法的缺点是什么？如果有更好的方法来实施这样的事情？

Answer 1

我没有看到这种方法的任何“con”。它将运行在不同的线程中，所以你的mainJS不会被打断。确保实施正确的错误处理！你想close工人，如果意想不到的事情发生。

这里是我做了类似的东西webworker JS文件的例子：

function checkStatus() { 
    var ajaxRequest = new XMLHttpRequest(); 
    ajaxRequest.onreadystatechange = function() { 
     if(ajaxRequest.readyState == 4) { 
      self.postMessage(ajaxRequest.responseText); 
      var timer; 
      timer = self.setTimeout(function(){ 
       checkStatus(); 
      }, 10000); // 10 seconds 
     } 
    } 

    var queryString = "?"; // hand over i.e. a userID 
    ajaxRequest.open("GET", "/statusCheck.php"+queryString, true); 
    ajaxRequest.send(null); 
} 

this.onmessage = function(e){ 
    checkStatus(); 
}; 

这是非常简化。来自我的mainJS的消息包含例如userID和其他变量，因此您可以将它们作为GET或POST参数传递给statusCheck.php。我建议使用一个JSON格式的字符串作为你的PHP的响应，你也有你的用户的邮件数量。 self.postMessage()回到你的mainJS，你可以用它做任何你喜欢的事情。 :)

Answer 2

我认为这是一个骗局......过于复杂。你可以在没有web worker的情况下做：在主线程中发起ajax请求是可以完成的，而用户不会注意到UI的任何中断。这包括如果你喜欢的投票。

唯一的例外是，如果响应在主线程中触发了一些繁重的处理，它可能会暂停一下，用户可能会注意到。但是，从服务器处理一个小的响应，我怀疑不会属于这个类别。

此外：浏览器可以决定杀死一个网络工作者。为了使您的解决方案与主线程中的ajax调用一样稳健，您需要实现一种重新创建方法。所以这是更多的代码来编写和维护...