Samsung Mobile Innovator

HTML5 WebSocket API

Version 1.0
 HTML5 WebSocket API 1.0

Introduction
By default, HTTP is the way that client sends request to the server and server response to
client. Unlike typical Socket Programming, HTTP is unidirectional.

XML Http request (XHR) is an API available in web browser scripting languages such as
JavaScript. It is used to send HTTP or HTTPS requests directly to a web server and load the
Server response data directly back into the script. The data might be received from the server
as XML text or as plain text. Data from the response can be used directly to alter the DOM of
the currently active document in the browser window without loading a new web page
document.

Comet is a web application model in which a long-held HTTP request allows a web server to
push data to a browser, without the browser explicitly requesting it.

Comet is an umbrella term for technologies that attempt to eliminate both the limitations of
the page-by-page web model and traditional polling. Comet-like applications offer real-time
interaction by relying on a persistent HTTP connection (or where not possible a long lasting
HTTP connection) to provide the browser with updates as designated by the web application.

Streaming Comet the browser opens a single persistent connection to the server for all Comet
events, which is handled incrementally on the browser side.

Push technology or server push, describes a style of internet-based communication where

the request for a given transaction is initiated by the publisher or central server. It is
contrasted with pull technology, where the request for the transmission of information is
initiated by the receiver or client.

WebSocket is high speed bidirectional communication solution for the Web - secure, reliable
and fast for two-way communication over one (TCP) socket, a type of PUSH technology.
WebSocket is provided to create innovative HTML5 based streaming and communication
applications on the web. HTML5 WebSockets will replace the existing XHR approaches as well
as Comet services by a new flexible and ultra high speed bidirectional TCP socket
communication technology.
WebSocket is an open source Java and JavaScript implementation of the HTML5 WebSocket
protocol with a huge set of extensions.

Description
Todays web apps demand reliable event-driven communications.

Real-time (minimal latency)

Full duplex

This page contains Samsungs proprietary information and is not to be disclosed or distributed to unauthorized persons

Page 2 of 6
 HTML5 WebSocket API 1.0

Examples:
Social networking

Online Games

Collaborative platforms

Financial Applications etc...

Its very hard to achieve real-time apps, primarily due to limitations of HTTP requests. HTTP is
half duplex (traffic flows only in one direction at a time).HTTP adds latency and message
overheads.

WebSocket ?
Web Sockets is a technique for two-way communication over one (TCP) socket, a type of
PUSH technology.
Why WebSocket?
W3c/IETF Standard
Uses the WebSocket protocol instead of HTTP
True full-Duplex communication Channel
o Both UTF-8 strings and binary frames can be sent in any direction at the same
time
Its not a raw TCP socket
Connection established by upgrading from HTTP to WebSocket protocol
Runs via port 80/443 proxy/Firewall friendly
o HTTP- compatible handshake
o Integrates with cookie based authentication
WebSockets and secure WebSockets
o ws://
o wss://
Reduces network traffic
o Each frame has only 2 bytes of overhead
o No latency from establishing new TCP connections for each HTTP messages
o No polling overhead only sends messages when there is something to send
Queues
o Buffer messages that failed to send due to transient network problem
o Resend queue when connection is restored
o Important for both client and server

This page contains Samsungs proprietary information and is not to be disclosed or distributed to unauthorized persons

Page 3 of 6
 HTML5 WebSocket API 1.0

Polling (Ajax)
An Ajax application will poll the server for data every time the content of the page
require an update, it means the browser will open a connection to the server every time data
are required:

Polling, Long Polling, Ajax Push

Limitations of Polling (Ajax)

There are several problems with this approach like scalability; the number of requests
made to the server can be extremely high if the frequency of polling is set to a small value and
other problem is even if there is no data on the server, the response will not contains any
data. Doing such void request overload the server for nothing.
To overcome these problems we use technique called Long polling.

Long Polling (Ajax Push)

Long polling is a variation of the traditional polling technique and allows emulation of an
information push from a server to a client. If the server does not have any information
available for the client, instead of sending an empty response, the server holds the request and
waits for some information to be available. All of these servers use asynchronous technology.
Long polling is also called as comet programming.

