How to Create A Simple Web-based Chat Application

Jul 24th in JavaScript & AJAX by Gabriel Nava

In this tutorial we will be creating a simple web-based chat application with PHP and jQuery. This sort of utility would be perfect for a live support system for your website.

Author: Gabriel Nava

I am a web developer located in Atlanta. I enjoy working with PHP, jQuery, MySQL, CSS and anything web related.

Introduction

The chat application we will be building today will be quite simple. It will include a login and logout system, AJAX-style features, and will also offer support for multiple users.

Step 1 : HTML Markup

We will start this tutorial by creating our first file called index.php.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat - Customer Module</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>

<div id="wrapper">
	<div id="menu">
		<p class="welcome">Welcome, <b></b></p>
		<p class="logout"><a id="exit" href="#">Exit Chat</a></p>
		<div style="clear:both"></div>
	</div>
	
	<div id="chatbox"></div>
	
	<form name="message" action="">
		<input name="usermsg" type="text" id="usermsg" size="63" />
		<input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
	</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){

});
</script>
</body>
</html>

We start our html with the usual DOCTYPE, html, head, and body tags. In the head tag, we add our title, and link to our css stylesheet (style.css).
Inside the body tag, we structure our layout inside the #wrapper div. We will have three main blocks: a simple Menu, our chatbox, and our message input; each with its respective div and id.
- The #menu div will consist of two paragraph elements. The first will be a welcome to the user and will float left and the second will be an exit link and will float right. We also include a div to clear the elements.
- The #chatbox div will contain our chatlog. We will load our log from an external file using jQuery's ajax request.
- The last item in our #wrapper div will be our form, which will include an text input for the user message and a submit button.
We add our scripts last to load the page faster. We will first link to the Google jQuery CDN, as we will be using the jQuery library for this tutorial. Our second script tag will be where we will be working on. We will load all of our code after the document is ready.

Step 2 : CSS Styling

We will now add some css to make our chat application look better than with the default browser styling. The code below will be added to our style.css file.

 
/* CSS Document */
body {
	font:12px arial;
	color: #222;
	text-align:center;
	padding:35px; }
 
form, p, span {
	margin:0;
	padding:0; }
 
input { font:12px arial; }
 
a {
	color:#0000FF;
	text-decoration:none; }
 
	a:hover { text-decoration:underline; }
 
#wrapper, #loginform {
	margin:0 auto;
	padding-bottom:25px;
	background:#EBF4FB;
	width:504px;
	border:1px solid #ACD8F0; }
 
#loginform { padding-top:18px; }
 
	#loginform p { margin: 5px; }
 
#chatbox {
	text-align:left;
	margin:0 auto;
	margin-bottom:25px;
	padding:10px;
	background:#fff;
	height:270px;
	width:430px;
	border:1px solid #ACD8F0;
	overflow:auto; }
 
#usermsg {
	width:395px;
	border:1px solid #ACD8F0; }
 
#submit { width: 60px; }
 
.error { color: #ff0000; }
 
#menu { padding:12.5px 25px 12.5px 25px; }
 
.welcome { float:left; }
 
.logout { float:right; }
 
.msgln { margin:0 0 2px 0; }

There's nothing special about the above css other than the fact that some id's or classes, which we have set a style for, will be added a bit later.

As you can see above, we are finished building the chat's user interface.

Step 3 : Using PHP to Create a Login Form.

Now we will implement a simple form that will ask the user their name before continuing further on.

<?
session_start();

function loginForm(){
	echo'
	<div id="loginform">
	<form action="index.php" method="post">
		<p>Please enter your name to continue:</p>
		<label for="name">Name:</label>
		<input type="text" name="name" id="name" />
		<input type="submit" name="enter" id="enter" value="Enter" />
	</form>
	</div>
	';
}

if(isset($_POST['enter'])){
	if($_POST['name'] != ""){
		$_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
	}
	else{
		echo '<span class="error">Please type in a name</span>';
	}
}
?>

The loginForm() function we created is composed of a simple login form which asks the user for his/her name. We then use an if and else statement to verify that the person entered a name. If the person entered a name, we set that name as $_SESSION['name']. Since we are using a cookie-based session to store the name, we must call session_start() before anything is outputted to the browser.

One thing that you may want to pay close attention to, is that we have used the htmlspecialchars() function, which converts special characters to HTML entities, therefore protecting the name variable from become victim to Cross-site scripting (XSS). We will later also add this function to the text variable that will be posted to the chat log.

Showing the Login Form

In order to show the login form in case a user has not logged in, and hence has not created a session, we use another if and else statement around the #wrapper div and script tags in our original code. On the opposite case, this will hide the login form, and show the chat box if the user is logged in and has created a session.;

<?php
if(!isset($_SESSION['name'])){
	loginForm();
}
else{
?>
<div id="wrapper">
	<div id="menu">
		<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
		<p class="logout"><a id="exit" href="#">Exit Chat</a></p>
		<div style="clear:both"></div>
	</div>	
	<div id="chatbox"></div>
	
	<form name="message" action="">
		<input name="usermsg" type="text" id="usermsg" size="63" />
		<input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
	</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
});
</script>
<?php
}
?>

