Wizard API updated!
Tim Boudreau has released a new version of the Swing Wizard library (version 0.997) that fixes the WizardException bug reported in JavaWorld's recent Open Source Java Project profile. The article's examples have been reworked to test out the new, improved WizardException. Thanks, Tim, for this helpful fix!
Open Source Java Projects: The Wizard API

Newsletter sign-up

Sign up for our technology specific newsletters.

Enterprise Java
View all newsletters
Email Address:
JavaWorld.com > Java Development Tools >

AjaxChat: Chatting, the AJAX Way!

Start building your own AJAX-based chat room

By Frank W. Zammetti, JavaWorld.com, 09/11/06

This article presents an AJAX (Asynchronous Java and XML) project done with straight AJAX. That means this application will not be using any library or toolkit—it will just be you and JavaScript! Here we'll build ourselves a nice little multiuser, multiroom chat application, much like the Yahoo! chat rooms. Even better, we'll build this application using Struts on the server to make it that much more interesting!

Requirements and goals

Chat rooms have been with us for a very long time now. In fact, it is chat rooms, those gathering places where you can talk in real time with your fellow computer users, that draw many people to the Internet in the first place (email tends to be the biggest draw, but chat rooms are not too far behind for many people).

If you think about what a chat room application must require, it becomes clear that we'll need a server component. There has to be some broker in between all the chatter that deals with keeping track of the various chat rooms available, who is logged in and chatting in what room, and those types of system-level considerations. More important, though, is some arbiter of messages—a way for all the people currently chatting in a given room to see the various messages.

In a "real" chat application, such as those you might find on AOL, for instance, it is likely that the server actually pushes new messages out to the users in the room. That way, there is no delay between when someone says something and when everyone else in the room sees it.

If you were going to build a purely HTML-based chat application, as we are about to do, you'd have to consider all of these points. However, because the Web is based on a pull model of client-server interaction, ignoring things like applets and such, you clearly need to go about things a little differently. Could you have a meta refresh tag on a page that periodically asked the server for any new messages? Yes, but then you would be redrawing the entire screen each time, which would be rather inefficient, especially if you built it with something like JSP (JavaServer Pages) or another dynamic rendering technology where the server would be responsible for that redrawing.

There must be a better way, and of course there is: AJAX!

The AjaxChat application will have a number of requirements based on these, and a few others, as follows:

  • The application must support multiple users and multiple rooms. We won't enumerate any specific scalability requirement except to say that a reasonably sized group of friends should be able to chat simultaneously, so something in the 10-user range should do fine.
  • We have seen a number of solutions that use servlets on the back end, so this time, we'll do something a little more interesting and robust and build AjaxChat using Struts.
  • We want to be able to adjust the font size of messages displayed in the room we are chatting in, to allow for people (like me!) with bad eyesight to have an easier time of it.
  • Just for fun, we want the ability to show our messages in one color and other people's messages in another.
  • The server will need to properly deal with things like duplicate users and users who do not properly log off. We won't, however, require a login per se—that is, user accounts will not be created and persisted.
  • There should be an option to clear the "history" in a room so that a user can have a clean display at any time.


This should be a fun project! Let's now figure out how we are going to accomplish all that we have set out for ourselves.

Visualizing the finish line

Creating AjaxChat, we first should know what we're building, so what follows is some screenshots and description of AjaxChat. The application essentially consists of three distinct screens: the "login" screen, the list of rooms (called the lobby), and the chat room itself.

Figure 1 shows the login screen. This screen is pretty simple, although we do have some eye candy in the form of a shadowed inset text box and a metallic-looking button. This screen is just a greeting and a place to enter a username. It is not a security login, mind you; it is simply a way for users to give themselves a name to chat under.

Figure 1. The AjaxChat login page. Click on thumbnail to view full-sized image.

The next screen, the room list screen, is shown in Figure 2. This screen shows all the available chat rooms and how many users are chatting in each. It also provides a logout button. This serves to clear out the user's session and ensures that they do not appear to still be chatting in any rooms.

Figure 2. The rooms list page. Click on thumbnail to view full-sized image.

Lastly, we come to the meat and potatoes of AjaxChat: the screen representing a chat room (Figure 3).

Figure 3. Where it all happens: the chat room screen. Click on thumbnail to view full-sized image.

The chat room screen tells us what room we are chatting in and shows a list of the users in the room with it. It provides a place to enter our messages, and a place to see all the messages posted to the room since we entered it. We also have some bells and whistles in the form of two icons for increasing or decreasing the size of the font the message scroll is seen in, as well as select boxes to change our own message's color and the color of all the messages of all the other chatters in the room. Naturally, we have a way to exit the room, and we also have a button that clears the chat history so we can have a nice, clean message display.

This screen is laid out using tables. You may wonder why I did not do this by using CSS (Cascading Style Sheets) layout techniques. The simple answer is that those techniques are still in their infancy, and cross-browser issues remain to be worked out. Tables are still my layout option of choice and will be until those issues are worked out. It is possible to do this screen with CSS and no tables, but it would have been fragile depending on which browser you viewed it in. Better to use the technology that is more ubiquitous and well-behaved at this point in time. Besides, for Web applications, CSS layout is somewhat less interesting simply because the layout tends to not change as much. For Websites, where content delivery is the primary concern, CSS layout has much more to offer.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |  Next >

Discuss

Start a new discussion or jump into one of the threads below:

Subject Replies Last post
. It works fine but ...
By 		0 07/23/07 06:07 AM
by Anonymous
. AjaxChat: Chatting, the AJAX Way!
By JavaWorldAdministrator 		0 06/25/07 09:10 PM
by Anonymous
. How asynchronous is AJAX ? Not much Java, btw.
By Anonymous 		0 05/24/07 02:44 PM
by Anonymous
. java for vista
By nana 		0 04/26/07 08:20 PM
by Anonymous
. Has anyone been able to get this working?
By Gidjet 		0 11/11/06 09:46 AM
by Anonymous


Resources