javascript - 如何为聊天室显示从数据库接收的一系列消息

标签 javascript php mysql ajax

所以我尝试为我的网站创建一个基本的聊天室。我已成功连接到数据库,正在写入消息并且正在接收消息,一切正常。

我的问题是从数据库返回的消息是按字母、逐行显示的。另外,我有 <body onload="setInterval('chat.update()', 1000)">在我的页面上chat.php ,这似乎会一遍又一遍地加载相同的消息,直到输入新消息。

(请查看发布的屏幕截图路径,没有足够的代表来发布图像)

我怀疑我返回的是一个字符串而不是字符串数组,这就是消息按原样显示的原因。我对 javascript 和 AJAX 相当陌生,所以我不确定如何继续。

任何人都可以分享有关如何返回和消息数组的任何建议,这也许可以解决我的问题吗?

提前致谢!

运行 MYSQL 数据库,带有 chat.js发布至process.phpchat.php具有消息区域的 HTML 代码。

chat.php

    <div class="container chat-container">
        <div id="page-wrap">
            <h2 class="forum-header">Discussion Room for: <?php echo "$session" ?> </h2>
            <br>
            <p id="name-area"></p>
            <div id="chat-wrap"><div id="chat-area"></div></div>               
            <div class="md-form">
                <form id="send-message-area">
                    <label class="message-label" for="form7">Your Message</label>
                    <textarea id="sendie" maxlength = '100' class="md-textarea form-control" rows="3"></textarea>                        
                </form>
            </div>
        </div>
    </div>
</body>

chat.js

//Updates the chat
function updateChat() {
    if (!instanse) {
        instanse = true;
        $.ajax({
            type: "POST",
            url: "process.php",
            data: {
                'function': 'update',
                'state': state               
            },
            dataType: "json",
            success: function (data) {
                if (data.text) {
                    for (var i = 0; i < data.text.length; i++) {
                       $('#chat-area').append("<p>" + data.text[i] + "</p>");
                    }
                }
                document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
                instanse = false;
                state = data.state;
            }
        });
    } else {
        setTimeout(updateChat, 1500);
    }
}

process.php

case('update'):
        $state = $_POST['state'];

        $lines = "SELECT messageBody, timeSent, nickname FROM message ORDER BY timeSent";
        $result = mysqli_query($conn, $lines);

        if (mysqli_num_rows($result) > 0) {

            while ($row = mysqli_fetch_assoc($result)) {
                $message = $row['messageBody'];
                $time = $row['timeSent'];
                $nickname = $row['nickname'];
            }
        }

        $count = count($lines);
        if ($state == $count) {
            $log['state'] = $state;
            $log['text'] = false;
        } else {
            $text = array();
            $log['state'] = $state + count($lines) - $state;

            $text[] = $message = str_replace("\n", "", $message);
        }

        $log['text'] = $message;     
        break;

另外,我使用 echo json_encode($log); Console Screenshot

最佳答案

在 process.php 中,您应该将获取的结果保存在数组中,如下所示。

if (mysqli_num_rows($result) > 0) {
            $message = array();                

            while ($row = mysqli_fetch_assoc($result)) {
                $message[] = $row['messageBody'];
            }
        }

关于javascript - 如何为聊天室显示从数据库接收的一系列消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55570835/

相关文章:

javascript - d3.js 跳过文本转换(3 个转换中的第 2 个)

php - API Laravel 中的 JSON 列添加而不是插入

mysql - 如何在express.js中使用sequelize在mysql表中插入数据

java - 自动提交错误表的最大值

javascript - 为什么 AJAX 请求所用的时间从 2 毫秒跳到 50 毫秒甚至更长?

javascript - 如果选中复选框,则将对象添加到数组,如果未选中,则将对象删除

php oop 可见性 : How the function in parent class calls it's own private function and child class public function

php - 在 Ubuntu 上编译 PHP 扩展库 (Karmic Koala)

php - 使用 javascript/php 将 html 表单转换为 pdf 和电子邮件

javascript - 在 Javascript 中模拟 window.location.href