Welcome and Logout Menu

We are not yet finished creating the login system for this chat application. We still need to allow the user to log out, and end the chat session. If you can remember, our original HTML markup included a simple menu. Let's go back and add some PHP code that will give the menu more functionality.

First of all, let's add the users name to the welcome message. We do this by outputting the session of the user's name.

<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>

In order to allow the user to log out and end the session, we will jump ahead of ourselves and briefly use jQuery.

<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
	//If user wants to end session
	$("#exit").click(function(){
		var exit = confirm("Are you sure you want to end the session?");
		if(exit==true){window.location = 'index.php?logout=true';}		
	});
});
</script>

The jquery code above simple shows a confirmation alert if a user clicks the #exit link. If the user confirms the exit, therefore deciding to end the session, then we send them to index.php?logout=true. This simple creates a variable called logout with the value of true. We need to catch this variable with PHP:

if(isset($_GET['logout'])){	
	
	//Simple exit message
	$fp = fopen("log.html", 'a');
	fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");
	fclose($fp);
	
	session_destroy();
	header("Location: index.php"); //Redirect the user
}

We now see if a get variable of 'logout' exists using the isset() function. If the variable has been passed via a url, such as the link mentioned above, we proceed to end the session of the user's name.

Before destroying the user's name session with the session_destroy() function, we want to write a simple exit message to the chat log. It will say that the user has left the chat session. We do this by using the fopen(), fwrite(), and fclose() functions to manipulate our log.html file, which as we will see later on, will be created as our chat log. Please note that we have added a class of 'msgln' to the div. We have already defined the css styling for this div.

After doing this, we destroy the session, and redirect the user to the same page where the login form will appear.

Step 4 : Handling User Input

After a user submits our form, we want to grab his input and write it to our chat log. In order to do this, we must use jQuery and PHP to work synchronously on the client and server sides.

jQuery

Almost everything we are going to do with jQuery in order to handle our data, will revolve around the jQuery post request.

	//If user submits the form
	$("#submitmsg").click(function(){	
		var clientmsg = $("#usermsg").val();
		$.post("post.php", {text: clientmsg});				
		$("#usermsg").attr("value", "");
		return false;
	});

Before we do anything, we must grab the user's input, or what he has typed into the #submitmsg input. This can be achieved with the val() function, which gets the value set in a form field. We now store this value into the clientmsg variable.
Here come's our most important part: the jQuery post request. This sends a POST request to the post.php file that we will create in a moment. It posts the clients input, or what has been saved into the clientmsg variable.
Lastly, we clear the #usermsg input by setting the value attribute to blank.

Please not that the code above will go into our script tag, where we placed the jQuery logout code.

PHP - post.php

At the moment we have POST data being sent to the post.php file each time the user submits the form, and sends a new message. Our goal now is to grab this data, and write it into our chat log.

<?
session_start();
if(isset($_SESSION['name'])){
	$text = $_POST['text'];
	
	$fp = fopen("log.html", 'a');
	fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
	fclose($fp);
}
?>

Before we do anything, we have to start the post.php file with the session_start() function as we will be using the session of the user's name in this file.
Using the isset boolean, we check if the session for 'name' exists before doing anything else.
We now grab the POST data that was being sent to this file by jQuery. We store this data into the $text variable.
This data, as will all overall user input data, will be stored on the log.html file. To do this we open the file with the mode on the fopen function to 'a', which according to php.net opens the file for writing only; places the file pointer at the end of the file. If the file does not exist, attempt to create it. We then write our message to the file using the fwrite() function.
- The message we will be writing will be enclosed inside the .msgln div. It will contain the date and time generated by the date() function, the session of the user's name, and the text, which is also sorrounded by the htmlspecialchars() function to prevent from XSS.
Lastly, we close our file handle using fclose().

Step 5 : Displaying the Chat Log (log.html) Contents

