mardi 21 août 2012

HTML5 WebSocket API

One of the new features coming with HTML5 is the WebSocket API that provides a full-duplex communication channel through a single socket over the web. This piece of technology eables ease of integration of asynchronous/real-time features to web applications.
Before being able to use (send and receive) this API, the WebSocket client should initiate a handshake with the WebSocket server by creating a new WebSocket object and providing the server URL with ws:// or wss:// prefix to indicate WebSocket or a secure WebScoket connection.

At the client side, the WebSocket interface consists of the following methods:
  • onopen(event) called when the connection is successfully opened
  • onmessage(event) called when a message is received from the remote endpoint 
  • onclose(event) called when the connection is closed by the remote endpoint 
  • send(message) used to send data 
  • close() used to close an opened connection
//Checking for browser support
if(window.WebSocket) {
 Alert("WebSocket is supported by your web browser.");
 // create a new WebSocket object to connect to the server
 var url = "ws://localhost:8080/echo";
 var ws = new WebSocket(url);
 // Adding liseners for connection opened, message received and connection closing events
 ws.onopen = function() {
  log("connection opened");
  // sending a message
  ws.send("thank you for accepting this websocket request");
 ws.onmessage = function(e) {
  log("received message: ";
 ws.onclose = function(e) {
  log("connection closed");
}else {
 Alert("WebSocket is not supported by your web browser.");

There are many server-side implementations for WebSocket, here is few ones:
  • Netty a Java network framework that includes WebSocket support
  • Jetty Application Server provides a support for WebSocket
  • Node.js multiple WebSocket server implementations for this server-side JavaScript framework.

Next are the steps that should be followed to embed jetty and use it as a WebSocket Server: first, use tomcat as an application server. Second, add jetty jars to a Dynamic Web Application project. Third, implement a ServletContextListener and declare it into the web.xml file to listen to the web applicaion start-up event to launch the WebSocket server and to shut it down at application destruction. Fourth, Create a handler that implements the server-side of the WebSocket API (which is similar to the client-side) to deal with exchanged messages of the websocket protocol.

Jetty provides multiple interfaces for the WebSocket API that may be used for different purposes, org.eclipse.jetty.websocket.WebSocket is an example of an implementation of WebSocket for exchaging strings.

Here is a code snaphot for starting a jetty-based WebSocket server:
// 1) Create a Jetty server with the 8091 port.
Server server = new Server(8081);
// 2) Register SingalingWebSocketHandler in the Jetty server instance.
MyWebSocketHandler wsHandler = new MyWebSocketHandler();
wsHandler.setHandler(new DefaultHandler());
// 2) Start the Jetty server.

To shutdown the WebSocket server:
A complete example of how using WebSocket API can be found here.

Aucun commentaire:

Enregistrer un commentaire