Building an AJAX-Based Chat: Coding the Receiver Module - Building the chat layout: writing the “createMessageBoard()” and “createMessageBox()” functions
(Page 3 of 5 )
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.
Next: Registering chat users: defining a simple login page >>
More XML Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
