HTLML 5 WEB SOCKETS

I have been reading a lot about HTML5 & the features that it brings to the developer table , one of the main area in which I have been digging in is to learn about Web sockets . So I thought of sharing the details that I have got to learn about it .

What are Web Sockets ?

                Web Sockets feature that comes with HTML 5 is a new proposal that full-duplex, bi-directional client-server interaction over a single TCP connection. The main goal of this proposal are as below

[a] Increase in Web Server connection

[b] Simplifying the AJAX code

Before explaining about the above points I would like to explain about the other applications that support this functionality but in a much trickier way.

The other applications that I have came to know is COMET which in practice in most often implemented through AJAX and long polling. COMET makes use of  technique of server push using standard browser functionality. With LONG POLLING, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.

The above information tough provided won’t be sufficient enough for explaining about the LONG POLLING & COMET one can refer the links to get more idea on the same.

LONG POLLING :: http://en.wikipedia.org/wiki/Push_technology

Now the techniques that is mentioned above are a kind of hacks as it makes use of AJAX , pooling as this would mean multiple AJAX request being send from the client to the server & keeping that connection open by using long pooling technique to get real time data.

Web Socket supports a much simpler interface that enables client and the server sends messages to each other in a much simpler way.

Google’s Chrome browser already provides WebSockets and developers can expect to see the technology in other browsers in 2010

A  simple way to check whether the browser supports Web Socket is by using the below code

if("WebSocket" in window)

HTML5 web socket example 

Step 1: Create a WebSocket with a valid URL
Creating a new websocket connection to a web socket server
var newWebSocket = new WebSocket("ws://abc.xyz.com");
ws:// è web socket connection
wss:// è secured web socket connection
Default port for
WebSockets è 81
secure WebSocket è 815.
Now comes the times to attaché few callback functions
newWebSocket.onopen = function(evt) {
alert("Connection open..."); 
}; 
newWebSocket.onmessage = function(evt) { 
alert( "Updated data : " + evt.data); 
};
newWebSocket.onclose = function(evt) {
alert("Connection closed."); 
};
Step 3: Send and Receive Data
To send a message to the server, simply call the postMessage method on the webocket with the content you wish to send to the server.
stockTickerWebSocket.postMessage("hi there″);
This will send the message to the server. Any message coming from the server will be delivered to the onmessage callback registered above
When completed, call the disconnect() method to close the WebSocket connection.
newWebSocket.disconnect();
As demonstrated in the example above, there are no HTTP requests made to the server from the client side to retrieve data, instead the data was pushed to the client from the server - when it becomes available.
When a new WebSocket connection is established the browser opens an HTTP connection to the server first and then negotiates with the server to upgrade the connection to a dedicated and persistent WebSocket connection. This process automatically sets up a tunnel through to the server  passing through all network agents (proxies, routers, and firewalls) in the middle (very much like HTTPS establishing a secure, endtoend connection), solving numerous issues that the various Comet programming techniques encountered. 


So this is it ,  a very basic understanding for the Web Sockets feature that HTML 5 provides will be posting more updates on this and the other features in the near future.