3/5/2014 Introduction to HTML5 WebSocket - CodeProject

Introduction to HTML5 WebSocket

By TejasDesai.NET, 23 Feb 2013

4.78 (16 votes) Like 25 5 0 Rate this:

What is WebSocket?
WebSocket is a web technology that provides full-duplex communication channels over a single TCP connection. A
full-duplex communication is the communication system that allows simultaneous bidirectional communication. A
telephone conversation is a good example of full-duplex communication where in both parties can speak and hear at
the same time.

Why do we need WebSocket?

Current web relies on HTTP for communication which is a request-reply protocol. To achieve desktop like (real-time)
experience, programmers use techniques like polling, long polling and streaming.

All of these methods use HTTP protocol to communicate with the server. Every request sent to server over HTTP
contains lot of unnecessary header information describing where this request came from, where its heading, the user
agent information, etc. This information adds a lot of overhead on bandwidth in real-time scenarios.

Secondly, this is not a full-duplex communication. Which means client and server cannot send and receive message at
the same time.

For example:

A walkie-talkie communication Wherein one must send a pre-designated command (like Over) to indicate end of
transmission before the other party starts responding.

What WebSocket has to offer?

WebSocket is the new standard defined as a part of HTML 5 to solve two major problems of current web:

1. Overhead of HTTP (Network Throughput)

2. Low Latency

WebSocket uses its own protocol defined by IETF to communicate with the server.

WebSocket also has an API called WebSocket API to open-close connections with server and send-receive messages.

With WebSocket we can have a full-duplex bi-directional communication between client and server with much less
overhead than that of HTTP based methods discussed above and providing much faster and much scalable web
applications.

Moreover, WebSocket can communicate over TCP port 80. This is of benefit to those environments which block non-
standard internet connections through firewall.

In an experiment, Websocket.org compared the performance of Ajax polling and WebSocket in detail. As a part of this

http://www.codeproject.com/Articles/531698/Introduction-to-HTML5-WebSocket 1/6
3/5/2014 Introduction to HTML5 WebSocket - CodeProject

experiment they created two web pages, where in one communicated with server through periodic AJAX polling and
the other used WebSocket. Each of the HTTP request/response headers was around 871 bytes, whereas each of the
messages in WebSocket frame had just 2 bytes.

Here is a comparison how this affects the network throughput and latency as the load increases:

AJAX Polling:

Use case A : 1,000 clients polling every second: Network throughput is (871 x 1,000) = 871,000 bytes = 6,968,000
bits per second (6.6 Mbps)
Use case B : 10,000 clients polling every second: Network throughput is (871 x 10,000) = 8,710,000 bytes =
69,680,000 bits per second (66 Mbps)
Use case C: 100,000 clients polling every 1 second: Network throughput is (871 x 100,000) = 87,100,000 bytes =
696,800,000 bits per second (665 Mbps)

HTML5 WebSocket:

Use case A: 1,000 clients receive 1 message per second: Network throughput is (2 x 1,000) = 2,000 bytes =
16,000 bits per second (0.015 Mbps)
Use case B: 10,000 clients receive 1 message per second: Network throughput is (2 x 10,000) = 20,000 bytes
= 160,000 bits per second (0.153 Mbps)
Use case C: 100,000 clients receive 1 message per second: Network throughput is (2 x 100,000) = 200,000
bytes = 1,600,000 bits per second (1.526 Mbps)

Polling vs WebSocket Network Throughput comparison

http://www.codeproject.com/Articles/531698/Introduction-to-HTML5-WebSocket 2/6
3/5/2014 Introduction to HTML5 WebSocket - CodeProject

Polling vs WebSocket Latency comparison

How does WebSocket work?

WebSocket communication works in two parts: A handshake and the data transfer.

When a WebSocket object is created by client, a handshake is exchanged between client and server. Client first sends
a HTTP GET Upgrade request to the server.

The handshake between client and server looks like this:

As we can see in the above screenshot, browser sends Upgrade: websocket in the request header which indicates
a protocol upgrade request. Server then upgrades protocol to WebSocket protocol which is a TCP based protocol.

http://www.codeproject.com/Articles/531698/Introduction-to-HTML5-WebSocket 3/6
3/5/2014 Introduction to HTML5 WebSocket - CodeProject

An important thing to note here is sec-WebSocket-Key and sec-WebSocket-Accept.

The client sends sec-WebSocket-Key string in header to the server. Server appends a GUID string "258EAFA5-
E914-47DA-95CA-C5AB0DC85B11" to the value of sec-WebSocket-Key header field and sends the base64
encoded SHA-1 hash of this concatenated string to the client in response header field sec-WebSocket-Accept.

Once the handshake is done, client and server can start sending messages over a single TCP connection.

WebSocket API
W3C has a working draft of WebSocket API on w3c.org

Client-Server Communication

Sample Client Implementation

http://www.codeproject.com/Articles/531698/Introduction-to-HTML5-WebSocket 4/6
3/5/2014 Introduction to HTML5 WebSocket - CodeProject
Collapse | Copy Code
$(document).ready(function () {
if ("WebSocket" in window) {

console.log('WebSocket is supported by your browser.');

var serviceUrl = 'ws://localhost:2020/';

var protocol = 'Chat-1.0';
var socket = new WebSocket(serviceUrl, protocol);

socket.onopen = function () {
console.log('Connection Established!');
};

socket.onclose = function () {
console.log('Connection Closed!');
};

socket.onerror = function (error) {

console.log('Error Occured: ' + error);
};

socket.onmessage = function (e) {

if (typeof e.data === "string") {
console.log('String message received: ' + e.data);
}
else if (e.data instanceof ArrayBuffer) {
console.log('ArrayBuffer received: ' + e.data);
}
else if (e.data instanceof Blob) {
console.log('Blob received: ' + e.data);
}
};

socket.send("Hello WebSocket!");
socket.close();
}
});

Server Implementation Options

There are several options available for various server side technologies for WebSocket server implementation. Some of
the popular WebSocket server implementations for some of the widely used technologies are listed below:

.NET

Fleck
ASP.NET 4.5
SuperWebSocket
XSocket.NET

Java

jWebSocket
JettyWebSocket

Node.js

Socket.IO
WebSocket-Node

http://www.codeproject.com/Articles/531698/Introduction-to-HTML5-WebSocket 5/6
3/5/2014 Introduction to HTML5 WebSocket - CodeProject

Browser Support

http://www.codeproject.com/Articles/531698/Introduction-to-HTML5-WebSocket 6/6