chat box spazzing constantly

[dyr]

Hi, I recently commissioned a chatbox script and then recoded it using ajax to try and make the chat seem instant.  I'm trying to get it to work like a cbox, like the one here: http://cbox.ws/ (right hand column, except i'd like new messages to appear at the top)

 

However my script refreshes the messages instead of adding new ones.  It's distracting because it refreshes the old chat history and makes it hard to read, which leads me to think I coded it the wrong way.

 

chat.php

<?php
include('config.php');

if(isset($_POST['form']))
{
$message = mysql_real_escape_string($_POST['message']);
$time = time();
if(isset($_SESSION['id'])) { $userID = (int) $_SESSION['id']; }
else { $userID = 0; }
mysql_query("INSERT INTO `chat` (`userID`, `time`, `message`) VALUES ('$userID', '$time', '$message')") or die(mysql_error());
}

echo<<<JS
<script type="text/javascript">
function Ajax(){
var xmlHttp;
try{	
	xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
}catch (e){
	try{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
	}catch (e){
	    try{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}catch (e){
			alert("No AJAX!?");
			return false;
		}
	}
}
xmlHttp.onreadystatechange=function(){
	document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
	setTimeout('Ajax()',30000);
}
xmlHttp.open("GET","chat_hist.php",true);
xmlHttp.send(null); 
}
window.onload=function(){
setTimeout('Ajax()',5000);
}
</script>
JS;

echo '<div id="ReloadThis">Loading...</div>';

?>

 

chat_hist.php

<?php

include('config.php');

$query = mysql_query("SELECT * FROM `chat` ORDER BY `id` DESC LIMIT 20");
while($row = mysql_fetch_assoc($query))
{
if($row['userID'] == 0) { $player = 'Guest'; }
else
{
	$player_q = mysql_query("SELECT * FROM `users` WHERE `id`='" . $_SESSION['id'] . "'");
	$player_r = mysql_fetch_assoc($player_q);
	$player = $player_r['callname'];
}
echo '<div style="border-bottom: 1px dashed black;">' . $player . ': ' . $row['message'] . '</div>
<div style="border-bottom: 1px solid black;">' . date('m-d h:i:s', $row['time']) . '</div>';
}

?>

[MarPlo]

Hi,

I made a similar chat script as an exercise to learn ajax and php.

The solution i applied is to display the chat into a DIV, then the Ajax function gets the chat content from php and adds it into that Div, without any refresh.

You can see it, and get the code here: Ajax-PHP Chat script.

[dyr]

Thank you very much for assisting me!  So you recommend combining my chat_hist.php with the chat.php, and removing the ajax I currently have?  And then writing new Ajax to automatically add a new message in to the div (on another page where I include('chat.php'))?