Building an AJAX-Based Chat: The Barebones Structure - Updating the display of messages: coding the “displayChatData()” function
(Page 5 of 5 )
As I mentioned before, the list of the messages being displayed on the chat page needs to be refreshed each time a new message is added to the database table. Keeping this condition in mind, the chat application uses the “displayChatData()” function, in order to perform the message updating process. Here is the definition for the pertinent function:
function displayChatData(reqObj){
// remove previous messages
var mdiv=document.getElementById('messages');
if(!mdiv){return};
mdiv.innerHTML='';
var messages=reqObj.responseText.split('|');
// display messages
for(var i=0;i<messages.length;i++){
var p=document.createElement('p');
p.appendChild(document.createTextNode(messages
[(messages.length-1)-i]));
mdiv.appendChild(p);
}
}
By analyzing the source code for the function above, it’s pretty easy to understand its operation. First, it removes all the messages previously displayed and then obtains a new list. The following fragment of code illustrates these processes:
// remove previous messages
var mdiv=document.getElementById('messages');
if(!mdiv){return};
mdiv.innerHTML='';
var messages=reqObj.responseText.split('|');
As you can see, the function cleans up a “messages” <div> containing element by resetting its “innerHTML” property. After all the messages have been removed from the container, the new list of messages is obtained by reading the value for the “responseText” property, belonging to the requester object passed in as a parameter.
Since all the messages will be fetched from the database first, and then delimited by a pipe (“|”) character, for transmitting back to the client, the below expression:
var messages=reqObj.responseText.split('|');
stores the messages in the “messages” array. This is handy for processing and displaying with a simple loop, like this:
for(var i=0;i<messages.length;i++){
var p=document.createElement('p');
p.appendChild(document.createTextNode(messages
[(messages.length-1)-i]));
mdiv.appendChild(p);
}
As you may have guessed, each message will be placed within the container <div> as a paragraph element, and displayed in descending order, assuming that the last inserted message will be shown at the bottom of the containing <div>.
By this point, I’ve provided you with all the JavaScript functions that compose the “sender” module for the chat application. Of course, the functions that you just saw seem rather like isolated pieces, unconnected to the whole application due to the fact that the remaining “receiver” module hasn’t been coded yet. Moreover, there is much of the server-side processing left to be developed, including insertion and retrieval of messages. So, bear with me and wait for the next part of this series, where I’ll be writing the rest of the AJAX-based chat.
Wrapping up
Over the first part of this series, I’ve demonstrated how to build the barebones of a web-based chat system, by utilizing AJAX as the trusty workhorse for sending, retrieving and updating user messages, without the need to appeal to “refresh” meta tags, and certainly keeping all the programming requirements under the scope of JavaScript and PHP.
However, exciting things are just around the corner. As I said before, in the next tutorial, I’ll write the “receiver” JavaScript module, useful for fetching messages from the database table, together with some additional functions for building the layout of the chat page. Is this too much for you? I don’t think so. See you in the next part!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
