very simple ColdFusion Javascript chat

We can build a basic chat application by making use of CF8 ajax tags and javascript.

Ok ,please see the screenshot below to understand how the UI is going to be (i am still working on it-i know i can make it better!!). For the time being let’s use this UI.

chat1

Assuming that you have understood the UI and the general outline, lets get into the functionality details.

Now to communicate with the CF server we will be using the AJAXPROXY tags. We will be storing the chat messages in our database and the latest 10 messages will be shown to all users online.

Ok, while we click the Send button the message is send to the server using our ajaxprogy tag.  To accomplish that we need the following code:-

<cfajaxproxy cfc=”chat” jsclassname=”jschat”>

The cfc tag holds the name of the file that contains our server operations. The jsclassname tag is the name of the JavaScript proxy class name.

Now, we need to initialize the functions that are required to handle the success and failure for the Ajax operation. That can be done by this:-

var jschatobj = new jschat();

jschatobj.setCallbackHandler(showMessages);

jschatobj.setErrorHandler(errorHandler); 

Here we are creating a new object for the JavaScript proxy class. The setCallbackHandler function is for handling the result after succesfull ajax operation(here showMessages) and the  setErrorHandler is for handling the failure(here errorHandler).

while we click the Send button the message is send to the server by the following JS code:-  

jschatobj.sendMessage(message);

The sendMessage function is the function name  that we use in our CFC to save our chat comments in the database. 

Regarding showing the latest messages from the database, we need a javascript timer. The timer checks for new messages every second and brings in the latest 10 messages  and fills in a html list.

setInterval(“getMessage()”,1000);

 This JS code can be called from the body onload event. It will call the  getMessage() function every second. getMessage function brings the latest 10 records  from DB like this.

jschatobj.getChatComments();

getChatComments is the CFC function for getting the DB records and sending back to the Javascript (see my other post that explains how we can pass a structure from CF and use it in javascript).

One important thing to note that we should return the result from the database in  string format(HTML) and assign it to the innerHTML of our container.  

That’s it. 

Click here to see this example…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: