自动更新chatbox

Question

所以我正在开发一个javascript/php chatbox。除了更新我的div中的内容之外，一切都可以正常工作(它只工作一次，但之后当新消息被放入数据库时，它不会一直更新它)。下面是我的代码：

Javascript部分：

   <script language=javascript type='text/javascript'> 

        setInterval(function () {

            var arrayOfObjects = <?print_r(getChatArray());?>;
            var chat = "";

            for (var i = 0; i < arrayOfObjects.length; i++) {
                var object = arrayOfObjects[i];

                chat += "["+object.date+"]"+object.op+": " + object.msg + "</br>";
            }
            $('#chat').html(chat);

        }, 10);
    </script>

Php部分：

<?php
function getChatArray() {
    $result = mysql_query("SELECT * FROM shouts ORDER BY id DESC"); 
    $to_encode = array();

    $count = mysql_num_rows($result);
    $size = 0;
        if($count > 0) {
            while($row = mysql_fetch_assoc($result)) {
              $to_encode[$size]['id'] = $row['id'];
              $to_encode[$size]['msg'] = $row['msg'];
              $to_encode[$size]['op'] = $row['op'];
              $to_encode[$size]['date'] = $row['date'];
              $size += 1;
            } 

        } else {
            return "None";
        }

return json_encode($to_encode);
}
?>

你有什么想法来解释为什么它没有持续更新吗？

谢谢。

Answer 1

因为您的JS每10毫秒解析一次原始聊天室内容，所以您不会获取任何新内容。您将需要实现一个ajax调用，我强烈建议您将该setInterval更改为一个递归setTimeout，它具有更实际的延迟，比如500ms，这样您就不会杀死客户端。

而不是这样：

setInterval(function() {

    var arrayOfObjects = <?print_r(getChatArray());?>;
    ...

您可以使用类似于以下内容：

(function updateChat(){

    var arrayOfObjects, 
        chat, 
        max,
        _object,
        i = 0;

    $.ajax({
        url : '/getChatArray.php', // php echoes the json
        success: function(arrayOfObjects){
            for (max = arrayOfObjects.length; i < max; i++) {
                _object = arrayOfObjects[i];
                chat += "["+_object.date+"]"+_object.op+": " + _object.msg + "</br>";
            }
            $('#chat').html(chat);
            setTimeout(updateChat, 500);
        }
    });
}());

显然，您可以根据需要填充该ajax处理程序，添加更多参数，如dataType等，以及一些错误处理。

Answer 2

您的数据库内容将仅在首次导航到该页面时输出到该页面。这段代码：

var arrayOfObjects = <?print_r(getChatArray());?>;

只会在呈现页面时输出getChatArray()返回的内容，因此脚本在呈现时只能看到该函数返回的一种状态。

您需要使用AJAX从数据库异步检索内容。

我建议你：

1. 创建一个PHP脚本，该脚本使用jQuery以JSON格式输出您的数据，特别是使用getJSON函数来检索该脚本的输出
2. 执行您想要对该数据执行的操作。<代码>H211<代码>G212