Everything the user has posted is handled and posted using jQuery; it is written to the chat log with PHP. The only thing left to do is to display the updated chat log to the user.

In order to save ourselves some time, we will preload the chat log into the #chatbox div if it has any content.

	<div id="chatbox"><?php
	if(file_exists("log.html") && filesize("log.html") > 0){
		$handle = fopen("log.html", "r");
		$contents = fread($handle, filesize("log.html"));
		fclose($handle);
		
		echo $contents;
	}
	?></div>

We use a similar routine as we used the post.php file, except this time we are only reading and outputting the contents of the file.

The jQuery.ajax request

The ajax request is the core of everything we are doing. This request not only allows us to send and receive data throught the form without refreshing the page, but it also allows us to handle the data requested.

//Load the file containing the chat log
	function loadLog(){		

		$.ajax({
			url: "log.html",
			cache: false,
			success: function(html){		
				$("#chatbox").html(html); //Insert chat log into the #chatbox div				
		  	},
		});
	}

We wrap our ajax request inside a function. You will see why in a second. As you see above we will only use three of the jQuery ajax request objects.

url: A string of the URL to request. We will use our chat log's filename of log.html.
cache: This will prevent the our file from being cached. It will ensure that we get an updated chat log everytime we send a request.
sucess: This will allow us to attach a function that will pass the data we requested.

As you see, we then move the data we requested (html) into the #chatbox div.

Auto-scrolling

As you may have seen in other chat applications, the content automatically scrolls down if the chat log container (#chatbox) overflows. We are going to implement a simple and similar feature, that will compare the container's scroll height before and after we do the ajax request. If the scroll height is greater after the request, we will use jQuery's animate effect to scroll the #chatbox div.

	//Load the file containing the chat log
	function loadLog(){		
		var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
		$.ajax({
			url: "log.html",
			cache: false,
			success: function(html){		
				$("#chatbox").html(html); //Insert chat log into the #chatbox div	
				
				//Auto-scroll			
				var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
				if(newscrollHeight > oldscrollHeight){
					$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
				}				
		  	},
		});
	}

We first store the #chatbox div's scroll height into the oldscrollHeight variable before we make the request.
After our request has returned sucessful, we store the #chatbox div's scrolle height into the newscrollHeight variable.
We then compare both of the scroll height variables using an if statement. If the newscrollHeight is greater than the oldscrollHeight, we use the animate effect to scroll the #chatbox div.

Continuously Updating the Chat Log

Now one question may arise, how will we constantly update the new data being sent back and forth between users? Or to rephrase the question, how will we continuously keep sending requests to update the data?

setInterval (loadLog, 2500);	//Reload file every 2500 ms or x ms if you wish to change the second parameter

The answer to our question lies in the setInterval function. This function will run our loadLog() function every 2.5 seconds, and the loadLog function will request the updated file and autoscroll the div.

Finished

We are finished! I hope that you learned how a basic chat system works, and if you have any suggestions on anything, I'll happily welcome them. This chat system is a simple as you can get with a chat application. You can work off this and build a multiple chat rooms, add an administrative backend, add emoticons, ect. The sky here is your limit.

Below are a few links you might want to check if you are thinking of expanding this chat application:

Secure Your Forms With Form Keys - prevent prevent XSS (Cross-site scripting) and Cross-site request forgery
Submit A Form Without Page Refresh using jQuery - Expand on our ajax request
How to Make AJAX Requests With Raw Javascript - Learn how requests work behind the scenes with raw javascript.

Check out some more great tutorials and articles that you might like

Create a Photo Admin Site Using PHP and jQuery Screencasts
Building the Back-End of a Photo Site Screencasts
Asynchronous Comments with PHP, jQuery, and JSON PHP

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )

Anthony Cook July 24th

Wow this looks awesome! i’m gonna have a good read through this when i finish work
( Reply )
1. chat user July 29th
  
  if you give the chat.zip by making the all files yhat would be better
  ( Reply )
james July 24th

Nice article, i skimmed through it but im gonna try it out later!

thanks
( Reply )
Chris Simpson July 24th

really pleased to see that the quality of ‘free’ tutorials has remained high. love this site.
( Reply )
1. AdrianMG August 2nd
  
  High quality? I know that a refresh interval (settimeout function) is the only method to avoid something like comet but… come on! It’s just a well explained simple tutorial
  ( Reply )
NickyB July 24th

Actually my boss was recently asking about something just like this and I was considering how to build to it. Now I have a great example to follow THANKS!
( Reply )
1. Yash October 28th
  
  Could you tell me how to setup this chat code on website, because i simply copy all the source code to my website, but i can’t receive the chat, how can i receive chat from user.
  
  Could you please tell me ? Friend
  
  I have added my website for your reference .
  ( Reply )
Andrew July 24th

This is one of those tutorials that I’m going read and code along thoroughly! It looks really well done!
( Reply )
1. BroOf July 24th
  
  Same here
  ( Reply )
2. Márcio A. Toledo July 24th
  
  Same here [2]
  ( Reply )
3. Chalda July 24th
  
  Some here [3]
  ( Reply )
4. Ramon July 26th
  
  Same here [4]
  ( Reply )
5. Alvarez July 27th
  
  Same here [5]
  ( Reply )
6. AliasP July 27th
  
  Same here [6]
  ( Reply )
7. Laneth July 27th
  
  Same here [7]
  ( Reply )
  1. Andy July 28th
    
    hey while were at it…same here
  2. Showfom August 1st
    
    Same here [8]
8. Anil August 1st
  
  Same here [9]
  ( Reply )
  1. John DuHart August 31st
    
    Same here [10]
John Steins July 24th

There’s a LOT of errors in this after downloading the source code…can you try it out on your computer?
( Reply )
John Steins July 24th

Nevermind…I had to undo the short tags on your code from <? to <?php….<? is deprecated just to remind you…I’m using PHP 5.2.10
( Reply )
1. Oscar Godson August 2nd
  
  Yeah… it’s just bad practice in general. :\ the rest of the code looks good though…
  ( Reply )
Bouke van der Bijl July 24th

Aw, no demo

But awesome tut anyway !
( Reply )
Ticabo July 24th

Cool. Thanks for sharing this…
( Reply )
sharpimedia July 24th

Cool. This is really good tutorial!
( Reply )
Rohan July 24th

Simply amazing. Could you by any chance show us a live demo?
( Reply )
Orves July 24th

Nice turorial. I’m going read and code along thoroughl.! It looks really well done!
( Reply )
inooid July 24th

Nice done, only not spam safety, when I send something blank, it just sends it but nice idea!

Great!
( Reply )
grimdeath July 24th

i doubt they will create a live demo because they probably dont want all of us conspiring

you could probably copy/paste one together fairly easily using their code above and try it out then dig thru and follow the tutorial more closely.
( Reply )
1. pixelsoul July 24th
  
  Um ya… all you really need to do is upload the source to your server and it works.
  ( Reply )
Idowebdesign July 24th

Really useful !!
( Reply )
mary July 24th

Looks very interesting and useful. Will definitely try this one out.

Thanks!
( Reply )
Roaa July 24th

Thanks, Gabriel Nava. I’ve just start learning jquery so this will help me out with some new great ideas.

Well Done!
( Reply )
Joel Acevedo July 24th

My only question is… how will it work on the other end? How will you, as admin, will know that there is a new chat session. What about two chat requests at the same time?
( Reply )
1. John Quinones July 24th
  
  I am thinking the same thing
  ( Reply )
Muhammad Adnan July 24th

nice tut , i was looking for this !
( Reply )
Seth Stevenson July 24th

First of all, nice tutorial! Very helpful.

Anyone know if it is possible to create a web chat like this that communicates to a 3rd party IM account? (Gtalk, Messenger, etc?)
( Reply )
Spooky July 24th

http://webscripts.softpedia.com/script/Chat-Scripts/Micro-Chat-41921.html
( Reply )
1. Yash October 28th
  
  But how to set up chat on server and Receiving.
  ( Reply )
Myfacefriends July 24th

another useful tuts! keep on shinning
( Reply )
Soner Gönül July 24th

Thansk!

It’s really great!!
( Reply )
Fynn July 24th

Great stuff! Will read and make this one this weekend
( Reply )
Gordon Tucker July 24th

Any reason for not using Comet? Using a comet based chat will improve the users experience, because you wont have that 2.5 second delay anytime someone chats.
( Reply )
Taylor Dolezal July 24th

Hey man! Thank you so much for this stuff! It’s going to be wonderful on my site and elsewhere! THANKS!
( Reply )
DataMouse July 24th

Awesome. Simply awesome!
( Reply )
zack July 24th

Just what Ive been looking for, I developed one of these without Ajax a while back. it was kind of funny too. It used two frames where the the one frame encased the other, and the inside frame would refresh every 2 seconds. it worked great too.
( Reply )
1. zack July 24th
  
  haha, and make sure you have short open tags enabled, that stumped me for a few minutes. but it works fine now. Nice job with the tutorial!
  ( Reply )
NotAlame July 24th

wow, this look amaing…
Thanks a lot! I will try it!
( Reply )
Eire32 July 24th

WOW this is some cool stuff! Great tut!
( Reply )
Joshua July 24th

Great script. How can you get links to turn into linkable URL’s?
( Reply )
Brian July 24th

Cant wait to read this and try it out when I got the time!

Thanks for this!
( Reply )
Victor July 24th

It’s great but it’s incomplete.
You should write the backend for this app.

How is the admin supposed to receive chat requests?
How the admin will be informed that there’s someone trying to chat with him?
How is the admin supposed to handle multiple chats at the same time?

This is really unusable as it is.

A simple admin interface would be sufficient.

You should consider writing Part 2 of this tutorial.
( Reply )
1. Joel July 28th
  
  This is a tutorial on how to create a SIMPLE Web-based chat application; in this case, it’s coded solely to allow two users to send messages back and forth, without any frills whatsoever. I would like a Part 2 to this tutorial that would integrate some of those features, though.
  ( Reply )
2. Rias November 17th
  
  Anyone please explain, How is the admin supposed to receive chat requests?
  ( Reply )
chillen07 July 24th

lol I like how everyone always comments on here before trying any of the code or reading the tutorial. “This is great! can’t wait to read it and run the code..”. I’m waiting for a prank post with some bogus code that does nothing, and watch everyone continue to post how great it is

Anyways.. this looks awesome, can’t wait to try it when I get home!
( Reply )
Aqib Mushtaq July 24th

WOW, never expected a tutorial like this would be published as free!
( Reply )
Stephen July 24th

Just remember to put the appropriate permissions on the log.html page. Great tutorial….really nice and simple and a good start into developing something further.
( Reply )
Michael July 24th

Great tut! This looks like a much better program that one I tried once. That one didn’t do too well… haha
( Reply )
Scott July 24th

On Line 95 of index.php: }, You need to take the comma out. Otherwise the submitting portion of the application doesn’t work in IE. Since there is nothing after that function IE doesn’t like the extra comma. It is expecting something to fire after that. Take that comma off and it will work perfect in IE.

Otherwise, great tutorial. Absolutely love it. I’ve been meaning to build something similar to this.
( Reply )
1. charlie August 18th
  
  First: Great post!! then… Scott great observation!1
  ( Reply )
sknipas July 24th

Ive done something similar in CI and Jquery (well i copied the entire look&feel of fb chat but anyway..) .
I don’t think its a good idea to hammer the webserver every 2,5 sec.
Consider a 100 users doing the same thing.

Besides that nice tut!
( Reply )
Simon Vansintjan July 24th

For some reason all tutorials that are being published recently, I’m finding extremely useful. I’m going to send this to a friend who’s currently working on the website for freshair.org.uk and wants to incorporate a chat option in it.

This would be ideal,

Thanks!
( Reply )
Gill July 24th

Step 1 is missing start tag

Just thought will let you know guys as many of you might just copy and paste the code.

Great tutorial
( Reply )
Eric Blue July 24th

Great tutorial! I wish I would have had something like this when I created my first webchat back in 1996 (lucidchat.com)
( Reply )
Brian July 24th

Is it possible to make a “Users online: Name1, Name2, Name3 etc.”
( Reply )
7CHP July 24th

absolutely out of the blue, new with .php (more of a flash/old skool html user)

exactly where do I put the rest of the code from Step 3 – in the index.php file I would guess, but inside or outside the html tag?
( Reply )
piyashrija July 24th

thanks mate i have been learning so much from net.tutplus
( Reply )
Justin July 24th

USERS ONLINE would be a great add-on to this TUT
( Reply )
Zé Miguel July 24th

I was really needing this thanks!
( Reply )
Brendon July 24th

If you’re using Rails and are wanting a better solution that polling the server, check out Juggernaut (http://github.com/maccman/juggernaut_plugin/tree/master). It allows the server to push javascript out to the clients anytime, this removing the need for polling which can get quite bad with a lot of people.
( Reply )
Prabhjeet July 25th

it doesn’t work for me in IE7, IE8, else its great tutorial.
Thanks.
( Reply )
1. ali July 27th
  
  quoted from above comment:
  
  “On Line 95 of index.php: }, You need to take the comma out. Otherwise the submitting portion of the application doesn’t work in IE. Since there is nothing after that function IE doesn’t like the extra comma. It is expecting something to fire after that. Take that comma off and it will work perfect in IE.”
  ( Reply )
Zolika July 25th

nice tut, but I think it is not the a good solution for a chat application.

It generates too much traffic (every x sec. u check for a change) and also it reads the entire log.html every time.

A chat applkication should be event driven (clients are notified by new events) and should send min. data.

(i would use socket communication (or rmi – if you are familiar with Java))
( Reply )
Marign July 25th

What about setting a margin?

marign: 0;
margin 5px, 5px, 5px;
// Share
( Reply )
Developnew July 25th

nice….
( Reply )
Brian July 25th

@Prabhjeet – Scott gave the solution for it to work in IE.
( Reply )
Ethan July 25th

Yes, how would you do a users online? And show when people enter?
( Reply )
noussh July 25th

Thank you Nettuts, Great tutorial!
( Reply )
Patrick July 25th

This is a quick ‘n dirty tutorial, nice

But there’s something important to know: This Chat ist _not_ good for a large chatgroups!

PHP can only open a file once at a time, if it’s opened now, it will be locked, so that other instances of PHP cannot access the log. If one person sends a text and one second later another person answer – it’s okay, will work. But if there are a bunch of users, it potentially won’t work anymore, if they send messages at the same time. Then the script will work like the “first-come-first-served”-concept, other messages have to wait until the chatlog will be unlocked.

It’s a better idea to use a mysql-database, if you want a chat for a larger number of users.
( Reply )
leandro July 25th

In Step3, what I have to do with those PHP codes? which file should I copy them? Now I have only an index.html and a style.css file…

thanks
( Reply )
SO July 25th

Gabriel Nava, can you please get a hold of me, I have an application that I would like you to work on for our company. Thanks
( Reply )
Apoorv July 25th

Great tutorial, I need this for an upcoming project.
( Reply )
Alvin Crespo July 25th

I noticed that the HTML does not have the opening tag….otherwise..awesome tutorial…i might try porting this to actionscript 3.0
( Reply )
Steve July 26th

Great tut!
( Reply )
NiA July 26th

Is there a way to hide the requests from Firebug console? I’ve seen various javascripts around the web that don’t display requests in there, like Google’s autocomplete. I think that the console may cause performance issues after some time…
( Reply )
Mujtaba July 27th

the tut is nice in the sense it gives newbies and beginners a chance to learn the possibilities of php + jquery, but this tut can not be put to practical use… at least not without some extra lines of code
( Reply )
Leonardo July 27th

Nice man, the important thing here was how does it works, you use a file to read and write sayings, im going to do it in Rails.

Thanks.
( Reply )
Elizabeth K. Barone July 27th

You rock!

I was using cBox but this is so much better — especially since I can say I did it myself. Thanks a bunch!
( Reply )
Dan July 27th

If extra lines of code are needed to make this functional then why are they not included?

In theory not such a great tutorial.
( Reply )
1. Gabriel Nava July 27th
  
  The Chat Application is fully functional. I thought about writing a big tutorial which included Users Online, Admin Backend, ect. However, that tutorial would either have to be a two-part tutorial or a PLUS tutorial with a screencast. For private reasons I decided to make the tutorial simple & easy to understand.
  
  If you haven’t read it, it shows the basics of how a chat program works. I left the tutorial to the point at which you can extend it in any way you want it. I will consider writing a Part 2.
  ( Reply )
Peewee1002 July 27th

Would it be easy to add in a swear word filter??

Due to being put on a website with minors
( Reply )
1. Gabriel Nava July 28th
  
  Yes, this can be done very easily either with PHP using the str_replace() function
  ( Reply )
2. Bourkster August 2nd
  
  Yep, just create a function with all the str_replace() inside it. Then call to the function on either post or echo.
  
  Can also be used for BBcode and Smileys.
  ( Reply )
Anton Agestam July 28th

Why aren’t you using a database? It would be very hard to make a ‘remove post’ function, wouldn’t it?
( Reply )
K. D. Nuwan Chamara July 28th

Thank you so much…. Very well explained….
( Reply )
Nikolius July 28th

Just want to ask.. how can i delete the “log.html” file every day so the file don’t get too much information. thanks for your wonderful tutorial by the way..
( Reply )
maryjanez July 29th

wow..
Thanks for sharing mate….
( Reply )
naani July 29th

Total thing is Fantastic…But I Tried am getting wrong time before messages…please help me out
( Reply )
miro91 July 29th

