从轮询到长轮询

Question

所以我有一个脚本，它使用基本轮询来实时显示数据库中的记录总数

所以没有什么复杂的，所以任何人都可以给我一个长轮询结构中的代码示例。我之所以问这个问题是因为google上的所有文章

search 为我提供了 jQuery 中的示例我似乎无法找到在我的情况下有意义的纯 JavaScript 示例。这是一个 .gif 截图 我的代码在行动，所以你们知道我的意思。

这是我需要转换或更改为长轮询的基本轮询示例代码。

index.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>

check-for-new-records.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()

另一方面，在服务器端，您通常必须更改一些内容才能使长轮询有效地工作。

针对优化的轮询和长轮询之间的重要区别在于如何告诉服务器何时发送更新信息，但这完全独立于您用于请求数据的方法。