Before discussing the Web Socket APIs in HTML 5 specifications lets have a look at the main point of the client-server architecture it is trying to address. The client-server communication over the Internet has seen changes over a period of time. This change has been from stateless communication to WebSockets.
Stateless communication
This is the first generation of client-server communication over the internet.
- The client (web browser) sends a request to the server.
- Server processes this request and sends the result back to the client.
- Client will refresh the entire page.
Most of the web sites still work on this model even today (If not fully then certainly partially).
Ajax - The Asynchronous Way of Client-Server Communication
An Ajax application can send data to the server asynchronously and does not require a page refresh when receiving the data. Just a section of the page can be refreshed.
This brought a lot of change in the UI of websites and the way the user interacts. I remember Google was most particular in using AJAX in its websites.
AJAX was not a new programming language but just a new way of using JavaScript. The JavaScript object XMLHTTPRequest allows web pages to submit a request to the server in the background and define a JavaScript function on the client side to receive the response of that request. This function can then refresh the selective sections of the page based on server response.
Comet
Comet is a technique (and this technique has multiple implementations) which allows a server to push data to the client even when the client has not requested the data.
But this is not purely server-push. The client will have to make a specific request to the server, which indicates the server to long hold the request and later the server can push data to that client.
It may be achieved by opening a persistent HTTP session between a client & a specific server. But the problem is that HTTP1.0 specification does not allow a browser to open more than 2 simultaneous HTTP connections with the server. If one of them is blocked for a comet event then the browser usability may be impacted.
There are multiple other techniques to achieve comet connections.
Limitations with above techniques:
- Still requires the client to initiate the request.
- There is no way for the server to inform the client about some change. The comet application tries to overcome this by opening a persistent session between the client and server. But it will keep a large strain on the server.
- The techniques required to deal with Firewalls are very complex.
Polling technique
It can be done in two ways.
1. The client sends a request to the server after every few seconds to see if the data is ready or not. If the data is ready then the server will respond with the data and the client will not make further calls, otherwise the server will respond with an empty reply and the client will continue polling.
Higher rate of unnecessary server request
2. Make a single request to the server but keep the connection open unless we receive a response from the server.
Many thousand open connections need to be handled by the server. Server may not respond to the new clients requesting connections.
Web Sockets
- Create a single bi-directional connection between client & Server. It means that the client can send a request to the server and forget; when the data is ready at the server the server will send it to the client.
- Native to the browser which makes them light weight and easy to implement.
- Uses its own protocol thus can tunnel thru firewalls and proxy with no extra effort. i.e Client does not use HTTP request but when a new WebSocket connection is established, then browser establishes the HTTP connection with the server and then upgrade that connection to a dedicated WebSocket connection setting a tunnel passing thru firewall and proxies.
- Once the connection is established (as above) it is a two way channel on which client and server can communicate.
Creating a WebSocket is as easy as the code below
var ws = new WebSocket("ws:<URL>");
|
Once the connection is established there are methods to control sending data and monitoring the connection.
ws.onopen = function(){ } // Connection Open
ws.onmessage = function(){ } // received update
ws.onopen = function(){ } // Connection Close
//Funtions of WebSocket Object
ws.send(<text>);
ws.close();
|
Advantages:
- Since the Firewall is bypassed the streaming is very easy and can be done thru any connection.
- Don't need separate connection for up-stream and down-stream.
- Can be used with any client like AIR & Flex which comes with JavaScript support.
Limitations:
- Not all browsers support WebSockets as of now.
To see which Browser supports which feature of HTML5 you may refer to this link in wikipedia.. It however talks about the support in terms of a layout engine which is an engine used to render the UI in the browser. Though you can easily determine which Browser uses which layout engine. Let me also provide it here for quick reference.