Last Updated: 12/03/2012 09:30:00 AM

Wrapping my head around CF 10 Web Sockets

Wrapping my head around CF 10 Web Sockets

When ColdFusion 10 was in early beta, I was really interested in playing with web sockets. Unfortunately I was only *playing* with them, I didn't have a real world need. So when Ray Camden wrote several demos that showed how web sockets would work, I ran the code, saw that it worked and then moved on to test something else. Long story short, I understood the principles of web sockets, without really know how to write one: till now.

At work we have two server rooms, they are on full UPS battery backup and natural gas generator. The generators each have a 70 amp breaker, so if the amperage load is around 70 amps and we lose power, the generator is going to trip and our server room will lose power. Do not ask me how I know this. I don't want to talk about it.

Anyway we purchased a neat little device called The Energy Detective (TED) which measures the power flow being pulled from each server room. TED has a a really nice dash board that tells me many interesting stats, everything but, (you guessed it) amperage. True, I could do a simple division on the kVA, but math is hard. So web sockets to the rescue! First I re-read Evelin Varghese from Adobe's blog article about ColdFusion WebSocket Part1:Getting Started

For this implementation of web sockets we will need the following:

1. Set up a web socket channel name in application.cfc

2. Push information to the channel

3. Set up a page that listens to the channel

4. Write javascript that displays the information that comes from the channel.

The code below in application.cfc sets up a web socket named meter1

PublishMessage.cfm pushes the current amperage to the web socket we set up in application.cfc

Subscriber.cfm listens to the channel meter1 and puts it into javascript object we named messageHandler. Anything pushed down the tube in publishmessage.cfm is going to show up on subscriber.cfm (without any page refreshing mumbo jumbo)

Once I saw the data update all by itself, the web sockets made perfect sense. It is really one of those things you have to watch in action to "get" You can see it here: http://services.cfmumbojumbo.com/ampmeter/subscriber.cfm

Finally, I wanted to make the data pretty, so I found RGraph which has a thermometer chart that uses HTML5 Canvas:

Mocked up demo: http://services.cfmumbojumbo.com/ampmeter/

This is a very basic implementation of web sockets, it can (and does) get much more involved, but this is a good place to start.

 

Code for my "mock-up" of the TED API: 

 

A few notes:

1. You must turn on websockets in the ColdFusion Administrator

2. Websockets communicate on port 8575, if you don't see anything update when you look at this page: http://services.cfmumbojumbo.com/ampmeter/subscriber.cfm your network firewall (or windows firewall) may be blocking port 8575

3. Your browser needs to support Canvas to show the thermometer, I have tested it on chrome & firefox.