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>

那么你们将如何将其转换为长时间轮询，请不要建议其他方法或不提供无济于事的答案，我只对我要的内容感兴趣，而且我很确定其他人也对纯JavaScript版本也很感兴趣，我之所以这样说是因为我

很长一段时间以来一直在网上询问这个话题，似乎没有人对回答这个话题感兴趣，或者如果他们如此认为为什么很难回答这个话题，为什么他们为什么这么多而不是基于纯JavaScript而不是基于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()

另一方面，在服务器端，您通常必须更改几件事才能有效地进行长时间轮询。

以轮询为目标的优化之间的重要区别在于，如何告诉服务器何时发送更新信息，但是那完全独立于用于请求数据的方法。

从轮询到长时间轮询

1 个答案: