Thursday, July 26, 2012

Debugging ColdFusion WebSockets

Debugging ColdFusion websockets is not the easiest things, at least not as easy as using websockets. ColdFusion 10 provides a seamless integration to websockets. It provides it's own messaging layer and client side JS functions to subscribe and publish messages to a web sockets. As CF websockets works Asynchronously that makes debugging even more complicated.

However CF10 websockets messages provides some sort of information. It is a bit difficult for beginners.
Specifically when there is an error message. it is very difficult to determine it is from client side or server side.

Here is a small tool that will help the beginners in CF10 websockets to debug their application(from client side). This tool will enable a CF programmer to see what is going in and out of the websocket at the browser. It also highlights if there  is any error.

I have placed this on RiaForge. To start with, copy this folder anywhere in your webroot  and run index.cfm
I am testing the final version(v6) of chat application that is available on my devnet article.

Provide the URL of the application you would like to debug. Now you can only debug an application which has same domain as from where you are running this debugger. i.e here debugger is running from localhost, so I can't debug any application running on I can only debug applications running under localhost.

This will take you to the debug page.

The first half of the debug page will show your application and the bottom part shows the debug information about websocket. The latest debug information goes on the top. There are tabs to see only incoming/outgoing/error/Info messages. In this snapshot the first message was:

{"ns":"coldfusion.websocket.channels","type":"welcome","authKey":"2075AE5B79AE803A351EB9A60652938D","subscribeTo":"","appName":"helloworld"}Thu Jul 26 2012 15:54:12 GMT+0530 (India Standard Time)

Which says it is an outgoing( < is for outgoing message) welcome message and is sent to the server to establish a websocket connection. However at this point of time it is not subscribed to any channel. Go to info tab it shows :


 The message at the top indicates it's an incoming message and there is no error in connection(code=0).
Now on the application (upper part of debugger ) I click on I Agree. This authenticates and subscribe to the channel 'world'. As you can see in the Info tab.

Now you are connected to CF websockets and subscribed to channel world. If I again click on 'I Agree'( this again tries to resubscribe client to channel 'world') debugger will show an error message.

Here is the snapshot of error tab.

 Likewise you can view all incoming and outgoing messages from your browser.

Note: This tool has some limitations too. If your application is showing images/css which has a relative path then this tool won't work. This tool will try to interpret it as it's own relative. though not tested if you copy contents of 'wsdebug' folder to your application it should work.


Raymond Camden said...

I'm seeing a lot of broken images in your post.

Aaron Neff said...

Excellent work Kunal!


Nadav G said...

I've tried creating a websocket channel in my Application.cfc using the standard notation (rather then scripting) and I can't get it to function properly...anyone else ran into this issue?