After using a flooble chatterbox from www.flooble.com, and trying to (unsuccessfully) hack it to get rid of the ads at the bottom, I have resolved to putting my newly developed AJAX skills to the test, to create an open-source version, with no ads. I’ll explain how you can make one too in this entry.
Before you get started, you need to have a couple things.
- A database that you can access, with a known username and password, and that you’re able to write to. You’ll be creating a table and populating it with data. If you don’t have that, go to mysql.com and get one there. (If you want to facilitate the use of MySQL, then you should probably go with something like phpMyAdmin.
- PHP engine. If you don’t have PHP, you’ll need to get that also.
- A web server. Apache works fine. I haven’t used MS IIS in about 5 years, and I don’t think you should either really. But there’s not anything wrong with it…just setting it up take time.
- Also, if you don’t have a good coding program, I recommend using Notepad++. It’s opensource, free, and rawks face.
Now if you don’t have the ability to set all these things up on your own, or don’t already have them on a web server somewhere – then you can always get WAMP and it will have everything you need, bundled together, and in one install file. (Note: I don’t offer support for setting these services up. There is documentation, and they are all freeware/opensource, so everything you need is out there on their website)
Once you have your empty database created, you’ll need to run some SQL Commands to set up the table…
CREATE TABLE `ajax_chat` (`id` INT NOT NULL AUTO_INCREMENT , `ajaxchat_username` VARCHAR( 255 ) NOT NULL , `ajaxchat_text` TEXT NOT NULL , PRIMARY KEY ( `id` ) , FULLTEXT (`ajaxchat_text`)) TYPE = MYISAM ;
This code creates a table
ajax_chat with 3 fields:
id, ajaxchat_username, and ajaxchat_text.
id is used for the primary key to sort the entries by number, since we’re not keeping track of the time they were entered.
ajaxchat_username is going to be the username that the user inputs on the chat dialogue page. And
ajaxchat_text is the chat text itself. It’s set up for a full text box, not just a 255 input box, like the
And then some sample data so you can test it’s functionality…
INSERT INTO `ajax_chat` (`ajaxchat_username` , `ajaxchat_text` ) VALUES ('User1', 'hello world!'), ('User2', 'testing...hello world again');
Here we enter two records. Note that in the first set of SQL code we created a field called ‘id’ but here we leave it out of the Values() section because it’s auto-incremented.So we have (‘username’, ‘chat_text’) as the format for entering this in the database manually.
Now let’s move on to the pages…
index.htm we’ll have the only page that the user will see:
Let’s break this down a bit…we’ll start at the bottom to understand the layout of the page:
The first line is the
<body onload="requestChatInfo()"> <div id="divChatInfo"></div> <div id="divStatus"></div> <form method="post" action="sendchat.php" target="hiddenFrame"> <p>Name: <input type="text" name="txtName" value="" style="width: 100px" /><br /> Say: <input type="text" id="txtChat" name="txtChat" value="" style="width: 113px"><br /></p> <p><input type="submit" value="Send" /> <input type="button" value="Refresh" onclick="requestChatInfo()" /></p> </form> <iframe src="about:blank" name="hiddenFrame" width="0" height="0" frameborder="0"></iframe> </body>
<body>tage with the call to requestChatInfo() when the page loads. That way it automatically shows the chat text. Then there is
<div id="divChatInfo"></div>. This is where the chat text is going to show up. Next is
<div id="divStatus"></div>. Any error messages will appear here if there is a problem. Then the form for posting. The form calls
sendchat.phpwhen submitted, and loads it in
target="hiddenFrame". The hiddenFrame is at the end of the html segment. When the form is submitted it sends two input boxes,
txtChat. There is also a "Refresh" button. This makes the function call to the function
requestChatInfo()which will be explained in a bit. Then the
The first set of functions are called by the
The first function is
requestChatInfo(sText). This function goes to the hiddenFrame, and loads the
The second function is to display the chat messages. It is going to be called by
getchatinfo.php to send a variable across from the hiddenFrame to this visible page, denoted in the function call as
The next set of functions are for the
The first function is
clearChatBox. This one gave me the most trouble to come up with. It clears the text from the chat box after the information has been sent to the database and back to your page. You'll note in the html code above that the
txtChat has an
ID="txtChat" NAME="txtChat" tag, while the input for
txtName does not, only the
NAME= tag. This makes the txtChat an object so we can call the attributes as variables and set them. If for some reason you wanted to clear the name text box, you could add
ID="txtName" to the name input box, and add another line to the
clearChatBox function that said:
txtName.value = "";
The second function is the error message function,
saveResult(sMessage). This function first calls
requestChatInfo() to load the chat messages. Then it brings over any error messages from
sendchat.php, and loads them to the
On to the
getchatdata.php page. This page operates in the hiddenFrame, making a database connection, quering the data, and returning it to the visible page every 10 seconds.
I have commented each line to show you what is going on with each segment of code. Basically, without repeating the comments, if there is an error, then an error message is stored to $sInfo. If it is successful, then the chat is stored to $sInfo. Regardless, $sInfo is then passed to the
<div> tag as an innerHTML, which will be called by the
requestChatInfo() function in
Finally, is the
sendchat.php page. This page takes what you put in the text input boxes, gets them from the variables passed to the hiddenFrame, and runs an SQL query on it to either show an error message or input the data and update the chat screen.
When the window finishes loading, it calls the
saveResult() function and passes it the $sStatus variable to be displayed on
index.htm. If there is no error message, then there will be nothing displayed.
Then it calls the
clearChatBox() function to clear the Say box so that you can continue typing like normal.
Now, load them all up to your server, and call it in Firefox or IE, and see if it works. Go here to see a demo verison. I'll be adding more functionality to this as I create it for the homepage of the-spot.net, and integrate it with the phpbb forums. I'm new to AJAX, therefore I may not have the most optimized code possible, but I'm open for suggestions for streamlining and security if you would like to add to the project. I'll comment your credits into the code. Also, you can feel free to bookmark this site and check back for update posts for this project. I don't offer any personal tech support for this (because to do so would be extremely trying on my time and availability), and you may have to modify it to meet your server's requirements. If you do use this though, and find it useful, all I ask is that you give me a little credit for the work I put into it (instead of doing homework) :-).
A side feature is that if you save the url to your Bookmark Toolbar of FF (or Links Toolbar in IE) you can load the page into the Sidebar of FF and IE. In Firefox just drag the url to the Bookmark Toolbar, and right click on the button > Properties > Check "Load link in sidebar". For IE users (hopefully there are none) create a new shortcut with the url:
and change the web address that's bolded.