Aktualisieren Sie div, aber nur, wenn es neue Inhalte aus der PHP-Datei gibt

Ich stand vor nicht allzu langer Zeit vor einem ähnlichen Problem. Ich nehme an, dass Sie mysql oder etwas anderes für die serverseitige Speicherung Ihrer Kommentare verwenden?

Ich habe mein Problem gelöst, indem ich zuerst meiner MySQL-Tabelle eine Zeitstempel-Integer-Spalte hinzugefügt habe. Wenn ich dann eine neue Zeile hinzugefügt habe, habe ich einfach time() verwendet um die aktuelle Zeit zu speichern.

Beispiel für MySQL-Zeileneinfügung:

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

Schritt zwei wäre, die Daten, die Sie von der Serverseite senden, json_encode:

$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

Anstelle von reinem HTML gibt Ihr serverseitiges Skript jetzt also etwa Folgendes zurück:

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

Sie können die Daten ganz einfach in Javascript abrufen:

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

das kümmert sich so ziemlich um die Kommunikation zwischen Server und Client, jetzt fragen Sie Ihre Datenbank einfach so ab:

$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;';

Die Zeitstempel werden hin und her geleitet, wobei der Client immer den vom Server in der vorherigen Abfrage zurückgegebenen Zeitstempel sendet.

Ihr Server sendet nur Kommentare, die seit Ihrer letzten Überprüfung übermittelt wurden, und Sie können sie wie ich an das Ende des HTML-Codes voranstellen. (Warnung:Ich habe dem keine Art von Vernunftkontrolle hinzugefügt, Ihre Kommentare könnten sehr lang werden)

Da Sie alle 10 Sekunden neue Daten abfragen, sollten Sie erwägen, reine Daten über den Ajax-Aufruf zu senden, um einen erheblichen Teil der Bandbreite zu sparen (json-String mit nur einem Zeitstempel darin, ist nur etwa 20 Bytes groß).

Sie können dann Javascript verwenden, um das HTML zu generieren, es hat auch den Vorteil, dass ein Großteil der Arbeit von Ihrem Server auf den Client verlagert wird :). Sie können auch viel genauer steuern, wie viele Kommentare Sie gleichzeitig anzeigen möchten.

Ich habe einige ziemlich große Annahmen getroffen, Sie müssen den Code an Ihre Bedürfnisse anpassen. Wenn du meinen Code verwendest und dein Katzen|Computer|Haus zufällig explodiert, darfst du alle Teile behalten :)