Great, tutorial. I’m Bulgarian programmer and i’m doing a video tutorials. I decided to create a video tutorials about this. I’m from Bulgaria and in tutorials i speak Bulgarian too. I hope that you like it. The users from Bulgaria, likes these tutorials very much. Thanks for great tutorials again.
Here the tutorials. there are 3 parts.
http://videotutorials-bg.com/lessons.php?action=viewcat&id=45&t=587
http://videotutorials-bg.com/lessons.php?action=viewcat&id=45&t=588
http://videotutorials-bg.com/lessons.php?action=viewcat&id=45&t=589
( Reply )
1. LuvPHP August 30th
  
  you used 4 time Bulgaria word… Now we know you are from Bulgaria, may be?
  ( Reply )
chat user July 29th

any way nice article
( Reply )
Deoxys July 30th

You wrote “float: rightright;” at .logout in the CSS file.
( Reply )
Juan July 30th

Great tutorial! This could be use as simple version of the facebook/gmail chat on your site.

http://musastudios.com/chat/
( Reply )
1. Diego Anzolin August 7th
  
  [EN]
  Hey Juan, you can provide the source of the changes you made in the chat?
  It was very good, congratulations.
  
  [ES]
  Hola Juan, usted puede proporcionar la fuente de los cambios realizados en el chat?
  Es muy bueno, felicitaciones.
  ( Reply )
  1. Camilo October 8th
    
    Hi, did Juan give you the code?
    
    If he did, Can you send it to me please??
    I will really appreciate to much
    cifuentesgenoy@yahoo.com
2. Enam November 16th
  
  hey this is really cool, can you please provide me the source code please my e-mail address is ahmed.enam@yahoo.com
  ( Reply )
Sanders July 30th

Looks promissing!
( Reply )
Cristian Gorrino July 31st

thank you very much for this and all the others.
( Reply )
umar farooq July 31st

sir how i can create popup menu using jquery in php embaded php web site
( Reply )
Martin Papworth August 1st

It doesn’t work on my IMAC,
why is this?
Could it be something with XAMPP to do?

MP
( Reply )
1. Martin Papworth August 2nd
  
  It works on my pc laptop, and I use XAMPP there.
  
  Please anyone knows how to fix this?
  ( Reply )
2. cyberpr August 24th
  
  you need to clik right click get info then in sharing and permission need to put all in read and write
  
  in the folder and all files inside
  
  read and write and then it work fine
  ( Reply )
nida ali August 4th

nice work thanks
( Reply )
Brendan August 5th

A bit of Jetty java web sever and dojo would be a better solution than this. Has anyone heard of reverse ajax. It is a much cooler solution than this method as it is server driven (Comet) using a long lived http connection . This is a good tutorial for beginners in ajax but for people who want to develope a more scaleable chat system with out plugins or flash then have a look at the Bayeux protocol by Dojo and Jetty Continuations.

Here is a good tutorial on this if interested.

http://www.ibm.com/developerworks/web/library/j-jettydwr/index.html

It’s not the easiest material to get your head around though. So be warned!!! : – )
( Reply )
Joe August 10th

I wish I had chosen PHP over ASP so i could really use this.

But nice tutorial!
( Reply )
Trex2303 August 10th

Hello Gabriel, would it be possible for you to update your tutorial, or add a 2nd tutorial, for setting up a “whos here” list, and possibly a small admin area, to be able to “clear chat” and/or remove certain chat parts? Maybe add in some smilies/emoticons?
( Reply )
1. Koolvin August 29th
  
  easy to do yourself, just take the time.
  ( Reply )
2. LuvPHP August 30th
  
  Lazy boy! come on! Work it!
  ( Reply )
Stephen Coley August 11th

