Search within TutorialsPark

HTML5 Web Sockets API


Use Websockets to have a full duplex, bi-directional connection with the server over single connection.


HTML5 WebSocket API

1. WebSocket is a new addition to the HTML5 specification, it allows a web server to establish a connection with the browser and communicate directly without any lag or delay.

2. A regular communication consists of a series of requests and responses between the browser and webserver. This technique is not fit for realtime web application.

3. So with websockets we can establish a connection once and then communications between the webserver and browser can go without any lag or delay(in realtime).

4. This technology is very essential for applications which require regular and quick updates from the webserver. Eg: Stock Market indexes tickers, Multiplayer games, chat applications etc.


Browser Support for HTML5 WebSockets.

1.The HTML5 WebSockets API is supported on latest versions of all major browsers.

Compatible Browsers.

internetexplorer safari firefox opera chrome


Internet Explorer, Apple Safari, Mozilla Firefox, Opera , Google Chrome.

NOTE-Internet explorer 9 supports HTML5 Websockets, earlier versions may not.

WebSocket Connection.

1.In the normal Request-Response model the communication is carried using the HTTP protocol, while websockets use the TCP/IP protocol.

2.Since, TCP/IP layer is below HTTP layer, hence the overhead involved with TCP/IP protocol is significantly less compared to HTTP.

3.For regular HTTP protocol, the schemes used are http:// or https:// ( for secured), while using websockets we use ws:// or wss:// (for secured) schemes.


NOTE-By using a custom protocol over HTTP the small data packets can be exchanged very quickly between client and server, without any significant lag.

Using HTML5 WebSocket.

1.To initiate a WebSocket connection we create a WebSocket socket object using the WebSocket() Constructor.

Eg: var Socket = new WebSocket("ws:// www.example.com/webserver.php");

2. The argument within the WebSocket() constructor is a URL to which the host contects to, and sometimes even the port number.

3. The Protocol used for the connection is ws:// or wss:// (for secured connection)

Example: Creating a Web Socket Connection.

2.After creating a Websocket object, the current state of the connection can be determined using the attribute readyState.

3. readyState attribute can assume four values as shown in table below.

Values for WebSockets attribute readyState.

Value Numerical Value Description
CONNECTING "0" The Connection is being Established.
Eg: WebSocket.OPENING(0)
OPEN "1" The Connection has been Established.
Eg: WebSocket.OPEN(1)
CLOSING "2" The Connection is beginning to close
Eg: WebSocket.CLOSING(2)
CLOSED "3" The Connection is closed.
Eg: WebSocket.CLOSE(3)

WebSocket Method: send().

1. After opening a WebSocket Connection we can send data through the connection, using method send().

Eg: socket.send("Your Message!");

Send Message with WebSocket method send().


WebSocket Handlers.

While a Web Socket connection is alive, four types of events occur.

Websocket Events with Event Handlers.

Events Event Handlers Description
open onopen Fired when the websocket connection has been successfully made.
Eg: socket.onopen = function(event){do something...}
close onclose Fired when the websocket has been closed.
Eg: socket.onclose = function(event){do something..}
error onerror Fired when an error occur.
Eg: socket.onerror = function(event){do something..}
message onmessage Fired when the server sends a message to the client.
Eg: socket.onmessage = function(event){do something..}

WebSocket events and event handlers


Closing the websocket with method : close().

The Connection between the client and server can be closed using the WebSocket Method close().

Close Connection with WebSocket : close()


HTML5 WebSocket Complete Demo

1. In the below demo we assign event handlers for each of the four events that occur in the limetime of a WebSocket Connection.

2. Message is Exchanged between the Client and Server using HTML5 WebSocket API. After which the WebSocket Connection is closed.

HTML5 WebSocket Complete Demo

Give it a TRY! »



Related Examples

Related Tags