Thursday, December 6th, 2007

Ajaxian Featured Tutorial: Ajax for Chat

Category: Ajax, Prototype, Tutorial

Ever wanted to build a chat module for your application? Jack Herrington shows you how in this tutorial on the IBM Developerworks site.

Learn to build a chat system into your Web application with Asynchronous JavaScriptâ„¢ + XML (Ajax) and PHP. Your customers can talk to you and to each other about the content of the site without having to download or install any special instant-messaging software.

While not exactly Meebo, the tutorial does provide the foundation for building your own little chat app and uses the powerful Prototype library for it’s client-side code.

Here is some of the code that Jack listed in the tutorial. The full code for the tutorial can be found here.

< ?php if ( array_key_exists( 'username', $_POST ) ) { $_SESSION['user'] = $_POST['username']; } $user = $_SESSION['user']; ?>

< ?php echo( $user ) ?> – Chatting


Posted by Rey Bango at 8:40 am

3.4 rating from 31 votes


Comments feed TrackBack URI

I did a similiar project, although with Jabber/XMPP (“Google Talk”), so it does work for corporate environments, when jabber is the inner IM-system (openfire is so easy to setup! takes only minutes)

It uses the Prototype Window Class.

I wanted to integrate it into horde webmail as a demo, but I didn’t have time yet – I just need to write an authentication module for the server (if I’d use ejabberd, it could be even in php, but I stick with openfire), and it’s done.

BTW, there’s long-living connections as an alternative to polling. Better for the server, not the human.

Comment by Adam Nemeth — December 6, 2007

@Adam: When you finalize it, ping me and it may show up on here. reybango (a) gmail

Comment by Rey Bango — December 6, 2007

If you want to implement your own Jabber/XMPP based web application there’s also JSJaC which can be found at

Comment by zeank — December 6, 2007

Take advantage of Ajax server push. You can make a chat room in 21-line codes. More, it’s open source :)

Comment by Aburo — December 6, 2007

I’ve done this, too. The biggest thing I have to add is if you’re working on something like this, make sure you don’t return the entire chat’s contents every time you return from the server. Instead, only show lines that the specific visitor hasn’t seen (use auto-incrementing ids or timestamps to figure this out). That way your transfer time remains roughly constant and you don’t have to worry about the chat getting laggy as the length of the chat increases.

Comment by Dashifen — December 6, 2007

You may want to have a look at our new website, which offers live advice via an AJAX chat. The site uses .NET 2.0 and the .NET AJAX extensions. The AJAX chat module is a custom module we implemented in-house.
We also implemented Dashifen’s idea in order to decrease lag and bandwidth requirements especially for lengthy chat sessions.
If you don’t want to register, there’s a video on the home page, which briefly shows a live chat session.
@Rey: do you think our site is worth showing up on here as well? ;-)

Comment by bonsai — December 8, 2007

I don’t get it. It doesn’t work. But what is DB.php? There’s no such file.

Comment by Ciuma — July 20, 2008

Well, nevermind about that bit. It just doesn’t work. When I click to add a message, nothing happens.

Comment by Ciuma — July 20, 2008

Leave a comment

You must be logged in to post a comment.