HOME  |  AJAX  |  SOLUTIONS  |  TECHNOLOGIES  |  E-COMMERCE  |  ABOUT US
AJAX Web Chat Part 1

This tutorial will walk you through the step in order to create an AJAX driven web chat program.  This will be a very simple program, but will be expanded upon in future tutorials.

You can view the results of the AJAX Driven Web Chat Tutorial here
You can download the Source for the AJAX Driven Web Chat Tutorial here

Creating the Chat Tables
We are going to create two tables for the chat program, but we will only use one for the first part of this tutorial.

The two tables are "chat" where we will in later tutorials store all of the different chat rooms, and "message" which contains the list of all messages sent to the chat system.
--Chat Table
DROP TABLE IF EXISTS `chat`;
CREATE TABLE `chat` (
`chat_id` INT(11) NOT NULL AUTO_INCREMENT,
`chat_name` VARCHAR(64) DEFAULT NULL,
`start_time` DATETIME DEFAULT NULL,
PRIMARY KEY (`chat_id`)
) ENGINE=INNODB DEFAULT CHARSET=latin1;
 
--Message Table
DROP TABLE IF EXISTS `message`;
CREATE TABLE `message` (
`message_id` INT(11) NOT NULL AUTO_INCREMENT,
`chat_id` INT(11) NOT NULL DEFAULT '0',
`user_id` INT(11) NOT NULL DEFAULT '0',
`user_name` VARCHAR(64) DEFAULT NULL,
`message` TEXT,
`post_time` DATETIME DEFAULT NULL,
PRIMARY KEY (`message_id`)
) ENGINE=INNODB DEFAULT CHARSET=latin1;
These tables are just a preleminary setup and will probably change quite a bit through then upcoming parts of these tutorials.



The HTML Skeleton
The HTML is going to be pretty straight forward to start out with.  Lets start with our header. 

We know that we will want to add some style information, and instead of placing it in a seperate file, we will leave it in a script tag for now Later we will want to move this to an external file for caching benifits, but we can leave it here for development purposes.  We will also need some JavaScript. 

Once again we could move this to an external file, but we'll leave it here for now.

<html>
<head>
<title>AJAX Driven Web Chat</title>
<style type="text/css" media="screen"></style>
<script language="JavaScript" type="text/javascript"></script>
</head>

Now lets add the rest of the HTML:
	<body>
<h2>AJAX Driven Web Chat.</h2>
<p id="p_status">Status: Normal</p>
Current Chitter-Chatter:
<div id="div_chat" class="chat_main">

</div>
<form id="frmmain" name="frmmain" onsubmit="">
<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="button" name="btn_send_chat" id="btn_send_chat" value="Send" />
</form>
</body>

</html>
We have a header, a paragraph where we can display status, a main div to be used for displaying the chat.  As for

HTML controls, we have a refresh button for testing and incase the program freezes for some reason, a reset button to clear out our database, an area for the user to enter a message, and a send button.

Notice that we have one CSS class that we haven't defined yet, and one inline CSS style.  We'll define our chat_main next.

Our one CSS class that we have for now will be.
overflow: auto; 
height: 300px;
width: 500px;
background-color: #CCCCCC;
border: 1px solid #555555;


The only real item of interest here is the overflow. This will allow our div tag to behave like an IFrame. As we will see, this will work very well for FireFox, but will require some extra code for IE to behave correctly.

It is better to use div's with overflows rather than IFrames because search engines can index them easier.