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

Advertisements

About Robert Zehnder

Web application developer specializing in ColdFusion/Railo and Open Source development.

Posted on March 26, 2010, in ajax, ColdFusion, Railo. Bookmark the permalink. 33 Comments.

  1. 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.

  2. Just remove the ‘var’ from the definitions in chat.cfc and it will work fine.

  3. 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.

  4. 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?

  5. 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

  6. 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.

  7. 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!

  8. 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.

  9. Really nice……..
    Thank you so much……….

  10. 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

  11. Really nice……..

  12. Hi Robert and thank you for this nice lightweight chat. Therefore the archive zip file provided is missing the getClients() remote function within the ajaxProxy.cfc.
    Could you please provide this function ?
    Thanks a lot 😉

  13. Thany you Robert, appreciated your fast reply. But I was speaking about the getClient() in the main chat.cfc component. Thanks again.

  14. Sorry for the delay Ateki, been slammed at work… Here ya go

    • No problem Robert and thanks again for your professional support. Everything is working nicely now 😉 Keep on the good work & Cheers from Belgium.

  15. Hello, great little app, works great.

    But I have an issue I want to use this for my site but my site isn’t using the application.cfc framework… yet. It just has an application.cfm.

    How do I call the chat.cfc in the ajaxProxy.cfc? I have tried several methods of setting the cfc in the application.cfm and the ajaxProxy.cfc to no avail. I think this is probably a real simple answer but It is eluding me currently.

    Any help would be great, thanks in advance.

    • The ajaxProxy should just work. All it is doing is returning an instance of the chat object that is stored in the application scope. It does not matter whether you are using application.cfm or application.cfc so long as you create an instance of the chat object in the application scope.

      • Thanks for reply.

        I put this in an application.cfm file:

        And nothing else and I get:

        Error connecting to remote CFCError connecting to remote CFC…..

        And it just repeats that.
        I know it works with the app.cfc but this won’t work.
        Any other suggestions?

      • cfset Application.chat = createObject(“component”, “chat”)

    • I think I found the cause of the issue. Can you check out this gist (https://gist.github.com/robertz/39a144fee330cd5c491f) and see if it fixes your issue?

      • Ok that didn’t work. Also I put the app.cfc back in to see if it still works with that, and it gives same error now.

        I am willing to pay to get this to work, just need it to work using a application.cfm instead of an application.cfc.

        If you can get my email from this comment thing, just email me directly please. If not let me know and I’ll get my email to you.

        Thanks

  1. Pingback: Simple chat app using jQuery and ColdFusion « KISDigital Blog | RefreshTheNet

  2. Pingback: Tweets that mention Simple chat app using jQuery and ColdFusion « KISDigital Blog -- Topsy.com

  3. Pingback: Ajax Tutorial | Technology Base | AJAX WebDev Insider

  4. Pingback: CF Free Chat » MisterSender

  5. Pingback: CF Free Chat « KISDigital Blog

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: