Question

我在PHP / jQuery / MySQL中创建了一个相对简单的“创意板”。

在页面加载时，div #chat 会提取数据库中的当前条目。

<div id="chat">
    <?php

    $sql = "SELECT * from idea ORDER BY id DESC;";
    $result = $pdo->query($sql);

    if($result->rowCount() > 0 && !empty($result))
    {
        foreach ($result as $row) 
        {
        $title = $row['title'];
        $idea = $row['idea'];

        echo '<span class="idea"><strong>' . $row['title'] . "</strong>&nbsp;-&nbsp;" . $row['idea'] . '&nbsp;<a class="delete" href="">[Delete]</a></span>';
        }
    }
  ?>
    </div>

但是我希望它能够定期刷新：

<body onload="setInterval('chat.update()', 1000)">

以下示例详细说明了如何使用文本文件完成，如何查询数据库（示例位于http://css-tricks.com/jquery-php-chat/）？

//Updates the chat
function updateChat() {
    if(!instanse){
        instanse = true;
        $.ajax({
            type: "POST",
            url: "process.php",
            data: {'function': 'update','state': state,'file': file},
            dataType: "json",
            success: function(data) {
                if(data.text){
                    for (var i = 0; i < data.text.length; i++) {
                        $('#chat-area').append($("

                        "+ data.text[i] +"

                        "));
                    }   
                }
                document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
                instanse = false;
                state = data.state;
            }
        });
    }
    else {
        setTimeout(updateChat, 1500);
    }
}

我希望删除某些行，所以除了要追加的条目之外，我还想要删除一些。

它应该模拟实时对话。

Answer 1

您可以使用简单的long polling技术更新聊天内容。

例如：

//Updates the chat
function updateChat() {
    if(! instance){
        instance = true;
        $.ajax({
            type: "POST",
            url: "process.php",
            data: {function: 'update', state: state, file: file},
            dataType: "json",
            success: function(data) {
                if(data.text){
                    for (var i = 0; i < data.text.length; i++) {
                        $('#chat-area').append($("

                        "+ data.text[i] +"

                        "));
                    }   
                }
                document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
                instance = false;
                state = data.state;
            },
            complete: function(){
               setTimeout(
                    updateChat, /* Request next message */
                    10000 /* ..after 10 seconds */
                );                
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                //display you error message               
            },
            timeout: 10000 //Timeout is necessary to prevent chaining of unsuccessful ajax request    
        });
    }
}

Answer 2

您可以使用socket.io库在两个方向上实施服务器到客户端通知和/或实时通信。

定期刷新div以检查表中是否有新条目

2 个答案: