Click here to Skip to main content
15,860,972 members
Articles / Web Development / IIS / IIS8

Introduction to HTML5 WebSocket

Rate me:
Please Sign up or sign in to vote.
4.85/5 (37 votes)
23 Feb 2013CPOL4 min read 91.9K   54   13
Getting started with HTML5 WebSocket

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. <o:p>

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 it’s 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:<o:p>

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:

<o:p>

  1. Overhead of HTTP (Network Throughput)  
  2. Low Latency 

WebSocket uses its own protocol defined by IETF to communicate with the server. <o:p>

WebSocket also has an API called WebSocket API to open-close connections with server and send-receive messages.<o:p>

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. <o:p>

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

In an experiment, Websocket.org compared the performance of Ajax polling and WebSocket in detail. As a part of this 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.<o:p>

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

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) 

<o:p>

 Image 1

Polling vs WebSocket Network Throughput comparison

Image 2

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:

Image 3

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. 

<o:p>

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”.<o:p>

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  

WebSocket Client Server Communication 

Sample Client Implementation   

JavaScript
$(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  

Browser Support  

Image 5

Image source:  http://caniuse.com/websockets  

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionHow Rrrr Pin
kPlusPlusA21-Jan-17 18:02
kPlusPlusA21-Jan-17 18:02 
QuestionAbout Article Pin
Karthiksachin16-May-16 16:23
Karthiksachin16-May-16 16:23 
GeneralMy vote of 5 Pin
SZeeshanAli2-Apr-15 22:27
SZeeshanAli2-Apr-15 22:27 
GeneralMy vote of 5 Pin
Nirosh18-Feb-15 16:54
professionalNirosh18-Feb-15 16:54 
QuestionWebSocket and Python. Pin
abdelouahabb19-Nov-14 13:42
abdelouahabb19-Nov-14 13:42 
GeneralMy vote of 5 Pin
Member 102318033-Sep-13 19:19
professionalMember 102318033-Sep-13 19:19 
GeneralMy vote of 5 Pin
GregoryW25-Jun-13 3:33
GregoryW25-Jun-13 3:33 
GeneralMy vote of 4 Pin
John B Oliver7-Mar-13 0:46
John B Oliver7-Mar-13 0:46 
GeneralRe: My vote of 4 Pin
TejasDesai.NET1-Apr-13 9:46
TejasDesai.NET1-Apr-13 9:46 
GeneralRe: My vote of 4 Pin
John B Oliver3-Apr-13 0:18
John B Oliver3-Apr-13 0:18 
GeneralMy vote of 5 Pin
Mike Collinson26-Feb-13 20:26
Mike Collinson26-Feb-13 20:26 
GeneralMy vote of 4 Pin
Le Duc Anh24-Feb-13 15:00
professionalLe Duc Anh24-Feb-13 15:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.