Skip to main content

HTML5 WebSockets in ColdFusion 10 - Workflow diagram

The HTML5 Web Sockets represent the next evolution of web communications. A WebSocket is a full duplex, bidirectional communication channel that operates over a single TCP socket. It has become a standard for building real time web applications. In ColdFusion 10, a messaging layer has been provided that implements the Web Socket protocol. It enables you to build applications that are based on publisher/subscriber model and applications that are based on subscriber model wherein a push from a server is possible.

Publisher/Subscriber model

In this broadcast based method, publisher posts a message and a subscriber consumes it. A subscriber subscribes to a channel to which a publisher posts the message. A subscriber can subscribe to multiple channels and consume the data sent through the channel:

 pubsub

To implement the broadcast based approach in ColdFusion, you can specify the channel details in Application.cfc file, use the new tag - cfwebsocket to create a websocket and then send, receive and manage the connection through various JavaScript functions.

Application.cfc:

component {
this
.name = "WebSocketAPP";
this
.wschannels = [{name="channel1"},{name="channel2"},{name="channel3"}]; }

The websocket channels through which the communication takes place between the publisher and subscriber is specified in the wschannels variable. As observed in the above code snippet, the channel names are specified in a struct. Optionally, you can also specify the cfclistener key which contains channel listener functions for each channel (I plan to cover this workflow in my next post).

Creating a WebSocket:

To create a websocket, the cfwebsocket tag is used:

<cfwebsocket name="socket" onMessage="messageHandler" onOpen="openHandler" onClose="closeHandler" onError="errorHandler" subscribeTo="channel1,channel2">

The cfwebsocket tag will establish a connection with the WebSocket Server and the server will respond with a ‘Welcome’ message; acknowledging the publisher or subscriber that the connection has been established. As observed in the above code snippet various handlers are specified. These are JavaScript functions that the user has to implement. The onMessage handler (messageHandler in code) is called when the server responds with a message or when a data is received through the subscribed channel. The complete workflow is as shown below:



JavaScript Functions:

Once a connection is established with the server, the websocket object is then used to manage the connection. Here is list of JavaScript functions (please note this is not a complete list, only those relevant to the example are mentioned):

openConnection

By default, a connection is established with the server when the cfwebsocket tag is specified in the page. If the user chooses to close the connection (see closeConnection function below) and then establish again, then this function should be called on the socket object. Example:


socket.openConnection();

isConnectionOpen

This function is used to check whether the connection is established with the server. It returns a boolean value true if the connection is established or false if the connection is closed. Example:


socket.closeConnection();

subscribe

Instead of specifying the channels to subscribe in the subscribeTo attribute of the cfwebsocket tag, you can use the JavaScript function ‘subscribe’ to subscribe to a channel. This function optionally takes two arguments – subscriberInfo and messageHandler. Subscriber information can include subscriber related data such as id,name,age in a struct. If a messageHandler function is specified then whenever a message is received through the channel, the messageHandler would be invoked. Example:


socket.subscribe(“channel1”,{name: ‘Sagar’, id: ‘888’}, channelHandler);

unsubscribe

The ‘unsubscribe’ function is used to unsubscribe from a channel. Once a user unsubscribes from the channel, the messages from the channel are no longer delivered to the client. Example:


socket.unsubscribe(“channel1”,{name: ‘Sagar’, id: ‘888’});

publish

The publisher can send data through a channel using the ‘publish’ method. The Server acknowledges this action by sending an acknowledgement to the publisher. The third argument of the publish method is a struct containing the publisher information. Again this is an optional argument. Example:


socket.publish(“channel1”,”message_here”,{name: ‘Publisher’, id: ‘222’});

closeConnection

The user can close the connection by calling the ‘closeConnection’ function on the socket object. This function will close the connection with the server and the user will not receive any messages. If a user wants to open the connection then the ‘openConnection’ function should be called. Example:


socket.closeConnection();


Working Example


I have created a sample application, you can download it here. Open two browser instances and run the cfm file. You’ll be able to see the communication taking place between the two instances when some message is sent through the channel.

Comments

  1. Great post - it's starting to make sense. When you pass optional data with the Subscribe(), do you *also* have to pass that data along to the Unsubscribe() for the channel to be unsubscribed?

    ReplyDelete
  2. Ben, the subscriber info provided in subscribe and unsubscribe methods come handy when dealing with user defined Channel listeners. A channel listener is a CFC containing methods which are called when a WebSocket object's JavaScript functions are called. The methods in CFC can take the decision (to allow subscribing) based on the info included in the subscribe function.

    For the ones without user defined channel listeners it is not required to provide subscriber info.

    ReplyDelete
  3.  Ok cool - I'm gonna be working on some WS stuff today, see if I can wrap my head around it.

    ReplyDelete
  4. Is there websockets support in CF 9

    ReplyDelete
  5. No. It was added in ColdFusion 10.

    ReplyDelete
  6. What is the limitations to the number of channels we can have. Also can we have dynamic channels like ch.id1, ch.id2 ....ch.idn
    the number of channels being dependent on the number of user groups that are logged in from id1 to idn. What is the limitation to the number of channels. Each group ch.id1 etc. could have any number of subscribers 1 to 10 say.

    ReplyDelete

Post a Comment

Popular posts from this blog

Adding beforeRender and afterRender functions to a Backbone View

I was working on a Backbone application that updated the DOM when a response was received from the server. In a Backbone View, the initialize method would perform some operations and then call the render method to update the view. This worked fine, however there was scenario where in I wanted to perform some tasks before and after rendering the view. This can be considered as firing an event before and after the function had completed its execution. I found a very simple way to do this with Underscore's wrap method.

De-obfuscating javascript code in Chrome Developer Tools

I had blogged about JavaScript debugging with Chrome Developer Tools  some time back, wherein I have explained how these developer tools can help in debugging javascript code. Today Google Chrome 12 was released and my Chrome browser was updated to this version. As with every release, there have been some improvements made on performance, usability etc,. One feature that stood out for me is the ability to De-obfuscate the javascript code. What is Minification? Minification is the process of removing unnecessary characters such as white spaces, comments, new lines from the source code. These otherwise would be added to make the code more readable. Minifying the source code helps in reducing the file size and thereby reducing the time taken to download the file. This is the reason why most of the popular javascript libraries such as jQuery are minified. A minified jQuery file is of 31 KB in size where as an uncompressed one is about 229 KB. Unfortunately, debugging minified javascript f

On GraphQL and building an application using React Apollo

When I visualize building an application, I would think of using React and Redux on the front-end which talks to a set of RESTful services built with Node and Hapi (or Express). However, over a period of time, I've realized that this approach does not scale well when you add new features to the front-end. For example, consider a page that displays user information along with courses that a user has enrolled in. At a later point, you decide to add a section that displays popular book titles that one can view and purchase. If every entity is considered as a microservice then to get data from three different microservices would require three http  requests to be sent by the front-end app. The performance of the app would degrade with the increase in the number of http requests. I read about GraphQL and knew that it is an ideal way of building an app and I need not look forward to anything else. The GraphQL layer can be viewed as a facade which sits on top of your RESTful services o