Question

首先，我要感谢您阅读本文：）。

我正在使用PHP和jQuery创建实时聊天。是的，我知道你现在在想什么。使用SOCKET.IO。我知道，我想。但首先我想用Ajax创建一个。因此，如果您要说使用websockets或node.js或其他东西，它不会帮助我。我只是想解决这个问题。

所以我的问题。

聊天数据将在文件的json数组中解析。

[{"id":"1","user_id":"2","user_clr":"red","message":"Test bericht","timestamp":"2017-03-09 16:04:34","username":"Vienna"},{"id":"2","user_id":"1","user_clr":"blue","message":"Test berciht 2","timestamp":"2017-03-09 16:04:32","username":"Chris"},{"id":"3","user_id":"2","user_clr":"red","message":"tst bericht 4","timestamp":"2017-03-09 16:04:35","username":"Vienna"},{"id":"4","user_id":"2","user_clr":"red","message":"test bericht 3","timestamp":"2017-03-09 16:04:36","username":"Vienna"},{"id":"5","user_id":null,"user_clr":"sda","message":null,"timestamp":null,"username":null},{"id":"6","user_id":"1","user_clr":"blue","message":"Test","timestamp":null,"username":"Chris"},{"id":"7","user_id":null,"user_clr":null,"message":null,"timestamp":null,"username":null},{"id":"8","user_id":null,"user_clr":null,"message":"TEST","timestamp":null,"username":"TEST"}]

是的，它是一个有效的JSON。

其中有一些空值但无关紧要。

我现在正在使用这个jQuery：

function loadChats(){
$.getJSON('/d.php', function(data) {
    console.log(data.length + " keys loaded");
    var strVar="";
    $( "#view_ajax" ).empty();
    $.each(data, function(index) {
       strVar += "<div class=\"messenger-message-container\" style=\"color:white;\">";
    strVar += "                              ";
    strVar += "                                <div class=\"messages\">";
    strVar += "                                    <ul>";
    strVar += "                                        <li>";
    strVar += "";
    strVar += "                                            <div class=\"message\"><font color=\"black\">";
    strVar +=                                              "<\/font>";
    strVar += "                                               ";
    strVar += "                                                <div style=\"background-color:" + data[index].user_clr + ";\">";
    strVar +=                                                   data[index].username + ": " + data[index].message;
    strVar += "                                                <\/div>";
    strVar += "                                            <\/div>";
    strVar += "                                        <\/li>";
    strVar += "                                          <div class=\"time-ago\">1:26<\/div>";
    strVar += "                                    <\/ul>";
    strVar += "                                <\/div>";
    strVar += "                                ";
    strVar += "                            <\/div>";

    });
    $('#view_ajax').append(strVar);

});
setTimeout("loadChats()", 1000);
}

 loadChats();

现在它正在刷新整个div。它会删除html并将html再次放入strVar，因此现在也会包含新数据。

但我真正想要的是在打开聊天页面时加载聊天，然后只检查该帖子是否是数据库中的新行。如果是这样，请在输出页面上添加一个新div。因此，olders消息将再次被加载。

我怎么能意识到这一点？

我尝试阅读有关数据的其他ajax教程，但我找不到合适的数据，这是我想要的。

-----为以下答案添加了PHP代码：Guillaume STLR

<?php
require_once './core/init.php';
$toxDB = toxDB::getInstance();
$toxData = $toxDB->getAll('chats', 20);
print_r(json_encode($toxData->results()));

运行此函数时正在运行此查询

object(PDOStatement)[4]
public 'queryString' => string 'SELECT * FROM chats LIMIT 20' (length=28)

并打印我上面提到的JSON。

Answer 1

您可以尝试在本地存储已呈现的ID：

function loadChats(){
    $.getJSON('/d.php', function(data) {
        console.log(data.length + " keys loaded");
        var strVar="";
        $.each(data, function(index) {
            if(cacheId.indexOf(data[index].id) === -1) {
                //Store to cache
                cacheId.push(data[index].id);
                strVar += "<div class=\"messenger-message-container\" style=\"color:white;\">";
                strVar += "                              ";
                strVar += "                                <div class=\"messages\">";
                strVar += "                                    <ul>";
                strVar += "                                        <li>";
                strVar += "";
                strVar += "                                            <div class=\"message\"><font color=\"black\">";
                strVar +=                                              "<\/font>";
                strVar += "                                               ";
                strVar += "                                                <div style=\"background-color:" + data[index].user_clr + ";\">";
                strVar +=                                                   data[index].username + ": " + data[index].message;
                strVar += "                                                <\/div>";
                strVar += "                                            <\/div>";
                strVar += "                                        <\/li>";
                strVar += "                                          <div class=\"time-ago\">1:26<\/div>";
                strVar += "                                    <\/ul>";
                strVar += "                                <\/div>";
                strVar += "                                ";
                strVar += "                            <\/div>";
            }
        });
        $('#view_ajax').append(strVar);

    setTimeout("loadChats()", 1000);
    });
}
//Add caching
var cacheId = [];
loadChats();

您还可以通过向服务器发送上次聊天ID 值并使用此过滤来过滤您的数据。像这样：

PHP：

$lastId = isset($_GET['last_id']) ? $_GET['last_id'] : null;
require_once './core/init.php';
$toxDB = toxDB::getInstance();

if($lastId) {
    //Don't know how to filter with your model, but you get it.
    $toxData = $toxDB->getAllBy('chats', 'WHERE ID > :ID', ['ID' => $lastId], 20);
}else {
    $toxData = $toxDB->getAll('chats', 20);
}

print_r(json_encode($toxData->results()));

Javascript：

 function loadChats() {
    $.getJSON('/d.php?last_id=' + lastId, function(data) {
        console.log(data.length + " keys loaded");
        var strVar="";
        $.each(data, function(index) {
            //Set last chat id
            lastId = data[index].id;
            strVar += "<div class=\"messenger-message-container\" style=\"color:white;\">";
            strVar += "                              ";
            strVar += "                                <div class=\"messages\">";
            strVar += "                                    <ul>";
            strVar += "                                        <li>";
            strVar += "";
            strVar += "                                            <div class=\"message\"><font color=\"black\">";
            strVar +=                                              "<\/font>";
            strVar += "                                               ";
            strVar += "                                                <div style=\"background-color:" + data[index].user_clr + ";\">";
            strVar +=                                                   data[index].username + ": " + data[index].message;
            strVar += "                                                <\/div>";
            strVar += "                                            <\/div>";
            strVar += "                                        <\/li>";
            strVar += "                                          <div class=\"time-ago\">1:26<\/div>";
            strVar += "                                    <\/ul>";
            strVar += "                                <\/div>";
            strVar += "                                ";
            strVar += "                            <\/div>";
        });
        $('#view_ajax').append(strVar);

    });

    setTimeout("loadChats()", 1000);
}

var lastId = null;
loadChats();

如果你不得不选择：过滤效果更好。使用您的解决方案，即使聊天对话已经呈现，您也可以每秒向连接到您页面的每个客户发送不必要的（并且可能很大的）JSON。通过过滤，您可以通过添加WHERE过滤器来保存带宽和数据库操作。

当新密钥在json

1 个答案: