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'];
?>
<html>
<head><title><?php echo( $user ) ?> - Chatting</title>
<script src="prototype.js"></script>
</head>
<body>
<div id="chat" style="height:400px;overflow:auto;">
</div>
<script>
function addmessage()
{
new Ajax.Updater( 'chat', 'add.php',
{
method: 'post',
parameters: $('chatmessage').serialize(),
onSuccess: function() {
$('messagetext').value = '';
}
} );
}
</script>
<form id="chatmessage">
<textarea name="message" id="messagetext">
</textarea>
</form>
<button onclick="addmessage()">Add</button>
<script>
function getMessages()
{
new Ajax.Updater( 'chat', 'messages.php', {
onSuccess: function() { window.setTimeout( getMessages, 1000 ); }
} );
}
getMessages();
</script>
</body>
</html>
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)
http://jabbermania.blogspot.com/2007/06/jsjabber-educational-client-in.html
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.
@Adam: When you finalize it, ping me and it may show up on here. reybango (a) gmail
If you want to implement your own Jabber/XMPP based web application there’s also JSJaC which can be found at http://zeank.in-berlin.de/jsjac/
Take advantage of Ajax server push. You can make a chat room in 21-line codes. More, it’s open source :)
http://www.zkoss.org/smalltalks/serverpush/
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.
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.
http://www.youwereme.com
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? ;-)
Great Posting
thanks
http://designs.posintechnologies.com/
Great Posting regarging to this feature.
thanks
http://www.olympicgamesrecords.com/
I don’t get it. It doesn’t work. But what is DB.php? There’s no such file.
Well, nevermind about that bit. It just doesn’t work. When I click to add a message, nothing happens.