<!DOCTYPE html>
<html>
<head>
<title>AJAX Driven Web Chat</title>
<link rel="stylesheet" type="text/css" href="chat_main.css"/>
<script language="JavaScript" type="text/javascript">
var sendReq = getXmlHttpRequestObject();
var receiveReq = getXmlHttpRequestObject();
var lastMessage = 0;
var mTimer;
function getXmlHttpRequestObject()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest(); //for chrome
}
}
function blockSubmit()
{
val = document.getElementById('div_chat').innerHTML = receiveReq.readyState + "ready state";
sendChatText();
return false;
}
function startChat()
{
document.getElementById('txt_message').focus();
getChatText();
}
function getChatText()
{
if (receiveReq.readyState == 4 || receiveReq.readyState == 0)
{
val = document.getElementById('div_chat').innerHTML = "Testing onsubmit";
receiveReq.open("GET", 'getChat.php', true);
receiveReq.onreadystatechange = handleReceiveChat;
receiveReq.send(null);
}
}
function handleReceiveChat()
{
if (receiveReq.readyState == 4)
{
var xmldoc = receiveReq.responseText;
document.getElementById('div_chat').innerHTML = xmldoc + " xmldoc";
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");
alert(user_node);
var text_node = message_nodes[i].getElementsByTagName("text");
var time_node = message_nodes[i].getElementsByTagName("time");
chat_div.innerHTML += user_node[0].firstChild.nodeValue + ' ';
chat_div.innerHTML += time_node[0].firstChild.nodeValue + '<br />';
chat_div.innerHTML += text_node[0].firstChild.nodeValue + '<br />';
lastMessage = (message_nodes[i].getAttribute('id'));
}
mTimer = setTimeout('getChatText();',2000);
}
}
</script>
</head>
<body onload="startChat();">
<h2>AJAX Driven Web Chat.</h2>
<p id="p_status">Status: Normal</p>
Current Chitter-Chatter:
</br>
<p><a href="createTable.php">Need to create a database table?</a></p>
<div id="div_chat" class="chat_main">
</div>
<!-- put in return to cancel onSubmit!!! thus onSubmit should return to here-->
<form id="frmmain" name="frmmain" onsubmit="return blockSubmit();" action="">
<input type="button" name="btn_get_chat" id="btn_get_chat" value="Refresh Chat" />
<input type="button" name="btn_reset_chat" id="btn_reset_chat" value="Reset Chat" /><br />
<input type="text" id="txt_message" name="txt_message" style="width: 447px;" />
<input type="submit" name="btn_send_chat" id="btn_send_chat" value="Submit" onClick="getChatText();"/>
</form>
</body>
</html>
<?php
include('database.php');
$message_query = db_query();
?>
function db_query()
{
$con = mysql_connect(DBHOST ,DBUSER, DBPASS);
$selected_db = mysql_select_db(DBNAME, $con);
if (!$selected_db)
{
echo "Can't use ". DBNAME . " ".mysql_error();
}
$sql = "SELECT message_id, user_name, message, date_format(post_time, '%h:%i') as post_time FROM message WHERE chat_id = 1";
$result = mysql_query($sql,$con);
}