In my last post, I demonstrated three examples of websockets under ColdFusion 10. One thing I didn't really touch on was the JavaScript API you can use to work with websockets. These functions are available to any file making use of the cfwebsocket tag. They allow you to:
- Open or close a connection as well as checking if the connection is open (openConnection, closeConnection, isConnectionOpen)
- Subscribe or unsubscribe to a channel (remember that the cfwebsocket tag can autosubscribe you - that's what my demos did)
- Authenticate you - technically your back end code will do this, but this helps set up your websocket connection as an authenticated one
- Get a list of what you're subscribed too (getSubscriptions)
- Get a count of the people subscribed to a channel (getSubscriptionCount)
- And finally, invokeAndPublish, which lets you use the websocket connection to run a CFC method.
Each of these functions are asynchronous. The docs clearly say this and anyone who doesn't see this may be a bit slow. (-sigh- yes... I missed it.) So as a simple example, I wanted to add a subscriber count to my chat application. I added the following code within my user registration system (the code run when you tell the application your name):
window.setInterval(function(){
chatWS.getSubscriberCount("chat")
},2000);
Remember that "chatWS" is a JavaScript object that is my 'hook' to the websocket.
Each of the JavaScript methods will use your message handler for results. This means your message handler has to be a bit complex. Previously it handled new user arrivals as well as messages. So now I have to add a bit more logic to handle this result. Here's my message hander:
if(message.type == "response" && message.reqType == "getSubscriberCount") {
$("#userCount").text(message.subscriberCount);
}
}
function msgHandler(message){
//Only care about messages
if (message.type == "data") {
var data = JSON.parse(message.data);
if(data.type == "chat") $("#chatlog").append(data.username + " says: " + data.chat + "\n");
else $("#chatlog").append(data.chat + "\r");
$('#chatlog').scrollTop($('#chatlog')[0].scrollHeight);
console.log("Append "+data.chat);
}
You can visit the demo here: http://raymondcamden.com/demos/2012/feb/19/chat/#
p.s. When I first tried to use this feature, I didn't realize the calls were asynchronous, even though the docs say this. I also didn't realize my message handler would get the result. I thought - why not simply get a user count after we get each message. So I put the call in the message handler. Take a while guess what this did to my server.