WebSocket example with keyword highlighting

This post is more than 2 years old.

In the keynote this morning at RIACon, I talked about a few ColdFusion 10 technologies that I found especially interesting. I began with WebSockets. I've blogged about WebSockets and ColdFusion 10 many times already, but I built something interesting for the keynote that I'd like to share.

I began with a simple chat application - the one I've demoed a few times before.

You can check out my earlier entries (or download the zip) if you want to see how this is built, but for the most part, it's simply shuttling simple text messages back and forth over the channel.

One of the features of this chat room is automatic HTML replacement. If you try to send <b>Foo</b>, server-side code removes the HTML before the message is sent out to others. This is done using the beforePublish method of the CFC handler I have associated with the WebSocket. Here is a snippet of the code.

message.chat=rereplace(message.chat, "<.*?>","","all");

I thought it would be cool if we could do something a bit more intelligent with this method. If we can remove HTML, we can also do other things with messages.

Imagine for a minute that our chat app is a help desk for ColdFusion users. What if we could automatically notice when someone asks about a ColdFusion tag or function?

I found a source of docs in HTML format (thanks Pete Freitag!) and saved a copy to my demo. In my Application startup I did a quick scan of the files and cached them in the Application scope.

The file names match the function/tag spec exactly so I can use the filename minus the extension as a simple key pointing to the actual file. (And on reflection, I really don't need to store the extension either!)

Once I have these functions and tags in memory, I can update beforePublish to check for these keywords:

Essentially - split by word, see if the word exists as a ColdFusion function or tag, and if so, wrap it with some HTML I'll notice later. I make use of a data attribute to store the URL of the documentation page.

Back in my front end then it's trivial to use a bit of JavaScript to detect clicks on those links:

To test this, head over to the demo (big button below) and try talking about cfsetting, or cfoutput, or any of the other ColdFusion tags and functions.

Download attached file.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by jeff horne posted on 4/3/2013 at 5:18 PM

Hi Ray,

I have need to create a chat app with wedsockets because my hosting company says my current is killing the shared server. I need something lightweight that does not involve a DB. I like the look of your chat app demos and wanted to use them as a starting point but have not been able to get any of them to work. Several of the demos are linking to the CF10 beta servers (http://fivetag-cf10beta.sec... and the code I downloaded to try out gets jsonParse errors. Others get config errors (http://www.raymondcamden.co.... I know these demos and blog entries are older but thought you would want to know.

Jeff

Comment 2 by jeff horne posted on 4/3/2013 at 5:19 PM

Websockets, doh!!

Comment 3 by Raymond Camden posted on 4/3/2013 at 5:55 PM

The JSON parse stuff is due to a change in the CF pre-release to the final relase. Just remove the code that does the parse.