Question

我正在做一个基本的聊天服务，它基本上是一个学校项目，它将在学生中使用。我一直很成功，但我遇到了一个问题。更新聊天室。在我的许多测试中，它往往使用长达10秒的时间来接收消息，并由发送消息的用户识别。

所有正在运行的php将消息推送到chatfile和jquery来加载该文件。聊天每3秒更新一次。在我的测试中，聊天文件会立即更新，但实际聊天速度不会更快，平均大约10秒。

我相信这必须是jquery的一些限制。我是否应该远离jquery并找到更好的解决方案，或者我的代码是否存在问题？任何帮助是极大的赞赏。提前谢谢！

那里也有一些php，只是加载用户名和房间名称

Jquery代码：

    var roomname = "<?php echo $_GET["room"]; ?>";
    var prevdata = "";
    update();
    setInterval(function(){update()},3000)
    $("#send").click(function(){
        sendMessage();
    });

    $('#message').keyup(function(e){
        if(e.keyCode == 13)
        {
            sendMessage();
        }
    });

    function update()
    {
        $.get("/rooms/room/"+roomname+".html",function(data){
            $("#chatbox").html(data);
            if(prevdata != data && data.indexOf("<?php echo $_SESSION["username"] ?>") != 31)
            {
            playMessageSound();
            }
            prevdata = data;
        });
    }

    function sendMessage()
    {
        var message = $("#message").val();
        $("#message").val("");
        $.get("sendmessage.php?room="+roomname+"&message="+message)
    }

    function playMessageSound()
    {
        var audio = new Audio("/sound/msg.mp3");
        audio.play();
    }

我的解决方案：我拿了jwatts＆＃39;解决方案并对其进行了一些定制，以减少代码行数。我现在只是将聊天与文件进行比较，然后返回差异，将其附加到聊天中，使其与更新一样快！

感谢帮助人员！

Answer 1

我知道这个问题已得到解答，但我想提出另一个可能的解决方案。就像这些事情一样，它是一个简单的，有一些捕获和警告，但对于一个类项目，它就足够了。我建议的例子不是我自己创建的，代码是未经测试的。这可能会花费你相当多的时间来实施变更并让它们发挥作用。

但它探索了一些基本的数据格式，例如PHP和JavaScript中的XML和JSON功能。它跟踪最新的数据抓取并仅获取新的聊天信息。这样一旦数据返回浏览器，它只会加载新内容而不是整个内容。

在上面的代码中，您似乎每次都在编写整个聊天内容。我确信有一些浏览器缓存问题正在进行中。您可以请求返回仅包含最后一个条目的JSON数据（PHP具有内置JSON函数）的PHP，而不是每次都请求整个html页面，并将它们附加到文档中。

JSON上有很多可用的信息。如果您还没有了解它，它是一种表达JavaScript本机数据的方式。它可以将JSON格式的文本本地转换为数组，对象和属性。它并不像XML那样冗长。

在您的代码中，创建一个名为

的时间戳

var lastDataReceived = "";

这将保留上次从服务器收到新聊天数据的时间戳。在$.get()成功函数中，将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 data: { "chattext": text....}函数中使用相同的$.post()类型结构。您需要在服务器上使用不同的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");

从一般意义上说，这就是你正在做的事情：从新聊天中存储数据，然后将这些数据加载到连接到聊天的其他客户端。但是，这里只检索新信息，并且在浏览器上加载速度要快得多。