Ajax chat - mise à jour seulement s'il y a un changement

Question

J'ai actuellement un chat basé sur Ajax, que j'essaye de rationaliser en chargeant seulement le manuscrit de causerie quand une mise à jour se produit. Ainsi, rien ne doit continuer à charger si rien n'a changé dans la base de données.

Ma logique actuelle dit:

• fonction JavaScript déclenche à chaque 1/2 seconde pour obtenir les journaux de chat (setInterval())

Si rien n'a changé, cependant, il semble assez inefficace de continuer à appeler il. Au lieu de cela, ce que je voudrais faire est:

1. fonction vérifie JavaScript s'il y a des nouvelles journaux dans la base de données
2. Si OUI - charger les nouveaux journaux, si NO - laisser les journaux actuellement affichés seul.

Comment est-ce que je ferais cela, cependant? La fonction que j'utilise actuellement est:

function updateShouts() { 
    $('#chatArea').load('chat.php'); // load chat logs 
} 
setInterval("updateShouts()", 500); // call function every half a second 

Answer 1

Comme vous le savez, la fonction .load remplit un élément avec la sortie retournée par votre fichier chat.php. Cette fonction .load effectue deux étapes: Elle effectue une requête ajax sur le fichier chat.php, puis définit la valeur de l'élément sur la sortie de chat.php. Ce que vous voulez faire n'est que la première étape. Pour ce faire, utilisez la fonction .ajax

http://api.jquery.com/jQuery.ajax/

Au lieu d'utiliser le fichier chat.php je suggère d'appeler un autre script comme isChatUpdated.php. Ce script fera exactement ce que son nom suggère et vérifiera s'il y a eu des changements dans le chat. Vous pouvez ensuite utiliser ce résultat pour déterminer si vous devez appeler votre fonction .load.

Answer 2

Dans les deux cas, vous devez interroger la base de données du côté serveur, ce qui est presque sans importance si elle renvoie des données de journal ou une seule valeur.
Vous pouvez décider de ne pas mettre à jour #chatArea, en fonction d'une valeur de retour, mais vous devez effectuer un autre appel pour récupérer les journaux, sinon.

Answer 3

Une façon relativement simple de faire cela est d'utiliser AJAX pour aller chercher une page qui vous indique simplement s'il y a eu une mise à jour. Ainsi, par exemple, vous pouvez aller chercher une page comme checkForUpdate.php qui a un 1 ou un 0 pour indiquer s'il y a quelque chose de nouveau dans le chat. Si vous avez 1 dos, vous pouvez aller de l'avant et charger la page complète chat.php.

(Si vous ne l'avez pas utilisé AJAX avant, c'est un très bon tutoriel: http://www.tizag.com/ajaxTutorial/)

Une autre solution (et qui je pense est probablement mieux) est de charger une page qui n'a que le plus récent lignes de discussion Par exemple, dites que vous affichez actuellement les lignes 1 à 14 du chat. Vous pouvez ensuite utiliser AJAX pour récupérer le contenu de, par exemple, getLines.php?s=14. Cette page n'afficherait que les lignes du chat après la ligne 14. Vous ajouteriez simplement ces lignes à la fin de la fenêtre de discussion en cours.

Answer 4

Je passerais timestamp s (ou message_id s) avec tous les messages de discussion que le script côté serveur envoie à un client. Ensuite, le client demande simplement de nouveaux messages, et le serveur n'envoie que ce qui est nouveau.Alors, imaginez que chaque message de discussion a un identifiant. Je conçois mon chat.php d'accepter un paramètre comme ceci:

chat.php?since=12345 

12345 serait le id du dernier message que le client a vu. chat.php fait essentiellement quelque chose comme:

SELECT * FROM chatmessages WHERE id > $since 

... et passe en arrière une jolie petite structure de données (un tableau d'objets, codé en JSON, disons). Donc, s'il n'y a pas de nouveaux messages de discussion, le serveur ne fait que renvoyer un tableau vide.

Je ne pense pas que vous puissiez être plus efficace que cela.

EDIT:

je me rends compte que cette façon de faire nécessite un peu plus de codage côté client. Vous n'êtes plus simplement en train de mettre à jour un div avec l'historique complet du chat. Vous devrez également avoir un gestionnaire sur votre appel ajax qui itère sur les résultats, et pour chaque message, créez par programme un div pour cette ligne, puis l'ajouter à votre discussion div.

Answer 5

Je voudrais tout d'abord créer un fichier par exemple messages.php qui avait l'air quelque chose comme ceci:

<?php header('Content-Type: application/json'); 

$messages_since = !empty($_POST['since']) 
    ? mysql_real_escape($_POST['since']) 
    : '0000-00-00 00:00:00'); 

// Get all messages from database since the $messages_since date_time 

echo json_encode($array_with_messages); 

ensuite sur le côté client en utilisant jQuery ou quelque chose comme ça, je ferais quelque chose comme ceci:

1. Obtenir des messages en utilisant quelque chose comme $.post('messages.php', new_messages_handler)
2. Dans le gestionnaire je créerais html pour chaque nouveau message que nous sommes revenus et ajouter/précédez au conteneur de chat ainsi que stocker à quelle heure les derniers mes sage a été créé.
3. Attendez un moment
4. Obtenir de nouveaux messages en utilisant quelque chose comme $.post('messages.php', {since: latest_datetime_we_have}, new_messages_handler)
5. Aller à 2

Au moins cela fonctionne assez bien dans ma tête: p