WebSockets 101dhaval.dalal@software-artisan.com

@softwareartisan

AReal-time Webapp

Polling• “Simulate” real-time by making series of XHRs

at regular intervals.

• Pulls Data from the server.

Web Server

Browser

Req

uest

Response

Process

Req

uest

Response

Process

Req

uest

Response

Process

Req

uest

Response

Process

Req

uest

Response

Process

Problems with Polling• Its a wasted request if there are no updates.

• Vice-versa, users may be working on “stale” data since the last update

• Each request creates new connection to the server.

• Each request causes exchange of HTTP headers (request and response), they consume Bandwidth.

• Not scalable

Long-Polling• Solves the problem of extremes (wasted request

or stale data) by pushing updates to clients as they happen.

Web Server

Browser

Req

uest

Response

Process

Req

uest

Response

Process

Requ

est Response

ProcessR

eque

st

Response

Process

Req

uest

Response

Process

How Long-Polling works• Browser makes request to the server.

• Connection is kept open between the server and the browser.

• When an update arrives the connection is closed (sent as complete response 200 OK).

• The browser then initiates a new long-polling request for subsequent updates.

• Techniques

• XHR Style LP

• Script Tag LP

• IFrame

Long-Polling Pros & Cons

• Pros

• Reduces latency for data-delivery.

• Cons.

• Each request creates new connection and causes exchange of HTTP headers, they consume Bandwidth.

• Not Scalable

• Request hangs until a response is ready to be delivered.

• Old Server software won’t work with this approach as they hold the thread for each request.

Long-Polling Scalability

• It demands a server software that does not hold thread on server for each request.

• Instead move towards asynchronous event-driven server architecture

• For e.g Nginx, Netty, Node.js etc... Servers

• Addresses the C10K (Concurrent 10,000 connections) problem

Separate Upstream & Downstream connections• Downstream Connection.

• Is kept open between the server and the browser.

• Regular updates pushed through this connection.

• Messages are continuously parsed by the client as they arrive.

• Upstream Connection

• Browser makes Ajax requests to send commands (i.e events that trigger action) to server.

Separate Connections:Pros & Cons

• Pros

• Offers lowest latency.

• Best for streaming needs.

• Cons

• Uses 2 Half-Duplex connections to simulate Full-Duplex.

• HTTP is a request/response protocol (Half-Duplex), not bi-directional

• Co-ordination overheads between two connections.

• Some browsers may not support more than two simultaneous connections.

Enter WebSockets• Full-Duplex

• Exchange HTTP headers initially when the connection is established, after that its all data exchange.

• Uses less bandwidth.

• Significant Scalability with reduction in network traffic

• 100 clients.

• 100 * 10 clients.

• 100 * 10 * 10 clients.

Fun time! Lets create a

WebSocket connection

Check Browser Support• Use window.WebSocket to find out

• What to do if the browser does not support it?

• use polyfills (github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)

• SockJS

• Atmosphere jQuery Plugin (Fallback to LP)

• Socket.io

• web-socket-js (Flash based)

• Kaazing Websocket Gateway (Commercial)

• Graceful Websocket jQuery Plugin (Fallback to LP)

• jQuery Socket (Supports WebSocket, Server-Sent Events, Streaming and LP)

WebSocket ServersJava .NET Python Ruby PHP

Jetty SuperWebSocket websockify GoliathExtendible

Web Socket Server

jWebSocket Nugget pywebsocketsweb-socket-

ruby

Netty XSockets

GlassFish

Apache Active MQ

Tomcat

Architecture

WebServer

WebSocket Server

1

2

3

4

Request

Serve Static Resources

Initiate WebSocket Connection

Upgrade Connection

5 Send Data

6 Receive Data

Event driven on both sides of the WebSocket connection.

Async API

• Server Callbacks

• onopen - when the connection is established

• onclose - when the connection is closed

• onerror - when an error occurs

• onmessage - when a message is received from the server

• Client Transmissions

• send

How WS protocol works• When making a WS

connection, initiated by HTTP request, client sends a connection “upgrade” request.

• Server responds by upgrading the connection and switching protocols

• Handshake is complete when both client & server switch protocols

• After this, client and server can begin sending messages until

• either of them closes the connection

• there is some network problem

More fun!Using Jetty’s

WebSocketServlet.

Same-Origin Policy• Prevents client-Side Webapp running from one

origin to obtain data retrieved from another origin.

• Limits unsafe HTTP requests launched towards destinations that differ from the running application’s origin

• <script> element can execute content retrieve from foreign origins.

• Requires you to trust the server

• Bypass using JSONP

• Server needs to implement some logic to allow you to do this.

Cross-Origin Resource Sharing (CORS)

• Extends Same-Origin Policy

• Its a way of restricting the domains that can access services. 

• White-list domains that are allowed to access services

• The browser and in-browser applications are supposed to respect that, and sometimes the Services (server-side) may protect themselves.

• Use a CORS Filter

• Flash uses crossdomain.xml

Thank-you!

References• blog.caplin.com/2009/04/20/what-is-the-real-time-web/

• leggetter.co.uk/2012/04/22/websockets-realise-comet-theyre-not-an-alternative.html

• infrequently.org/2006/03/comet-low-latency-data-for-the-browser

• jstorimer.com/js/2009/01/12/what-the-heck-is-jsonp.html

• carloscarrasco.com/blog/posts/read/implementing-script-tag-long-polling-for-comet-applications

• en.wikipedia.org/wiki/Comet_(programming)

• en.wikipedia.org/wiki/C10k_problem

• tomcatexpert.com/blog/2012/04/24/websockets-tomcat-7

• github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

• Peter Lubbers, HTML5 WebSocket DZone Refcardz