If you were to add a call to loadLog() in the $(”#submitmsg”).click() function, after the log write, your message will be displayed in the chat box immediately. Giving the user a better sense of ‘real time’.

Usability first and always.
( Reply )
solo para ver que pasa con el estilo con un nombre largo August 14th

Lo siento, creo que esto es no esta bien hecho per es para ver si se rompe el estilo con un nombre largo
( Reply )
Ulises Maynardo August 14th

Halo my name is Ulises, i have a project and my be you can help me i want to do an interactive site with Skype, could i do something like this? i f i can how much it this project cost me? Thanks
( Reply )
Dishanka August 18th

thank you so much Gabriel Nava.
( Reply )
Cookie Creative August 18th

Great tut, thanks very much.
( Reply )
Damián Ramirez August 19th

Good work
( Reply )
HalleyR August 20th

para los que no les funcione cambien los <? por <?php y listo todo ok sin problemas XD!!
( Reply )
kodegeek August 21st

cool, this should has part 2 which includes chat to specific user that is private chat!
( Reply )
Koolvin August 29th

Pretty great tutorial, i had a fun time adding lots and lots to this chatbox, such as nicklist, smileys, url linking, images, new message sounds, and even /commands =D

ty for posting this, it helped a great deal..
( Reply )
Eli August 31st

Hey Gabriel,
Thanks for the excellent tut! I also would like to request a part two for this tutorial that fills in some of the gaps for us script newbies.
( Reply )
sandeesh September 4th

good work
( Reply )
Ashok Kumar J September 16th

very good work. really i thank u for giving this basic things to us.
( Reply )
Maskur Ali September 21st

Very Simple and smart
( Reply )
Nkonye September 27th

It’s a great script, but I’m not sure how you connect to other users in the chat though.
( Reply )
ed September 29th

cool tut, but why not use database?
( Reply )
Stefan September 30th

Great tutorial. I’m new to web design all together and just trying stuff out. Just installed this and the chat seem to be exactly what I want for my site – clean and simple.

But.. It doesn’t seem to work in IE? The login has a second box below the actual login box. And more importantly, the actual chat seems completetly broken in IE – the update/refresh doesn’t work properly. And I can’t submit by pressing enter. Maybe I did something wrong, but I just edited a couple of things in the CSS and changed some text (title, login and menu wording).

Scott mentioned a comma on line 95, I can’t find a comma there?

Anyway, thanks for the tutorial. I suspect anywone with a little knowledge probably could make this work just fine in IE with some tweaking.

And /agree on part 2.
( Reply )
1. anfild November 7th
  
  i checked the code and it is using jquery from google …. this does not support the internet explorer parameters of coding keywords …
  
  please modify the ajax code at the bottom of the index.php and it will be fine ..
  
  in case you want any further assistance, do let me know.
  ( Reply )
joseph October 1st

I have really enjoyed this.
( Reply )
ed October 1st

very nice!
but, saving to a flat file? what is this? 1996?
( Reply )
Johnson October 5th

I’ve just skimmed through. Is great to follow. I am now going to test how it works.

The application fits my requirement, however, I wonder how to use it on a tuition site. Say, student wants tuition from registered teachers. How does the teachers indicate their availability for a specific subject area, once a student signs in for a chat?

Thanks for responding, in anticipation!
( Reply )
welseng October 9th

# $.ajax({
# url: “log.html”,
# cache: false,
# success: function(html){
# $(”#chatbox”).html(html); //Insert chat log into the #chatbox div
# },
# });

what should i do if i want to modified the chat log before inserting into the chatbox div?
( Reply )
CJ October 11th

hi, it didnt work for me can some one help me out on how I could make it work interms of the changes needed
( Reply )
balkiss October 19th

where i can place the script in xamp?
( Reply )
SEO karachi October 23rd

it’s indeed a good online chatting script thanks for sharing it
( Reply )
jr icotp October 26th

great work. Keep it up.
( Reply )
Hello October 28th

Anyone know how code it so it shows when a user comes in to chat as well? The part I tried to edit keeps showing it over and over again.
( Reply )
1. anfild November 7th
  
  hi , i am a php expert, and i am prepare this feature for you.
  if interested please contact me at anfildbc@gmail.com
  ( Reply )
anfild November 7th

i tried running the code is it works fantastic …

i am fascinated with this tutorial ..

very good work ….
( Reply )
santosh November 8th

really nice one, thanks a lot
( Reply )

Add Your Comment

( GET A GRAVATAR )

Your Name
November 8th

Cancel

Tuts+	Tutorials & Resources
Psdtuts+	Photoshop & Graphics
Nettuts+	Web Design & Development
Vectortuts+	Vectors & Illustration
Audiotuts+	Music & Sound
Aetuts+	AfterEffects & Motion
Activetuts+	Flash Tutorials
Cgtuts+	Computer Graphics
Phototuts+	Photography

ActiveDen	Flash Marketplace
ThemeForest	Web & CMS Themes
GraphicRiver	Graphics, Vectors & Icons
VideoHive	Motion Graphics & Projects
AudioJungle	Loops & Effects

FreelanceSw	Freelance Jobs & Community
Rockable	Books & How-To
Creattica	Design Community
Mac.AppStorm	Mac Apps
Web.AppStorm	Web Apps
WorkAwesome	Be Awesome At Work
Envato	About Us