从基本轮询转换为长时间轮询

Question

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

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

搜索为我提供了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>

那么你们如何将其转换为长时间轮询。

Answer 1

长轮询的概念同时依赖于后端代码和前端代码。您需要创建一个协议，在该协议中，客户端将保持一个连接，而与后端仅保持一个连接。后端应等待，直到请求的数据/度量已更改，然后才能响应。这是“长轮询”术语的来源，只是常规轮询和长轮询之间的区别。

在伪代码中，这就是前端逻辑的样子。

function checkForNewRecords(metric = 0){
  request to check for new records (include current metric = 46)
    if response status code is exactly 200
      then the metric is no longer 46. Use the response to update the page
    after each response, regarless of the status code, execute checkForNewRecords(metric) again
}

Call checkForNewRecords()

在伪代码中，这是后端逻辑的样子：

$metric = client provided metric value
$startTime = the current time

function getNumberOfRecords(){
  return the number of records from the database
}

Loop - while getNumberOfRecords() is equal to $metric
  If we waited for 25 seconds or more
    end the request with a blank request and a status code like 204    
  Otherwise wait 2 seconds and continue the loop

End the request by responding with the last getNumberOfRecords() output