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.
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”>
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();
while we click the Send button the message is send to the server by the following JS code:-
The sendMessage function is the function name that we use in our CFC to save our chat comments in the database.
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.
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.