Limitations of Long Polling (Ajax Push)

If the server cant push data fast enough, the AJAX application might not be updated as fast as
you expect. Also, if the server receives a lot of update, you might end up in a situation where
you are mostly doing the polling technique as your request is never parked because the server
always execute pushes.
Ajax Push (Http Streaming)
The third technique is called http streaming. Http streaming is similar to the long polling
technique except the browser opens a single persistent connection to the server for all Comet
events, which is handled incrementally on the browser side

This page contains Samsungs proprietary information and is not to be disclosed or distributed to unauthorized persons

Page 4 of 6
 HTML5 WebSocket API 1.0

Here the AJAX application will only send a single request and receive chunk (partial) responses
as they come, re-using the same connection forever. This technique significantly reduces the
network latency as the browsers and server doesnt need to open/close the connection.
Limitations of Ajax Push (Http Streaming)
Http streaming suffer the same problem as long polling: if the server push data too often, it
might severely impact performance of the network and the AJAX applications.

Specific Techniques for accomplishing streaming comet:

Hidden IFrame
A basic technique for dynamic web application is to use a hidden IFrame HTML element (an
inline frame, which allows a website to embed one HTML document inside another).

This invisible IFrame is sent as a chunked block, which implicitly declares it as infinitely long
(sometimes called forever frame). As events occur, the IFrame is gradually filled with script
tags, containing JavaScript to be executed in the browser. Because browsers render HTML
pages incrementally, each script tag is executed as it is received.

One benefit of the IFrame method is that it works in every common browser.

Two downsides of this technique are the lack of a reliable error handling method, and the
impossibility of tracking the state of the request calling process.

XMLHttpRequest
The XMLHttpRequest (XHR) object, the main tool used by Ajax applications for browser
server communication, can also be pressed into service for serverbrowser Comet messaging,
in a few different ways.

WebSocket Handshake Protocol

To establish a WebSocket connection, the client sends a WebSocket handshake request, and
the server sends a WebSocket handshake response
Example:
Browser Request to the server:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Protocol: sample
Upgrade: WebSocket
Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5
Origin: http://example.com

This page contains Samsungs proprietary information and is not to be disclosed or distributed to unauthorized persons

Page 5 of 6
 HTML5 WebSocket API 1.0

Server Response:
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://example.com
Sec-WebSocket-Location: ws://example.com/demo
Sec-WebSocket-Protocol: sample

The Sec-WebSocket-Key1 and Sec-WebSocket-Key2 fields and the 8 bytes after the fields are
random tokens which the server uses to construct a 16-byte token at the end of its handshake
to prove that it has read the client's handshake.
The handshake looks like HTTP but actually isn't. It allows the server to interpret part of the
handshake request as HTTP and then switch to WebSocket

Proxy traversal
WebSocket protocol client implementations try to detect if the user agent is configured to use
a proxy when connecting to destination host and port and, if it is, uses HTTP CONNECT
method to set up a persistent tunnel.
While the WebSocket protocol itself is unaware of proxy servers and firewalls, it features an
HTTP-compatible handshake so that HTTP servers can share their default HTTP and HTTPS
ports (80 and 443) with a WebSocket gateway or server. The WebSocket protocol defines a
ws:// and wss:// prefix to indicate a WebSocket and a WebSocket Secure connection,
respectively.
.
Limitations of Websocket
Timeouts - Its not a silver bullet
o Not all network problems are transient
o Cant allow queues to grow for ever
o Applications need a timeout when user is considered to be disconnected
o Need to implement an explicit close message for application to distinguish
between network failure and an orderly close.
Message Retries
o Even with queues we cant know for sure messages are delivered due to race
condition.
If close event is triggered soon after a message was sent?
For quality of service to be guaranteed an acknowledgement message would have to
be sent for each message
Ideally an future version of WebSocket may support close event

This page contains Samsungs proprietary information and is not to be disclosed or distributed to unauthorized persons

Page 6 of 6