HTML5 WebSockets in ColdFusion 10: Full Workflow Diagram
Join the DZone community and get the full member experience.
Join For Free
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:
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.
Published at DZone with permission of Sagar Ganatra, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments