我知道这个问题已经得到解答,但我想提出另一个可能的解决方案。就这些事情而言,这是一个简单的,有一些注意事项和警告,但对于一个课堂项目来说就足够了。我提出的示例不是我自己创建的,并且代码未经测试。您可能会花费相当多的时间来实施更改并让它们发挥作用。
但它探讨了一些基本的数据格式,例如 PHP 和 JavaScript 中的 XML 和 JSON 功能。它跟踪最近的数据抓取,只获取新的聊天信息。这样,一旦数据返回浏览器,它只会加载新内容而不是整个内容。
在您上面的代码中,看起来您每次都在编写整个聊天。我确信存在一些浏览器缓存问题。与其每次都请求整个 html 页面,不如请求一个 PHP 来返回 JSON 数据(PHP 具有内置的 JSON 函数),该数据仅包含最后的条目,然后将它们附加到文档中。
有很多关于 JSON 的信息。如果您还没有了解它,它是一种 JavaScript 原生的数据表达方式。它可以将 JSON 格式的文本本地转换为数组、对象和属性。而且它不像 XML 那样冗长。
在您的代码中,创建一个名为
的时间戳
var lastDataReceived = "";
这将保留上次从服务器接收到新聊天数据的时间戳。在$.get() success 函数中,将 URL 更改为 PHP 页面并将其设置为获取 JSON 数据。另外,传入所需的信息,例如您需要数据的房间的名称,以及上次收到聊天数据的时间:
function update()
{
$.get({
url: "/rooms/room/getchatdata.php",
data: { "room": roomname, "lastDataReceived": lastDataReceived },
success: function(data){
//..............
},
dataType: "json"
});
}
这将创建一个请求
"/rooms/room/chatdata.php?room="+roomname+"&lastDataReceived="+lastDataReceived
在服务器端,可以这样获取查询字符串参数
$roomname = $_GET["room"];
$lastDataReceived = date_create_from_format('d/M/Y H:i:s', $_GET["lastDataReceived"]);
看起来您正在将聊天信息写入 HTML 文件。在此示例中,使用 XML 数据很可能更可取。那里有很多很多 PHP XML 教程。这是 W3Schools.com 上关于 SimpleXML 函数的一个。 (http://www.w3schools.com/php/php_ref_simplexml.asp)
这样你就可以从文件中加载:
$xml = simplexml_load_file($roomname.".xml");
如果是新房间,也可以创建一个新的 XML 文件,例如:
<?php
$chats = <<<XML
<chats>
</chats>
XML;
$xml = new SimpleXMLElement($chats);
$xml->saveXML($roomname.".xml");
?>
要确定是读还是写,可以通过检查该房间的文件是否存在来检查该房间是否存在:
$xml = NULL;
if (file_exists($roomname.".xml")) {
//Set to exsiting
$xml = simplexml_load_file($roomname.".xml");
} else {
//Create new file
$chats = <<<XML
<chats>
</chats>
XML;
$xml = new SimpleXMLElement($chats);
$xml->saveXML($roomname.".xml");
}
无论哪种方式,您都会得到一个可以使用的$xml 变量。
现在,假设您已将请求发回服务器以查看是否有任何新的聊天数据。您正在使用之前创建的变量$roomname 和$lastDataReceived。您已经从文件中加载了$xml 对象。现在您需要找到任何新添加的内容。
$chats = $xml->chats->children();
$newchats = array();
foreach($chats as $c) {
if ($c['date'] > $lastDataReceived) {
array_push($newchats, $c);
}
}
现在您有了一个新聊天项目的数组,将 JSON 数据写回浏览器:
$json = json_encode($newchats);
header('Content-Type: application/json');
echo $json;
现在回到你的 JavaScript。在上面的 PHP 示例中,$newchats 被初始化为一个新数组。当json_encode() 被调用时,如果没有新的聊天,echo 将返回一个空数组。您可以在 JS 中对此进行测试。
在这种情况下,您只需要添加新的项目。因此您需要将新的 HTML 添加到文档中。使用 jQuery,这非常容易。假设聊天都在<div> 标签中:
<div id="chats">
<!--all chats here-->
</div>
你有一个模板div,你希望所有聊天看起来像
<div class="chat_template" style="display:none;">
<div class="person_name"></div>
<div class="chat_text"></div>
<div class="chat_time"></div>
</div>
您可以克隆它,将数据加载到其中,并将其附加到文档中。
function update()
{
$.get({
url: "/rooms/room/chatdata.php",
data: { "room": roomname, "lastDataReceived": lastDataReceived },
success: function(data){
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {[
var c = data[i];
//I do not know what the exact structure of the data will be.
// You may need to output the data to the console to see it's structure.
// But I am assuming you will have access to the date value, the person's name
// and the text.
//Clone the template and add the values
var div = $("div.chat_template").clone(true);
div.find("div.person_name").html(name);
div.find("div.chat_text").html(text);
div.find("div.chat_time").html(date_val);
div.show();
//Add the new div to the document
$("div#chats").append(div);
//Set the last received time for the next query
lastDataReceived = date_val;
}
playMessageSound();
}
},
dataType: "json"
});
}
当向服务器发送新的聊天信息时,您可以在 jQuery $.post() 函数中使用相同的 data: { "chattext": text....} 类型结构。您将需要在服务器上使用不同的 PHP 文件,例如 addchatdata.php。我已经接触过一种算法,它可以根据聊天室文件是否存在来获取或创建它。
所以如果你想让子 XML 元素看起来像这样
<chat date="04/Jun/2015 13:18:23" name="George">
Here is some of George's text.
</chat>
一旦你得到$xml 对象,你可以像这样向它添加新的XML:
$chat = $xml->addChild("chat", "Here is some of George's text.");
$chat->addAttribute("date", date('d/M/Y H:i:s'));
$chat->addAttribute("name", "George"); //<--Or use a variable name for the name
//Then save the changes back out to the file:
$xml->saveXML($roomname.".xml");
一般来说,这是在做您已经在做的事情:存储来自新聊天的数据,然后将该数据加载到连接到聊天的其他客户端。但是,这里只是检索新信息,在浏览器上加载速度会更快。