Jump to content
xisto Community
Sign in to follow this  
Rigaudon

How To Put An Active Shoutbox On Your Website Using Ajax And Mysql

Recommended Posts

Hi,

In this tutorial I will cover the simple concept of making a global shoutbox in a website. This tutorial covers basics and some nice features.

Let's go over the method we have in mind first, so you're not completely lost when doing this for yourself.

We are going to use AJAX and MySQL. For those of you who don't know, AJAX (Asynchronous JavaScript and XML) is JavaScript + PHP or ASP. I will be using PHP.
MySQL- databases. Yes, we are going to store all of these messages in a database.

DATABASE

Let's start with the database. You need to make a new table that holds all the shoutbox information. For mine, I will use four simple parameters (you can add more to yours if you feel like it's necessary):

ID - Primary key. Integer of (default) 11 digits. You can make this smaller or larger if you want. Auto-increments.
Poster - Who was the message posted by? I use a varchar of 20 characters.
Time - The time of the post. This is going to be a timestamp. The default syntax is YYYY-MM-DD HH:MM:SS. You can parse this yourself later, if you want.
Message - text. The message itself.

So, the MySQL would look something like this:

CREATE TABLE  `shoutbox` (`id` INT NOT NULL AUTO_INCREMENT ,`poster` VARCHAR( 20 ) NOT NULL ,`message` TEXT NOT NULL ,`time` TIMESTAMP NOT NULL ,PRIMARY KEY (  `id` ))


The HTML

Let's put together a simple HTML form, assuming the user is already logged in and can post.
<html><head><title>Shoutbox</title></head><body onload="updateShoutbox()"><div id="shoutbox"></div>Message:<input type="text" id="message" /><input type="button" onclick="postMsg()" /></body></html>
Simple, you can add some styles or whatever to make it more interesting. Notice I call two JavaScript functions. We're going to make those presently.

OK, easy part done. Now, let's talk about the method of actually making the shoutbox work.

Since there is no way (as of yet) to get something to a browser as soon as it is written in, we need to check to see if there are any new posts every so often.
This is quite ineffective, really (if you imagine going to the post office every hour to check your mail instead of the mailman bringing it to you, its kinda like that), but there's no other way to do it.
You want an increment that is low enough so that users can actually have a chat, but not so much that it slows down and crashes the browser. This varies from domain to domain, we we'll worry about this later.

CLIENT SIDE SCRIPT

Now for the AJAX functions. You're going to need just 2, and that is to just check updates and post it.
There are actually a few ways to do this, and you can pick which one would be more efficient for your needs.
You can:
a) Check to see if any NEW posts were made (involve much checking) and only post NEW posts.
;) Post everything regardless up to a certain amount of posts.

I'm going to do B, since it won't slow down the browser and I don't have to make code for checking time.

NOTE: These functions should go in the head.
OK, here's the basic function for getting the XMLHttp Object:
<script type="text/javascript">function GetXmlHttpObject(){	if (window.XMLHttpRequest){  // code for IE7+, Firefox, Chrome, Opera, Safari		return new XMLHttpRequest();	}	if (window.ActiveXObject){// code for IE6, IE5		return new ActiveXObject("Microsoft.XMLHTTP");	}	return null;}</script>
Now, let's make the update shoutbox function.
}
</script> linenums:0'><script type="text/javascript">var xmlhttp1;function updateShoutbox(){xmlhttp1=GetXmlHttpObject(); if (xmlhttp1==null){ alert ("Browser does not support HTTP Request"); return; } var url="update.php"; xmlhttp1.onreadystatechange=function(){ if(xmlhttp1.readyState==4){ document.getElementById("shoutbox").innerHTML=xmlhttp1.responseText; } }; xmlhttp1.open("GET",url,true); xmlhttp1.send(null); var x = setTimeout(function(){ updateShoutbox(); },1000); //Checks for new posts every second. Remember, it's in milliseconds. Change as necessary.}</script>
And finally, the script for posting.
<script type="text/javascript">var xmlhttp2;var username = "Some guy"; //Replace this with username by using PHP.function postMsg(){xmlhttp2=GetXmlHttpObject();	if (xmlhttp2==null){		alert ("Browser does not support HTTP Request");		return;	}	var url="post.php?user="+username+"&msg="+document.getElementById("message").value;	xmlhttp2.open("GET",url,true);	xmlhttp2.send(null);	}</script>
Notice for the username I put in "Some guy". You're supposed to replace this with the username by using PHP, like:
var username = "<?php echo $username; ?>";


And that's all the client side script we need.

SERVER SIDE SCRIPT
We need 2 different PHP scripts, post.php and update.php.

Let's start with update. We need to get up to a certain amount of posts. Let's just say its 20. Your script should look something like:
Note: I'm assuming you've already connected to your database.
<?php//Connect to your database first.$query = "SELECT COUNT(*) FROM shoutbox";$q = mysql_query($query); //Get the total amount of posts. EVAR.$total = mysql_fetch_row($q);$total = $total[0];$posts_returned = 20; //alter as you see fit.//use a loop to get the posts.for($i=($total-$posts_returned);$i<=$total;$i++){$query = "SELECT * FROM shoutbox WHERE id=".$i; //Get the corresponding message.$q = mysql_query($query);$msg = mysql_fetch_array($q);//Format as you see fit.echo "<span style='color:gray;font-weight:bold'>";echo $msg['poster'];echo "</span>";echo $msg['message'];echo "(Posted at ".$msg['time'].")";echo "<br />";}?>

You can add whatever you want to here, make it fancier, yeah yeah.

Moving on to post.php, which is going to take 2 parameters: the user who posted it, and the message.

$poster = $_GET['user'];
$message = $_GET['msg'];

$query = "INSERT INTO shoutbox (poster,message) VALUES ('".$poster."','".$message."')"; //We only need to deal with these two. The others will fill themselves in.
//Important linenums:0'>//Again, assuming you've already connected to the database.$poster = $_GET['user'];$message = $_GET['msg'];$query = "INSERT INTO shoutbox (poster,message) VALUES ('".$poster."','".$message."')"; //We only need to deal with these two. The others will fill themselves in.//Important: remember the single quotes around poster and message. mysql_query($query);
And that should be it. Note: this was written by me, but not tested. Please post any problems you may have, and enjoy!

Share this post


Link to post
Share on other sites

Nice tutorial you have there. But one word of advice, be sure that your bandwidth is able to take the extra load. I have placed a shoutbox in my website but remove it within a month. Reason is that it took too much bandwidth and leave the site down was a while.

Share this post


Link to post
Share on other sites

Very true. If you have (for example) 50 people visiting your website at any given time, that's 50 database queries every second, and it does add up. If you don't have many resources, changing the time between intervals from 1 second to, say, 3-4 seconds wouldn't make much of a difference to anyone having a legit conversation.

Share this post


Link to post
Share on other sites

Hello,Thanks for the excellant tutorial, I have a quick question, do you know how I can change shoutbox so that when a user logs into my ip board, they show up - something like - user: some guy has just logging into the shoutbox - as a shout,I have been searching for ages and cant seem to find any thing... any help would be much appreciated.Thanks,

Share this post


Link to post
Share on other sites

Very nice tutorial here. I'm wondering if it would be possible to do the shoutbox using flat-files though instead of requiring a database (SQL). I'm thinking something as small as a shoutbox wouldn't really need too much power, and flat-file would speed things up a bit since all you're doing is showing x amount of posts and keeping the rest in a log.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.