Ajax聊天-只有在有变化时才更新

Question

我目前有一个基于Ajax的聊天功能，我试图通过仅在更新发生时加载聊天脚本来优化它。因此，如果数据库中没有任何更改，就不需要继续加载。

我的当前逻辑如下：

• 每隔半秒钟，JavaScript函数会触发一次以获取聊天记录(setInterval())

但是，如果没有任何更改，保持调用似乎相当低效。相反，我想做的是：

1. JavaScript函数检查数据库中是否有任何新的日志
2. 如果是，则加载新的日志；否则，保留当前显示的日志。

然而，我该如何实现呢？我目前使用的函数是：

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

- Dave

Answer 1

我会在服务器端向客户端发送聊天消息时，同时附上时间戳或消息ID。然后客户端只需请求新消息，服务器将仅发送最新的内容。

假设每个聊天消息都有一个ID。我会设计我的chat.php接收这样一个参数：

chat.php?since=12345

12345是客户端最后一条已读消息的id。 chat.php的功能基本上类似于：

SELECT * FROM chatmessages WHERE id > $since

...并且返回一个漂亮的小数据结构(一个对象数组,编码为JSON,比如说)。

所以,如果没有新的聊天消息,服务器只会传回一个空数组。

我认为你不能再更有效率了。

编辑:

我意识到这样做需要更多的客户端编程。你不再只是更新一些包含整个聊天历史记录的div。你还需要在你的ajax调用上有一个处理程序，它遍历结果，并为每条消息编程地构造一个 div, 然后将其附加到你的聊天

中。

- timdev

Answer 2

一种相对简单的方法是使用AJAX获取一个页面，该页面只告诉您是否有更新。例如，您可以获取像checkForUpdate.php这样的页面，其中包含1或0来指示聊天中是否有任何新内容。如果您收到了1，则可以继续加载完整的chat.php页面。

（如果您以前没有使用过AJAX，这是一个非常好的教程：http://www.tizag.com/ajaxTutorial/）

另一种解决方案（我认为可能更好）是加载仅具有最新聊天行的页面。例如，假设您当前正在显示聊天的第1-14行。然后，您可以使用AJAX获取getLines.php?s=14的内容。此页面仅显示第14行之后的聊天行。然后，您只需将这些行附加到当前聊天窗口的末尾即可。

- Computerish

Answer 3

正如您所知，.load函数会使用由chat.php文件返回的输出填充元素。这个.load函数有两个步骤：它向chat.php发出ajax请求，然后将元素的值设置为chat.php的输出。您想要做的只是第一步。为此，请使用.ajax函数。

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

与其使用chat.php文件，我建议调用一个不同的脚本，如isChatUpdated.php。该脚本将会像它的名字所示的那样检查聊天是否发生了任何变化。然后您可以使用该结果来确定是否需要调用.load函数。

- The Real Diel

---

使用Ajax函数，您如何获取检查php脚本返回的值？ - Dave

你必须指定一个“success”回调函数。你将在我链接给你的页面上看到它是如何工作的。 - The Real Diel

Answer 4

无论如何，您都需要在服务器端查询数据库，因此返回日志数据或单个值几乎没有关系。
您可以根据返回值决定不更新＃chatArea，但必须进行另一个调用以检索日志。

- Poliveira

Answer 5

我首先会创建一个名为messages.php的文件，内容大致如下：

<?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);

然后在客户端使用jQuery或类似的东西，我会做这样的事情：

1. 使用类似于$.post('messages.php', new_messages_handler)的东西获取消息
2. 在处理程序中，我会为每个新消息创建HTML，并将其附加/预置到聊天容器中，同时存储最新消息创建的时间。
3. 等待一段时间
4. 使用类似于$.post('messages.php', {since: latest_datetime_we_have}, new_messages_handler)的东西获取新消息
5. 回到第2步

至少在我的脑海中它运行得相当不错:p

- Svish