DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Tools
  4. WebSocket Example With Keyword Highlighting

WebSocket Example With Keyword Highlighting

Raymond Camden user avatar by
Raymond Camden
·
Aug. 08, 12 · Interview
Like (0)
Save
Tweet
Share
8.92K Views

Join the DZone community and get the full member experience.

Join For Free

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

WebSocket

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How to Use MQTT in Java
  • Memory Debugging: A Deep Level of Insight
  • Integration: Data, Security, Challenges, and Best Solutions
  • Handling Automatic ID Generation in PostgreSQL With Node.js and Sequelize

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: