[SOLVED] Simple AJAX chat not working

php_joe · May 1, 2008

Ok, I can't figure out what I'm doing wrong. I got this simple chat script that uses mySQL and I've been trying to modify it so it's flat-file, but I just can't get it to work.

The script uses 3 pages. The first is the chat window, the second is a php file that stores the recent posts, and the third writes new posts to the second file and then displays any posts that havn't been read by the viewer yet.

This is the chat file:

<html>
<head>
	<title>AJAX Driven Web Chat</title>
	<style type="text/css" media="screen">
		.chat_time {
			font-style: italic;
			font-size: 9px;
		}
	</style>
<script language="JavaScript" type="text/javascript">
var sendReq = getXmlHttpRequestObject();
var receiveReq = getXmlHttpRequestObject();
var lastMessage = 0;
var mTimer;

		//Function for initializating the page.
		function startChat() {
			//Set the focus to the Message Box.
			document.getElementById('txt_message').focus();
			//Start Recieving Messages.
			getChatText();
		}

		//Gets the browser specific XmlHttpRequest Object
		function getXmlHttpRequestObject() {
			if (window.XMLHttpRequest) {
				return new XMLHttpRequest();
			} else if(window.ActiveXObject) {
				return new ActiveXObject("Microsoft.XMLHTTP");
			} else {
				document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.';
			}
		}

//Gets the current messages from the server
function getChatText() {
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
//if(typeof lastMessage=="undefined") alert("undefined");
//else alert(lastMessage);
receiveReq.open("GET", 'getChat.php?chat=1&last=' + lastMessage, true);
alert('getChat.php?chat=1&last=' + lastMessage);
receiveReq.onreadystatechange = handleReceiveChat; 
receiveReq.send(null);
}			
}

		//Add a message to the chat server.
		function sendChatText() {
			if(document.getElementById('txt_message').value == '') {
				alert("You have not entered a message");
				return;
			}
			if (sendReq.readyState == 4 || sendReq.readyState == 0) {
				sendReq.open("POST", 'getChat.php?chat=1&last=' + lastMessage, true);
				sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sendReq.onreadystatechange = handleSendChat; 
				var param = 'message=' + document.getElementById('txt_message').value;
				param += '&name=Ryan Smith';
				param += '&chat=1';
				sendReq.send(param);
				document.getElementById('txt_message').value = '';
			}							
		}

//When our message has been sent, update our page.
function handleSendChat() {
//Clear out the existing timer so we don't have 
//multiple timer instances running.
clearInterval(mTimer);
getChatText();
}

//Function for handling the return of chat text
function handleReceiveChat() {
if (receiveReq.readyState == 4) {
var chat_div = document.getElementById('div_chat');
var xmldoc = receiveReq.responseXML;
var message_nodes = xmldoc.getElementsByTagName("message"); 
var n_messages = message_nodes.length
for (i = 0; i < n_messages; i++) {
var user_node = message_nodes[i].getElementsByTagName("user");
var text_node = message_nodes[i].getElementsByTagName("text");
var time_node = message_nodes[i].getElementsByTagName("time");
lastMessage = (message_nodes[i].getAttribute('id'));
chat_div.innerHTML += '<span class="chat_time">';
chat_div.innerHTML += time_node[0].firstChild.nodeValue;
chat_div.innerHTML += "</span> [<span class='user'>";
chat_div.innerHTML += user_node[0].firstChild.nodeValue;
chat_div.innerHTML += '</span>]: ';
chat_div.innerHTML += last[0].firstChild.nodeValue + ' - ';
chat_div.innerHTML += text_node[0].firstChild.nodeValue + '<br />';
chat_div.scrollTop = chat_div.scrollHeight;
}
mTimer = setTimeout('getChatText();',2000); //Refresh our chat in 2 seconds
}
}

//This functions handles when the user presses enter.  Instead of submitting the form, we
//send a new message to the server and return false.
		function blockSubmit() {
			sendChatText();
			return false;
		}
		//This cleans out the database so we can start a new chat session.
		function resetChat() {
			if (sendReq.readyState == 4 || sendReq.readyState == 0) {
				sendReq.open("POST", 'getChat.php?chat=1&last=' + lastMessage, true);
				sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sendReq.onreadystatechange = handleResetChat; 
				var param = 'action=reset';
				sendReq.send(param);
				document.getElementById('txt_message').value = '';
			}							
		}
		//This function handles the response after the page has been refreshed.
		function handleResetChat() {
			document.getElementById('div_chat').innerHTML = '';
			getChatText();
		}	
	</script>
</head>
<body onload="javascript:startChat();">
	<h2><a href="http://www.dynamicAJAX.com" style="color: #000000; text-decoration: none;">AJAX Driven Web Chat</a></h2>
	<p id="p_status">Status: Normal</p>
	Current Chitter-Chatter:
	<div id="div_chat" style="height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555;">

	</div>
	<form id="frmmain" name="frmmain" onsubmit="return blockSubmit();">
		<input type="button" name="btn_get_chat" id="btn_get_chat" value="Refresh Chat" onclick="javascript:getChatText();" />
		<input type="button" name="btn_reset_chat" id="btn_reset_chat" value="Reset Chat" onclick="javascript:resetChat();" /><br />
		<input type="text" id="txt_message" name="txt_message" style="width: 447px;" />
		<input type="button" name="btn_send_chat" id="btn_send_chat" value="Send" onclick="javascript:sendChatText();" />
	</form>
</body>

</html>

And here is the getchat file:

<?php

function displayheaders(){
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
header("Cache-Control: no-cache, must-revalidate" ); 
header("Pragma: no-cache" );
header("Content-Type: text/xml; charset=utf-8");
}

$time = explode('|', gmdate("Y|z|H|i|s"));
$micro = number_format(microtime(), 3);
$seconds = $time[3] . $time[4];
$messageday = $time[0] . $time[1] . $time[2];
$messagetime = (($seconds+$micro)*1000);
if(!$last) $last = '000000000.0000000';
$last = explode('.', $last);

displayheaders(); //Send headers to prevent caching.

$database = "./db.php";
if(file_exists($database)) require $database;
else die('Error: database missing.');

if(isset($_POST['message']) && $message != '') { //Check to see if a message was sent.
$msg[$messageday][$messagetime] = array("$time[2]:$time[3]:$time[4]", 'Admin', 'public', $message);
if($msg) foreach($msg as $key1 => $value) {
if($key1 >= $messageday) foreach($msg[$key1] as $key2 => $value) {
if($key2 > ($messagetime - 10)) {
$newline[$key2] = '$msg[' . $key1 . '][' . $key2 . '] = array("' . "$time[2]:$time[3]:$time[4]\", 'Admin', 'public', $value" . ');';
}
}
}
if($newline) $info = "<?php\n" . implode("\n", $newline) . "\n?>";
$handle = fopen("./db.php", 'w');
fwrite($handle, $info);
fclose($handle);
}

$xml = '<?xml version="1.0" ?><root>';
if($msg) foreach($msg as $key1 => $value) {
if($key1 >= $last[0]) foreach($msg[$key1] as $key2 => $value) {
if($key2 > $last[1]) {
$xml .= "<message id='" . $key1 . '.' . $key2 . "'>";
$xml .= "<time>". $msg[$key1][$key2][0] . "</time>";
$xml .= "<user>". $msg[$key1][$key2][1] . "</user>";
$xml .= "<type>". $msg[$key1][$key2][2] . "</type>";
$xml .= "<text>". $msg[$key1][$key2][3] . "</text>";
$xml .= "</message>";
}
}
}else{
$xml .= "<message id='" . $messageday . '.' . $messagetime . "'>";
$xml .= "<time></time>";
$xml .= "<user></user>";
$xml .= "<type></type>";
$xml .= "<text></text>";
$xml .= "</message>";
}

$xml .= '</root>';
echo $xml;
?>

The messages are stored on db.php like this:

<?php
$msg[200812107][4525944] = array('07:45:25', 'Admin', 'public', 'Hello');
$msg[200812107][4526944] = array('07:45:26', 'Admin', 'public', 'This is a test');
$msg[200812107][4527944] = array('07:45:27', 'Admin', 'public', 'This is a line');
$msg[200812107][4528944] = array('07:45:28', 'Admin', 'public', 'Goodbye');
?>

Now, the AJAX on the main page should call something like getchat.php?last=20080429.8765476

getchat.php should then display any messages with keys higher than $last.

When I change the AJAX to display the "last" variable it shows up correctly, and when I open getchat.php and $_GET $last then the xml displays correctly, but the messages don't show up in the chat window... :'(

Sign In

[SOLVED] Simple AJAX chat not working

Recommended Posts

php_joe

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information