Check if there are new messages with ajax - php

Question

I have put up some code to make an ajax, php, mysql chat in real time...
this is my code:
-jQuery/Ajax
$(function(){
setInterval(function() {
$('#chMsgCont').load('./ajax/msg.php');
var div = $('#chMsgCont');
var o = div.offset().top;
div.scrollTop( o + 12302012 );
}
,1000);
});
"./ajax/msg.php"
<?php
include("../system/config.site.php");
$query = mysql_query("SELECT * FROM chat_msg ORDER BY timestamp ASC");
while($p = mysql_fetch_assoc($query)) {
$auth = mysql_fetch_assoc(mysql_query("SELECT * FROM chat_users WHERE id = '".$p['auth_id']."'"));
?>
<div class="chatMsg">
<p id="chatPMsg">
<span class="chatTime"><?php echo date("H:i", $p['timestamp']); ?></span>
<b><?php echo $auth['name']." ".$auth['surname']; ?></b><br />
<?php echo stripslashes($p['msg']); ?>
</p>
<p id="chatImg">
<img src="./images/thumb<?php echo $p['auth_id']; ?>.png" />
</p>
<div style="clear:both;"><!– –> </div>
</div>
<?php
}
?>
I haven't found any method for not loading every second the "msg.php" file... I thought: is it possible to load initially the messages and then with setIntervall check for new messages to append to #chMsgCont? I think it is possible, but i can't figure out how to code it :/, can anyone help me?

Answer 1

Yes it is possible to load all messages upon initial page load; then subsequently update the chat window with new messages (have you ever wondered how Gmail auto populates new mail into your Inbox without a page refresh? Lots of AJAX requests).
You're on the right track. Just make sure you have a column in your MySQL database that holds a "yes/no" value on whether its a new message or not. Then everytime a new message is fetched using ajax/msg.php, in addition to fetching and outputting the content, perform a SQL update to update the fetched data as well.
Once you have that working you can further optimize your chat application by creating a simplier MySQL SELECT statement that simply checks the count of "new" rows (SELECT COUNT(new_message) FROM messages). Then check the value returned and whether it's greater than 0 before attempting to append content. I would also check for empty return data in your JavaScript to prevent from unnecessarily manipulating DOM elements.