How to display an array of messages being received from database, for a chat-room
Question
So I have attempted to create a basic chat-room for my site. I have successfully connected to the database, messages are being written and they are being received all OK.
My problem is the messages that return from the database are displayed by letter, and line by line. Also, I have <body onload="setInterval('chat.update()', 1000)"> on my page chat.php , whihc seems to load the same message over and over again until a new message is inputted.
(Please see screenshot path posted, not enough rep to post image)
I suspect that I am returning a string rather than an array of strings which is why the messages are being displayed as they are. I am fairly new to javascript and AJAX so I am unsure of how to proceed.
Can anyone share any advice on how to return and array of messages, that will perhaps solve my issue?
Thanks in advance!
Running MYSQL database, with chat.js posting to process.php . chat.php has the HTML code for the message area.
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;
Also, I using echo json_encode($log); Console Screenshot
1 answers
solution1
0 ACCPTED 2019-04-08 11:14:35
In process.php you should save the fetched result in an array, like this.
if (mysqli_num_rows($result) > 0) {
$message = array();
while ($row = mysqli_fetch_assoc($result)) {
$message[] = $row['messageBody'];
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.