Odśwież div, ale tylko wtedy, gdy pojawi się nowa zawartość z pliku php

Nie tak dawno temu spotkałem się z podobnym problemem, zakładam, że używasz mysql lub czegoś do przechowywania komentarzy po stronie serwera?

Rozwiązałem mój problem, najpierw dodając kolumnę liczb całkowitych znacznika czasu do mojej tabeli mysql, a następnie po dodaniu nowego wiersza po prostu użyję time() aby zapisać aktualny czas.

Przykład wstawiania wiersza mysql:

$query = "INSERT INTO comments (name, text, timestamp) VALUES ('". $name ."', '". $text ."',". time() .");";

krok drugi to json_encode dane, które wysyłasz z serwera:

$output = array();

if ($html && $html !== '') {   // do we have any script output ?
  $output['payload'] = $html;  // your current script output would go in this variable
}
$output['time'] = time();      // so we know when did we last check for payload update

$json = json_encode($output, ((int)JSON_NUMERIC_CHECK)); // jsonify the array
echo $json;                    // send it to the client

Więc teraz zamiast czystego html, twój skrypt po stronie serwera zwraca coś takiego:

{
  "payload":"<div class=\"name\">Derpin<\/div><div class=\"msg\">Foo Bar!<\/div>",
  "time":1354167493
}

Możesz po prostu pobrać dane w javascript:

<script type="text/javascript"> // <![CDATA[

var lastcheck;
var content_main = $('#content_main');

pollTimer = setInterval(function() {
  updateJson();
}, 10000);

function updateJson() {
  var request = '/feed_main.php?timestamp='+ (lastcheck ? lastcheck : 0);

  $.ajax({
    url: request,
    dataType: 'json',
    async: false,
    cache: false,
    success: function(result) {
      if (result.payload) {        // new data
        lastcheck = result.time;   // update stored timestamp
        content_main.html(result.payload + content_main.html()); // update html element
      } else {                     // no new data, update only timestamp
        lastcheck = result.time;
      }
    }
  });
}

// ]]> </script>

który w dużej mierze zajmuje się komunikacją między serwerem a klientem, teraz po prostu wysyłasz zapytanie do bazy danych w następujący sposób:

$timestamp = 0;
$where = '';

if (isset($_GET['timestamp'])) {
  $timestamp = your_arg_sanitizer($_GET['timestamp']);
}

if ($timestamp) {
  $where = ' WHERE timestamp >= '.$timestamp;
}

$query = 'SELECT * FROM comments'. $where .' ORDER BY timestamp DESC;';

Znaczniki czasu są przekazywane tam iz powrotem, klient zawsze wysyła znacznik czasu zwrócony przez serwer w poprzednim zapytaniu.

Twój serwer wysyła tylko komentarze, które zostały przesłane od czasu, gdy ostatnio sprawdzałeś, i możesz je dołączyć na końcu HTML, tak jak ja. (ostrzeżenie:nie dodałem do tego żadnej kontroli zdrowia psychicznego, Twoje komentarze mogą być bardzo długie)

Ponieważ co 10 sekund odpytujesz o nowe dane, możesz rozważyć wysyłanie czystych danych przez wywołanie ajax, aby zaoszczędzić znaczną przepustowość porcji (łańcuch json z samym znacznikiem czasu ma tylko około 20 bajtów).

Następnie można użyć javascript do wygenerowania html, ma to również tę zaletę, że przerzuca dużo pracy z serwera na klienta :). Otrzymasz również znacznie lepszą kontrolę nad liczbą komentarzy, które chcesz wyświetlić jednocześnie.

Poczyniłem dość duże założenia, będziesz musiał zmodyfikować kod do swoich potrzeb. Jeśli użyjesz mojego kodu, a twój kot|komputer|dom eksploduje, zachowasz wszystkie kawałki :)