Building an AJAX-Based Chat: Coding the Receiver Module

Since I want the chat to be developed entirely with JavaScript (in conjunction with the proper PHP files), I’ll define a couple of additional functions, which will create a basic page layout. As you’ll see, the chat page will comprise two sections: a top section, useful for displaying the whole list of messages, and a bottom section, where the user can submit new comments by using a typical web form.

Having explained how the chat page will be laid out, here is the source code for the first function, “createMessageBoard()”, which creates the containing <div> element, handy for displaying the list of messages:

function createMessageBoard(){
    var mdiv=document.createElement('div');
    mdiv.setAttribute('id','messages');
    document.getElementsByTagName('body')
[0].appendChild(mdiv);
}

Definitely, the above function isn’t rocket science. It simply creates the corresponding <div> element, then assigns to it an ID, and finally appends it to the document tree.

Now, let’s get rid of rather irrelevant code and see how the “createMessageBox()” function looks:

function createMessageBox(){
    // create message box container
    var mdiv=document.createElement('div');
    mdiv.setAttribute('id','messagebox');
    // create message form
    var mform=document.createElement('form');
    // create message box
    var mbox=document.createElement('input');
    mbox.setAttribute('type','text');
    mbox.setAttribute('name','message');
    mbox.className='msgfield';
    // create 'send' button
    var mbutton=document.createElement
('input');
    mbutton.setAttribute('type','button');
    mbutton.setAttribute('value','Send');
    mbutton.onclick=sendMessage;
    // create login text
    var sp=document.createElement('span');
    sp.appendChild(document.createTextNode
('Logged in as: <?php echo $user?>'));
    // append elements
    mform.appendChild(mbox);
    mform.appendChild(mbutton);
    mform.appendChild(sp);
    mdiv.appendChild(mform);
    document.getElementsByTagName('body')
[0].appendChild(mdiv);
    mbox.focus();
    mbox.onfocus=function(){this.value='';}
}

As shown in the above function, the bottom section of the chat page is generated by building up dynamically a few (X)HTML elements. First, the function creates a general containing <div>, which will house the appropriate web form for sending out new messages. Then, it generates the form itself, by including a single text input box and a form button, and finally inserts the whole structure into the document tree.

Additionally, there are a couple of things worth being analyzed in detail. Notice how a <span> element is created, in order to display the nickname of the current user. With reference to this, the following lines:

var sp=document.createElement('span');
sp.appendChild(document.createTextNode('Logged
in as: <?php echo $user?>'));

will display the user’s nickname, usually registered on a previous login page. However, you should not worry about this for now. In a moment,  I’ll demonstrate how the login page works. Now, by returning to the code responsible for displaying the corresponding nickname, the below embedded PHP statement:

<?php echo $user?>

will do the trick. For example, if a user has logged into the chat by using “JohnD” as the nickname, then the legend “Logged in as: JohnD” will be displayed to the right of the text input box. As you can see, the process is fairly understandable.

At this stage, I provided you with all the JavaScript functions that handle and manipulate the “receiver” request object, as well as the code responsible for building a rough layout for the chat page. Given that, the next step involved in coding the chat application will be writing a simple login page, which registers a visitor’s nickname and then redirects the user to the appropriate chat page.