Actualiser div, mais seulement s'il y a du nouveau contenu à partir du fichier php

J'ai rencontré un problème similaire il n'y a pas si longtemps, je suppose que vous utilisez mysql ou quelque chose pour le stockage de vos commentaires côté serveur ?

J'ai résolu mon problème en ajoutant d'abord une colonne d'entiers d'horodatage à ma table mysql, puis lorsque j'ai ajouté une nouvelle ligne, j'utiliserais simplement time() pour enregistrer l'heure actuelle.

Exemple d'insertion de ligne mysql :

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

la deuxième étape consisterait à json_encoder les données que vous envoyez depuis le serveur :

$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

Donc, maintenant, au lieu de pur html, votre script côté serveur renvoie quelque chose comme ceci :

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

Vous pouvez récupérer les données en javascript assez simplement :

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

qui s'occupe à peu près de la communication entre le serveur et le client, maintenant il vous suffit d'interroger votre base de données comme ceci :

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

Les horodatages sont transmis dans les deux sens, le client envoyant toujours l'horodatage renvoyé par le serveur lors de la requête précédente.

Votre serveur n'envoie que les commentaires qui ont été soumis depuis la dernière vérification, et vous pouvez les ajouter à la fin du code HTML comme je l'ai fait. (attention :je n'ai ajouté aucun type de contrôle de santé mentale à cela, vos commentaires pourraient être extrêmement longs)

Étant donné que vous interrogez de nouvelles données toutes les 10 secondes, vous voudrez peut-être envisager d'envoyer des données pures via l'appel ajax pour économiser une bande passante substantielle (la chaîne json contenant uniquement l'horodatage ne fait qu'environ 20 octets).

Vous pouvez ensuite utiliser javascript pour générer le html, il a aussi l'avantage de décharger une grande partie du travail de votre serveur vers le client :). Vous aurez également un contrôle beaucoup plus précis sur le nombre de commentaires que vous souhaitez afficher simultanément.

J'ai fait des hypothèses assez importantes, vous devrez modifier le code en fonction de vos besoins. Si vous utilisez mon code, et que votre chat|ordinateur|maison explose, vous gardez toutes les pièces :)