Building an AJAX-Based Chat: The Barebones Structure - Sending chat messages: defining the “sendMessage()” function
(Page 3 of 5 )
As you know, a typical chat application provides users with the ability to send out messages through a simple form, and then display them on a generic containing section where all online users communicate with each other. For this reason, I’ll begin developing the “sender” module of the application, by defining the “sendMessage()” function. It uses a “sender” XMLHttpRequest object for triggering a post request to a given file, and passes into it the user’s nickname, together with the corresponding message. Here’s what it looks like:
function sendMessage(){
var user='<?php echo $user?>';
var message=document.getElementsByTagName('form')[0].elements
[0].value;
if(message.length>100){message=message.substring(0,100)};
// open socket connection
senderXMLHttpObj.open('POST','sendchatdata.php',true);
// set form http header
senderXMLHttpObj.setRequestHeader('Content-
Type','application/x-www-form-urlencoded');
senderXMLHttpObj.send('user='+user+'&message='+message);
senderXMLHttpObj.onreadystatechange=senderStatusChecker;
}
In the simplest sense, the above function makes a post request to the “sendchatdata.php” file, and sends as parameters the pair of “user&message” variables, for pushing directly into the database table. Of course, there are a few things worth noting here. As you may have guessed, the backend of the chat will sit on a simple MySQL database, which will be accessed with PHP. But fear not. Considering the ease of querying the database, you can use another RDBMS (for example MS Access) and work with ASP.
By returning to the function’s code, you can see that I use a “senderXMLHttpRequest” object for sending the request header, conjunctly with the pair of parameters mentioned above. For the moment, I’m assuming that this object has been previously instantiated by the “getXMLHttpRequestObject()” function, so this will be discussed later, when I explain the set of functions that initialize the chat.
Notice right at the very beginning of the function how the lengths of messages are checked in, by limiting the amount of characters to 100, as well as how the user’s nickname is obtained. The line listed below:
var user='<?php echo $user?>';
demonstrates how to populate the “user” JavaScript variable with the contents of the “$user” PHP variable. I’ve deliberately done this in order to use PHP sessions for registering the nickname chosen by the user and for using it during the chat session. Obviously, the entire registration process will be done through a simple login page, which will be coded at a later time. For the moment, after the message has been sent by using a text input box, the “senderStatusChecker()” function is tied up to the “onreadystatechange” handler, so it’s possible to check for the progress of the request and insert the data into the database table.
Since “senderXMLHttpRequest” objects are checked by the “senderStatusChecker()” function, the next step in developing the chat is looking at its corresponding definition.
Next: Checking for the progress of sender requests: defining the “senderStatusChecker()” function >>
More XML Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 31 
