WebSockets in HTML5


In a typical web application communication between the browser and the web server follows the request and reply pattern.Browser makes the request to the web server which sends the response in return.So the communication needs to be initiated by the web browser.This works well for most of the web applications.

Sometimes we need to implement a scenario in which the web server has some information that it needs to return back to the browser.This scenario is difficult to implement using the normal request reply pattern that the HTTP protocol supports.

Common example of such an application is a chat application in which the server can anytime send the response to the browser.

In long polling the web browser keeps the web server asking if it has the information ready.The problem with this approach is that network bandwidth is wasted as the browser has to make multiple requests until the information is returned by the web server.Also the resources are not efficiently utilized as the browser needs to make multiple requests.

WebSockets in HTML5 provides an ideal way to implement such kind of scenario in which the server can return the response back to the browser ,once the response is ready.So websockets provides a means to implement bidirectional communication in which the either the web browser or the web server can start the communication.Web browser receives notifications when the server sends response back to the browser.

“WebSockets is a two way communication technology over TCP protocol.It is an implementation of push technology concept in which the server informs the browser when it has some data ready to be sent to the browser .”

Implementing WebSocket

1 .Create a WebSocket object .First argument is the url of the server we want to connect to.Second argument is a string or array of subprotocols to be used for connection.Example of one such subprotocol is SOAP.


2. Send message to the server After we have created a WebSocket object we can send a message to the server by using thesend() method.

websocket.onopen=function(){websocket.send('Test Message');};

onopen is an event handler which is executed when the connection to the server is established.

3. Retrieve the data returned from the server The data returned by the server is available in the onmessage eventhandler.This event handler is called when the server returns the data.


4. Implement the onclose event handler The onclose even handler is called when the connection closed.

websocket.onclose=function(){alert("Connection closed");}; Server implementation of WebSocket

Server can be implemented in different technologies such as:

.NET Java Node.js Ruby C++

Some of the advantages of websockets are:

Websockets uses a protocol defined by IETF for communication. Unlike HTTP protocol Websockets allows full duplex or bidirectional communication.Communication between the web browser and web server can happen simultaneously Websockets communicate on the standard TCP port 80 ,so communication using websockets isallowed by most of the firewalls