Simple chat app using jQuery and ColdFusion
Way back in the day I was working on a jQuery game I called CFMud. As the name alludes to, it was to be a multi-user dungeon that would allow you to roam around “the world” and gain experience. One of the key components of the UI was the chat interface. I was just getting in to jQuery and ajax at the time so I never really worked all the kinks out of the system then life intervened and I have never picked the project back up (sorry Josh 
).
Yesterday a co-worker mentioned that she was looking for a simple little chat application so I figured I would give it a shot. I threw together an extremely quick, extremely basic little demo. The application itself is comprised primarily of three pieces: the index.cfm file for the user interface, an application-scoped CFC that acts as the “chat server”. and finally an ajaxProxy.cfc that acts as a facade for remote calls.
To start, just call up the index.cfm you will need to enter a user name to use in the chat window. Enter a name and click on the “Set Name” button. This will then bring up the main chat window and currently updates every five seconds. I have tested it in the main browsers; FireFox, Chrome, and with much swearing, Internet Explorer. For some reason, IE likes to cache remote calls to CFC’s as well. Go figure.
The “chat server” is actually just an array stored in server memory. Currently it is configured to store 100 messages, it will purge out the oldest message if the current chat log goes above this. Also, to keep down the amount of data being transferred from the server, each client remembers the message id it received. When the next call to get messages occurs, it only gets new messages.
If you would like to check it out, I have it available for download here: http://dl.dropbox.com/u/868773/chat.zip. It is hardly worthy of an RIAForge project, but maybe I will play around with it some more later on.
To see it in action: http://demos.kisdigital.com
didn’t work
Error:
The local variable variables cannot be declared outside of a function.
I have tried with CF8 and CF9 with updater 1
I haven’t really haven’t updated this code since I uploaded it in March or so. I will take a look at it and get it back in running condition when I have a few minutes. Thanks for the heads up.
Just remove the ‘var’ from the definitions in chat.cfc and it will work fine.
Thanks for taking a look at that George. I have been so busy I haven’t even had time to take a breath, let alone work on side things.
I appreciate it.
Doesn’t work for me either, i removed the ‘var’ from the definitions in chat.cfc, but now when i set a name, i get a console error which says “uncaught invalid JSON” in jquery-1.4.1.min.
Are you running this on Railo or ColdFusion?
I have a question on this chat app. When I send a message of ‘test’ it updates the chat box the first time. The second time you send ‘test’ nothing displays. It seems like you are doing some kind of check to see if the message sent is already there but I don’t see where you do that. I want to send the message to the chat area everytime regardless if it has been sent already. Where do I need to change that in the code?
I haven’t had much time to update or play with this code in a long time. If you are playing around with this on Railo 3.2+ or on a CF box you may want to make an adjustment to getMessages() javascript function in index.cfm
function getMessages(){
$.ajax({
url : ‘ajaxProxy.cfc’,
data : {
method : ‘getMessages’,
startID : currID,
ieFix : Math.random()*999999
},
success : function(incoming){
var out = ”;
if(incoming.svrStatus == ’0′ && incoming.messages.length){
for(i=0; i currID){
out = ‘‘ + incoming.messages[i].userid + ‘ : ‘;
out += incoming.messages[i].message + nl;
$win.append(out);
}
}
currID = incoming.lastid;
setScroll();
}
},
error : function(){
$win.append(‘Error connecting to remote CFC’);
setScroll();
}
});
clearTimeout(refreshTimer);
refreshTimer = window.setTimeout(“getMessages()”, 5000);
}
Newer versions of Railo return the json response as mime-type “application/json” where it was being returned as “text/html” when I originally wrote this code. The json.parse() code might have been throwing you off. HTH
Also, this has not been tested with jQuery 1.5 either. I know there have been some changes around $.ajax() but I have not looked into it.
I’m using Coldfusion 9 and I’m using the same version of jQuery as in your example. How can I debug the chat.cfc? I’m newer to coldfusion and have only really used the cftags and not cfscript. I believe the postMessage function is passing the values correctly but the value is not being added to the array? Any additional help would be greatly appreciated!
I found that it works fine in Firefox … the problem shows up in IE…
Hmmm.. Is IE showing any javascript errors? I know in some versions JSON.parse() didn’t work correctly which is why I switched up to jQuery 1.4 as soon as I could. They introduced $.parseJSON() in that version which made JSON parsing browser agnostic.
If you did want to do some diagnostics on the chat component, it is a fairly straight forward process. First just create a blank .cfm page (test.cfm) in the same web root so it will have access to the application variables. The chat component is loaded as application.chat so you just need to reference the postMessage() and getMessages() methods. The postMessage() function requires two parameters; the message to send and the user sending it. You can see the results being returned by dumping the return result:
<cfdump var=”#application.chat.postMessage(“a message”, “Some Guy”)#”>
Likewise, you can get the currently queued messages by:
<cfdump var=”#application.chat.getMessages()#”>
It does not require any params and it will just dump out the message queue.
The next step would be to go through Application.cfc and make sure nothing there is mucking things up. I will be glad to help in any way I can.
The chat demo is back up on http://demos.kisdigital.com
Really nice……..
Thank you so much……….
Hi, can you post me code of comments i.e.,
i need structure of image then message in highlighted form of comments,,,
plz help me
http://www.google.com
Really nice……..