WebSocket Example With Keyword Highlighting

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.

public boolean function onApplicationStart() {
var docsfolder = expandPath("./cfdocs");
var htmlfiles = directoryList(docsfolder,"false","name","*.html");
application.keywords = {};
for(var i=1; i<=arrayLen(htmlfiles); i++) {
application.keywords[rereplace(htmlfiles[i], ".html$", "")] = htmlfiles[i];
}
return true;
}

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:

//look for keywords
var words = listToArray(message.chat, " ");
var newchat = "";
for(var i=1; i<=arrayLen(words); i++) {
var word = words[i];
if(structKeyExists(application.keywords, word)) {
newchat &= " <a href="##" class='keyword' data-url='#application.keywords[word]#'>" & word & "</a>";
} else {
newchat &= " " & word;
}
}

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:

$(document).on("click", ".keyword", function(e) {
  e.preventDefault();
  var url = $(this).data("url");
  $("#displayHelp").load("cfdocs/"+url+" #header, #docs");
});

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