AJAX Chat Implementation: Part 2

element and its inner layers do the trick. The scroll element is the outermost layer; it has a fixed width and height; and its most useful property, overflow, determines how any content that falls (or overflows) outside of its boundaries is displayed. Generally, the content of a block box is confined to the content edges of the box. In CSS, the overflow property has four possible values that specify what should happen when an element overflows its area: visible, hidden, scroll, and auto. (For more details, please see the specification of overflow, at http://www.w3.org/TR/REC-CSS2/visufx.html.)

As you can see, the HTML file is very clean. It contains only the declarations of the HTML elements that make up the user interface. There are no event handlers and there is no JavaScript code inside the HTML file—we have a clean separation between the user interface and the programming.

In our client-side JavaScript code, in the chat.js file, the action starts with the ready event, which is defined in jQuery (reference: http://docs.jQuery.com/Events/ready) as a replacement for window.onload. In other words, your ready() function, which you can see in the following code snippet, is called automatically after the HTML page has been loaded by the browser, and the page elements can be safely used and manipulated by your JavaScript code:

$(document).ready(function() {
}

Inside this function, we do several operations involving events related to the user interface. Let’s analyze each step!

We want to be sure that a username always appears, that is, it should never be left empty. To do this, we can create a function that checks for this and bind it to the blur event of the textbox.

// function that ensures that the username is never empty and //if so a random name is generated
 $('#userName').blur(

function(e) {
// ensures our user has a default random name when the form loads
if (this.value == “”)
this.value = “Guest” + Math.floor(Math.random() * 1000);
}
);

If the username is empty, we simply generate a random username suffixing Guest with a randomly generated number.

When the page first loads, no username has been set and we trigger the blur event on userName.

// populate the username field with 
 // the default value
 $('#userName').triggerHandler('blur');

The success() function starts by checking if the JSON response contains an errno field, which would mean that an error has happened on the server side. If an error occurred the displayPHPError() function is called passing in the error in JSON format.

// function that displays a PHP error message
function displayPHPError(error)
{
 displayError ("Error number :" + error.errno + "rn" +
 "Text :"+ error.text + "rn" +
 "Location :" + error.location + "rn" +
 "Line :" + error.line + + "rn");
}

The displayPHPError() will retrieve the information from the error and call in turn the displayError() function. The displayError() function shows the error message or a generic alert depending on whether the debugging flag is set or not.

// function that displays an error message
function displayError(message) {
 // display error message, with more technical details if debugMode is true
 alert("Error accessing the server! " +
 (debugMode ? message : ""));
}

Next, in our ready event, we set the default color for the sample text to black:

// set the default color to black
 $('#sampleText').css('color', 'black');

Moving on, we hook on to the click event of the Send button. The following code is very simple, as the entire logic behind sending a message is encapsulated in sendMessage():

$('#send').click(
 function(e) {
 sendMessage();
 }
 );

Moreover, here we hook on to the click event of the Delete all button in a similar way as the Send button.

$('#delete').click(
 function(e) {
 deleteMessages();
 }
 );

For the messageBox textbox, where we input messages, we disable autocomplete and we capture the Enter key and invoke the logic for sending a message:

// set autocomplete off
 $('#messageBox').attr('autocomplete', 'off');

// handle the enter key event
$(‘#messageBox’).keydown(
function(e) {
if (e.keyCode == 13) {
sendMessage();
}
}
);

Finally, when the page loads, we want to have the messages that have already been posted and we call retrieveNewMessages() function.

Now that we have seen what happens when the page loads, it’s time to analyze the logic behind sending and receiving new messages.

Because everything starts when the page loads and the existing messages are retrieved, we will start with retrieveNewMessages() function. The function simply makes an AJAX request to the server indicating the retrieval of the latest messages.

function retrieveNewMessages() {
 $.ajax({
 url: chatURL,
 type: 'POST',
 data: $.param({
 mode: 'RetrieveNew',
 id: lastMessageID
 }),
 dataType: 'json',
 error: function(xhr, textStatus, errorThrown) {
 displayError(textStatus);
 },
 success: function(data, textStatus) {
 if(data.errno != null)
 displayPHPError(data);
 else
 readMessages(data);
 // restart sequence
 setTimeout("retrieveNewMessages();", updateInterval);
 }
 });
}

The request contains as parameters the mode indicating the retrieval of new messages and the ID of the last retrieved message:

data: $.param({
 mode: 'RetrieveNew',
 id: lastMessageID
 }),

On success, we simply read the retrieved messages and we schedule a new automatic retrieval after a specific period of time:

success: function(data, textStatus) {
 if(data.errno != null)
 displayPHPError(data);
 else
 readMessages(data);
 // restart sequence
 setTimeout("retrieveNewMessages();", updateInterval);
 }

Reading messages is the most complicated function as it involves several steps. It starts by checking whether the database has been cleared of messages and, if so, it empties the list of messages and resets the ID of the last retrieved message.

function readMessages(data, textStatus) {
 // retrieve the flag that says if the chat window has been cleared or not 
 clearChat = data.clear;
 // if the flag is set to true, we need to clear the chat window 
 if (clearChat == 'true') {
 // clear chat window and reset the id
 $('#scroll')[0].innerHTML = "";
 lastMessageID = -1;
 }

Before retrieving the new messages, we need to check and see if the received messages have not been already processed. If not, we simply store the ID of the last received message in order to know what messages to ask for during the next requests:

if (data.messages.length > 0)
 {
 // check to see if the first message 
 // has been already received and if so
 // ignore the rest of the messages
 if(lastMessageID > data.messages[0].id)
 return;
 // the ID of the last received message is stored locally
 lastMessageID = data.messages[data.messages.length - 1].id;
 }