從輪詢到長輪詢

Question

所以我有一個腳本，它使用基本輪詢來實時顯示數據庫中的記錄總數

所以沒有什么復雜的，所以任何人都可以給我一個長輪詢結構的代碼示例。 我之所以問這個問題是因為谷歌上的所有文章

搜索為我提供了 jQuery 示例我似乎無法找到一個在我的情況下有意義的普通 JavaScript 示例。 這是我正在運行的代碼的 .gif 屏幕截圖，因此你們知道我的詳細意思。

這是我需要轉換或更改為長輪詢的基本輪詢示例代碼。

索引.php

<style>
    #label{
    margin: 0;
    color: red;
    font-weight: bold;
    }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded',function(){

    /**********************************************************************
    Check for a new record amount in the data base
    **********************************************************************/

    function checkForNewRecords(){

    var xhr= new XMLHttpRequest();

    xhr.onreadystatechange= function(){

        if(xhr.readyState == 4){
        document.querySelector('#output').innerHTML= xhr.responseText;

        }
      }

    xhr.open('POST','check-for-new-records.php');
    xhr.send();  

    }

    setInterval(function(){checkForNewRecords()},1000);

    });
    </script>

    <p id='label'>Total records in the database in real time in basic polling</p>

    <div id='output'></div>

檢查新記錄.php

<?php

    $db_servername= 'localhost';
    $db_username='jd';
    $db_password= '1234';
    $db_name= 'test';

    $db_connect= new mysqli($db_servername,$db_username,$db_password,$db_name);

    $db_query= "SELECT COUNT(id) AS id FROM example";

    $db_result= $db_connect->query($db_query);
    $db_row= $db_result->fetch_object();

    $total_records= $db_row->id;

    ?>

    <style>
    #total-records{
    margin-top: 0;
    }
    </style>

    <p id='total-records'><?php echo $total_records; ?></p>

那么你們如何將其轉換為長輪詢，請不要建議其他方法或不要提供沒有幫助的答案我只對我要求的內容感興趣，我很確定其他人也是也對純 JavaScript 版本感興趣，我之所以這么說是因為我

在網上詢問這個話題很長時間了，似乎沒有人有興趣回答這個問題，或者他們認為回答這個問題太難了，如果是這樣，為什么有這么多關於這個話題的 jQuery 示例而不是基於純 JavaScript 並且不是每個人都喜歡使用庫。 我只是說我對我從這個基於純 JavaScript 的主題中得到的無用答案感到不滿意，請注意。

Answer 1

你不應該使用setInterval而是使用setTimeout 。

如果您使用setTimeout那么輪詢和長輪詢的基本區別僅在於延遲發生的地方。 對於輪詢，服務器將立即響應（即使沒有發生任何更改），客戶端將等待 n 秒以發送下一個請求。 對於長輪詢，服務器將等待響應，直到新數據可用（或發生超時），客戶端將在收到響應時立即發送新請求。

使用XMLHttpRequest 、 fetch或jQuery實現它絕對沒有什么不同，客戶端唯一的區別是下一個請求的延遲。

輪詢：

function checkForNewRecords() {

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {

    if (xhr.readyState == 4) {
      document.querySelector('#output').innerHTML = xhr.responseText;

      setTimeout(checkForNewRecords, 1000); // polling has the delay on the client
    }
  }

  xhr.open('POST', 'check-for-new-records.php');
  xhr.send();

}

checkForNewRecords()

長輪詢：

function checkForNewRecords() {

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {

    if (xhr.readyState == 4) {
      document.querySelector('#output').innerHTML = xhr.responseText;

      setTimeout(checkForNewRecords, 0);
      // long-polling has the delay on the server 
      // the client initiates a new request immediatly after receiving the response.
    }
  }

  xhr.open('POST', 'check-for-new-records.php');
  xhr.send();

}

checkForNewRecords()

另一方面，在服務器端，您通常必須更改一些內容才能使長輪詢有效地工作。

輪詢和長輪詢針對優化的重要區別在於如何告訴服務器何時發送更新信息，但這完全獨立於您用於請求數據的方法。