在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調用一樣穩健，您需要實現一種重新創建方法。所以這是更多的代碼來編寫和維護...