This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

AJAX IM Client
In this chapter, we'll step through the creation of an Instant Messaging (IM) client application built with AJAX, JavaScript, and dynamic HTML/CSS. While most of this chapter will be detailing the specifics of this code, we wanted to start off with a brief overview of the process of designing this application. We found this process to be about as necessary as writing the code itself.

Design Process
When we sat down to write this chapter, we had a preliminary strategy and scope. The strategy was to demonstrate how AJAX makes it possible to implement asynchronous instant messaging in a Web browser. And, the scope was to make this demonstration fit within the length of this chapter, e.g., you, the reader, should be able to go through the whole application in one working/study session, and we, the authors, needed to go from concept to completion of the application within a few days.

As we started working, we realized that we needed to refine the strategy and scope, because IM clients can have many, many features, and there are also many competing IM services with different protocols (none of which can be accessed directly via HTTP).

Although we did this very rapidly by talking things through with each other, we ended up doing a pretty full design before writing a line of code. Our design process progressed through these four steps:

1. Strategy: What are our goals and why they are our goals
   1a. Analysis and research - what are the features of existing IM clients / IM services, what other AJAX IM clients are out there, and what kind of information would be essential to include in this chapter

2. Scope: What resources do we have to reach our goals
   2a. Our time
   2b. Free software code we can build on
   2c. Other open source software code we can learn from

3. Information Architecture / Interaction Design: The user interface
   3a. What are the main concepts of the user interface, and how do they relate to each other
   3b. Are there existing user interface libraries that affect how/where information and interactions might live in the interface (yes!)
   3c. What information and what interactions go where in the user interface

4. Data/Service Architecture: The service interface
   4a. What are the main concepts of the server-side service interface, and how do they relate to each other
   4b. Are there existing services we can use in a way that fits within our strategy and scope (no!)
   4c. What information and what interactions go where in the service interface

Since many of the details of our design process are out of the scope of this book, we'll just highlight our decisions and how we moved from design into development:

Strategy

• Demonstrate how to do asynchronous messaging without full-page refreshes in the browser. (Prior to AJAX, Web chat applications often required full-page refreshes, which, with AJAX, we can now totally eliminate).
• Demonstrate how to use AJAX for the most essential IM features: sending/receiving instant messages and keeping status (presence) up-to-date on a buddy list.
• Minimize or eliminate authentication and user management (e.g., adding new buddies), which require additional features.
• For the first "release," support only minimal user interface niceties beyond a buddy list and chat windows. If there is time for additional "releases," add more niceties later

Scope

• Build on the Prototype JavaScript library and its features.
• Review other open source AJAX IM clients' code to use as models for our own application.
• Build the simplest possible, self-contained IM server application in PHP that can support multiple instances of our AJAX IM client running on the same computer (i.e., so the reader has an easy way to run and test both the client and server).
• Build the AJAX IM client to work with the current version of Firefox (version 1.5.0.2 at the time of this writing), and, if there is time, test and revise to work on additional browsers (in this order of priority: Internet Explorer, Safari, Opera).

Information Architecture/Interaction Design

• Build a static prototype in HTML and CSS that blocks out a basic grouping of interface concepts (the Buddy List, chat windows, and a debugging console).
• Use CSS to control the positioning and styling of everything, so that it can later be modified (either statically in the CSS, or dynamically by JavaScript).

Data / Service Architecture

• List out the distinct elements/attributes in each type of data (user, Buddy, Message).
• Prototype a simple, file-based storage mechanism for persisting data on the server.
• Prototype a REST (Representational State Transfer) style interface that encodes some of the data in the request URLs, while this may be unusual for a chat application, it makes it easier for us to test the IM server just by feeding it different URLs.

At this point in our process, we felt like we had a good idea of what we were doing and how we were going to do it. (yay!)

A Note About IM Services
Before we get into the code for our AJAX IM client and the simple IM server we created to go with it, we wanted to explain a little more about why we created our own IM server.

Popular IM services like AIM, MSN, Yahoo!, ICQ, and Jabber each use communication protocols other than HTTP. This means that, in order for a client to communicate with these servers, it must also be able to "speak" these protocols.

Since AJAX uses HTTP and can not speak directly to any of these services, an AJAX IM client needs to speak to a Web application over HTTP.

Because the protocols for each IM service are somewhat different and also include many different features beyond what we wanted to cover in this chapter, we felt it would be easier to create our own standalone IM server in PHP. This server application's only focus is serving-up and responding to our AJAX IM client, and so it's not packed with a bulk of code for acting as a proxy or gateway to one or more of the popular IM service networks.

While our IM application will help you better understand AJAX in general, we also hope it will help you understand IM services and other AJAX IM clients.

In the future, the W3C's Web APIs Working Group (www.w3.org/2006/webapi/) may define (and browser makers may implement) a standard way for Web browsers to use network protocols other than HTTP.

Also, the Internet standard IM protocol, which is called the Extensible Messaging and Presence Protocol (XMPP) and that is used by Jabber, is in the process of being extended to include a standard HTTP binding standard is called: JEP-0124: HTTP Binding (www.jabber.org/jeps/jep-0124.html). This means that Jabber servers will become accessible directly via HTTP.

It is also worth noting that XMPP uses XML to format all of its data. In the future, it will be possible with Internet standard methods to use AJAX to communicate XML messages directly over XMPP.

After you complete this chapter, you may want to download and explore the code for JWChat (http://jwchat.sourceforge.net/), which is a full-featured AJAX Jabber client application available under the GPL free software license.

IM Client User Interface Design
As described earlier before we really got into coding, we started with some design work. The point where our design turned into code was when we built a basic user interface for the IM Client in HTML and CSS. We'll walk through this first.

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.