AJAX Chat Implementation: Part 1

Lets get started. We’ll keep the application simple, modular, and extensible. We won’t implement a login module, support for chat rooms, the online users list, and so on. By keeping it simple we’ll focus on what the goal of this article is: posting and retrieving messages without causing any page reloads. We’ll also let the user pick a color for her or his messages, because this involves an AJAX mechanism that is another good exercise.

The chat application can be tested online at http://ajaxphp.packtpub.com, and should look like Figure 8-1:

Using jQuery as a framework will simplify things: we won’t need to worry about constructing XmlHttpRequest by ourselves and implementing design patterns and best practices.

Technically, the application is split into two smaller applications that build the final solution:

• The chat application: Here we use a MySql database and AJAX to store and retrieve the users’ messages and pass them between the client and the server.
• The code for choosing a text color: Here we use AJAX to call the PHP script that can tell us which text color was chosen by the user from the color palette. We use an image containing the entire spectrum of colors and allow the user choose any color for the text he or she writes. When the user clicks on the palette, the mouse coordinates are sent to the server, which obtain the color code, store it in the user’s DB entry, and set the user’s test to that color.

The chat application

Here we use a MySql database and AJAX to store and retrieve the users’ messages and pass them between the client and the server. The chat window contacts the server periodically to send and retrieve the newest posted messages from the server to each user. Our DB will also hold username and text color information used in the application.

Implementing this functionality involves creating the files and structures shown in the following figure:

The application functions following our usual coding pattern as follows:

• The user interface is generated by index.html, which displays the chat box and the color picker. This file loads the other client-side files, which in our case are chat.js (our JavaScript chat class), jQuery-1.3.2.js (the jQuery framework), chat.css, and palette.png (the color picker image).
• On the server side, the main player is chat.php, which is designed to take requests from the client. In our case, client-server communication will happen between chat.js (on the client) and chat.php (on the server). The chat.php script uses three other files—config.php, error_handler.php and chat.class.php; we’ll pay special attention to the latter, which is more complex and more interesting than the others.
• The other server-side file that listens to client requests is color.php, which is called whenever the user clicks the color palette image. When that happens, the client script calls color.php, tells it the location the user clicked on the palette, and color.php replies by telling the color at that location.
• You’ll also need to create a new data table named chat (refer to the following figure), which holds the chat messages exchanged by the chatters.

The files to which we’re paying a little attention before starting to code are chat.js and chat.class.php. The chat.class.php file contains a server-side class named Chat which includes all the server-side functionality required to manipulate chat messages, as you can see in its diagram in Figure 8-3. This class contains methods for adding, deleting, and retrieving chat messages to and from the chat database table.

Then we have the Chat class in the chat.js file. This is a JavaScript class that contains the client-side functionality required for our chatting application, which include functions for retrieving the list of messages from the server, sending new messages, deleting messages, displaying error messages, and so on. Most of the features are backed up by the server-side components, which are called to perform the necessary work.