От опроса до длительного опроса - PullRequest
Новая
       60

От опроса до длительного опроса

0 голосов
/ 31 декабря 2018

Итак, у меня есть скрипт, который использует базовый опрос для отображения общего количества записей в базе данных в режиме реального времени

, поэтому ничего сложного, так что любой может дать мне пример моего кода в длинной структуре опроса,Причина, по которой я задаю этот вопрос, потому что все статьи в поиске google

дают мне примеры в jQuery. Кажется, я не могу найти простой пример JavaScript, который имеет смысл в моей ситуации.Это скриншот .gif моего кода в действии, так что вы, ребята, знаете, что я имею в виду подробно.

.gif-example

Это мой основной пример кода опроса, которыйМне нужно конвертировать или изменить в длинный опрос.

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, просто на голову.

1 Ответ

0 голосов
/ 01 января 2019

Никогда не следует использовать 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()

На стороне сервера, с другой стороны, обычно требуется изменить несколько параметров, чтобы эффективный длительный опрос работал.

Важные различия между опросом и длинным опросом, нацеленные на оптимизацию,о том, как сообщить серверу, когда отправлять информацию об обновлении, но это полностью независимо от метода, который вы используете для запроса данных.

...