Websocket API in HTML 5

Kamal Rawat

7y24.3k120100Article

HTML5 WebSockethow to use Websocket API in HTML 5Websocket API iWebsocket API in HTML 5

12 Comments

Join the conversation! Your thoughts help the community grow.

Omar kamel15y ago
it's a very nice article that shows the history of the point and describe it very well but it needs some sample project demonistrates the effecioncy between this method and previoys techniques but at end of all thanks to writer, god bless you!! Omar Kamel
Mahesh Chand15y ago
Good article Kamal. Sam, to answer your question, Java and C# and server side while HTML is client side. If you are doing everything in HTML, you don't need JavaScript.
- Kamal Rawat15y ago
  :) No I can believe you..
- Kamal Rawat15y ago
  I didn't quite get the question sam. If you are saying that we should have the websocket implementation of Java. Then it is already there, www.jwebsocket.org is an open source java and java script implementation of the websocket protocol.. I have never been into PHP, so no idea about that.
- Kamal Rawat15y ago
  Also I Agree that Java was one of the first client-side technologies (remember Applets), but I think it didn't quite get popular as client-side even when they came up with swings & SWT and has potentials like multi-threading (which is not there in Flash) ..
Sam Hobbs15y ago
What about Java and PHP? Java existed before JavaScript, correct? Java can be used to do that type of thing, correct?
Shirsendu Nandi15y ago
very good new tech article by you..

Introduction

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.
The server processes this request and sends the result back to the client.
The 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 the server response.

Comet

Comet is a technique (and this technique has multiple implementations) that 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 the 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 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. The 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 lightweight and easy to implement.
Uses its own protocol thus can tunnel through firewalls and proxy with no extra effort. i.e Client does not use HTTP request but when a new WebSocket connection is established, then the browser establishes the HTTP connection with the server and then upgrades 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 the 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 through any connection.
Don't need a separate connection for up-stream and down-stream.
It 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.

Browser	Layout Engine	Comments
Internet Explorer	Trident / MSHTML(DLL)	IE 8.0 = Trident4.0 = MSHTML DLL (8.0
Firefox	Gecko	http://en.wikipedia.org/wiki/Gecko_(layout_engine)
Chrome	Webkit	http://en.wikipedia.org/wiki/WebKit
Safari	webkit