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

Question

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

我希望在用户不刷新整个页面的情况下刷新消息数。

我正在考虑在 html5 网络工作者中使用 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 调用一样健壮，您需要实现一种重新创建它的方法。所以需要编写和维护更多的代码...

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

using setinterval function in html5 web worker to poll server

setinterval

web-worker