HTML5 Real-Time and Connectivity

Copyright © 2012 Kaazing Corporation. All Rights Reserved.1

High Performance

Creators of WebSocket

HTML5 Training

WebSocket Gateway

HTML5 Real-Time and Connectivity

@peterlubbersKaazing

Illustration by Will Phillips Jr.


About @peterlubbers

Sr. Director Technical CommunicationKaazing (we’re hiring)

Author, Pro HTML5 Programming HTML5… it’s how I roll


Agenda

Web Origin Concept Cross Document Messaging CORS XMLHttpRequest Level 2 WebSocket Server-Sent Events SPDY

#sfhtml5@peterlubbers


HTML5 Feature Areas

"HTML5 should not be considered as a whole. You should cherry-pick the technology that suits the

solution to your problem.”—Remy Sharp (Co-Author Introducing HTML5)


HTML5 Feature Areas


Tonight’s Focus


HTML5 Paves the Cow Paths

HTML5 takes a pragmatic approach, fixing real-world problems

Especially true for connectivity features


Web Origins

Credit: http://singleorigin.com.au/

http://singleorigin.com.au/


Web Origin Concept

Web Origin Concept RFC 6454: http://www.ietf.org/rfc/rfc6454.txt

An Origin is a subset of an address used for modeling trust relationships on the web

Origins consist of a scheme, a host, and a port:• Scheme: http:, https:, ws:, wss:• Host: www.example.com, img.example.com, 192.0.2.10

• Port: 80, 443

http://www.ietf.org/rfc/rfc6454.txt


Same-Origin Policy

“Generally speaking, documents retrieved from distinct origins are isolated from each other” –W3C http://www.w3.org/Security/wiki/Same_Origin_Policy

Browsers prevent a script or document loaded from one origin from communicating with a document loaded from another origin

Original security model for HTML• Introduced in Netscape Navigator 2.0• Too limiting in this age of client-side web apps

http://www.w3.org/Security/wiki/Same_Origin_Policy


Origin Quiz (Win a Book)

Which URLs have the same Origin?1. http://www.example.com/index.html2. https://www.example.com/index.html3. http://img.example.com/html5.png4. http://www.example.com:8080/page2.html5. http://192.0.2.10:80/index.html*6. http://www.example.com/about.html

* Where 192.0.2.10 resolves to www.example.com


Cross Document Messaging


Cross Document Messaging

Enables secure cross-origin communication across iframes, tabs, and windows

Uses Origin security Defines PostMessage API to send messages

(also used in Web Workers) Pass messages asynchronously between

JavaScript contexts Demo: DZSLides (Paul Rouget, Mozilla):

http://paulrouget.com/dzslides/

http://paulrouget.com/dzslides/


PostMessage Architecture


myFrame.contentWindow.postMessage('Hello, world', 'http://www.example.com/');

JavaScript

Using PostMessage

myFrame.contentWindow destination http://www.example.com target origin

Sending a message


window.addEventListener("message", messageHandler, true);

function messageHandler(e) { if (e.origin == "http://portal.example.com") {

processMessage(e.data); } // ignore message if origin not recognized}

JavaScript

Using PostMessage

Processing a message


Handle with Care

Warning: “Use of this API requires extra care to protect users from hostile entities abusing a site for their own purposes” —WHATWG Spechttp://goo.gl/en4l0

Receiver should decide to process messages based on a whitelist of trusted origins

Also treat message data with caution (even from trusted sources)

http://goo.gl/en4l0


var allowedOrigins = ["http://portal.example.com/", "http://games.example.com:8000/"];

function messageHandler(e) { if(allowedOrigins.indexOf(e.origin) >= 0) { processMessage(e.data); } // index will be -1 for unrecognized origins}

Window.addEventListener("message", messageHandler, true);

JavaScript

Using a Whitelist


Browser Support

Native Chrome 2.0+ Firefox 3.5+ IE 8.0+ Opera 9.6+ Safari 4.0+

Emulation EasyXDM

http://easyxdm.net/ Kaazing WebSocket

Gateway

http://caniuse.com/#search=postmessage

http://easyxdm.net/

http://caniuse.com/%23search=postmessage

http://caniuse.com/%23search=postmessage


CORS

enable-cors.org

http://enable-cors.org/




Working with Multiple Origins

JSON with Padding (JSONP)• JSON data in executable Javascript wrapper• <script> is exempt from single-origin policy• Avoid if possible (vulnerable)

HTML5 introduces Cross-Origin Resource Sharing (CORS)

CORS allows exemptions from the Same-Origin Policy

“With XHR and CORS, you receive data instead of code, which you can parse safely”—Frank Salim


Cross-Origin Requests

Have an Origin header • Contains the request’s origin• Produced by the browser• Cannot be changed by application code• Differs from referer [sic]: referer is a complete

URL (can include full path) Originating page’s server must approve

(Access-Control-Allow-* headers)


CORS vs. Same Origin


POST /main HTTP/1.1Host: www.example.netUser-Agent: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1.3) Gecko/20090910 Ubuntu/9.04 (jaunty) Shiretoko/3.5.3Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveReferer: http://www.example.com/pathOrigin: http://www.example.comPragma: no-cache

HTTP

Origin Header (Client Request)


HTTP/1.1 201 CreatedTransfer-Encoding: chunkedServer: Kaazing GatewayDate: Mon, 02 Nov 2009 06:55:08 GMTContent-Type: text/plainAccess-Control-Allow-Origin: http://www.example.comAccess-Control-Allow-Credentials: true

Access Control Headers (Server Response)

HTTP


Browser Support

Native Chrome 4.0+ Firefox 3.5+ Safari 4.0+ IE 8+* 10+ Opera 12+

*partial via XDomainRequest

Server Support: Use a CORS-aware

server Add Access-Control-

Allow-Origin headerto server config.

http://caniuse.com/#search=CORS

http://caniuse.com/%23search=CORS

http://caniuse.com/%23search=CORS


XMLHttpRequest Level 2


XMLHttpRequest Level 2 Improvements

XMLHttpRequest (XHR) made Ajax possible Level 2 significantly enhances XMLHttpRequest

• Progress events• Cross-origin XMLHttpRequest• Binary support

Specification:• http://www.w3.org/TR/XMLHttpRequest/

http://www.w3.org/TR/XMLHttpRequest/


Progress Events

In the past: inconsistently implemented across browsers e.g. readyState 3 (progress) never fires in IE XMLHttpRequest Level 2 adds progress events:

• loadstart• progress• abort• error• load• loadend

readyState property and readystatechange events retained for backward compatibility


Progress Events

Fields for:• The total amount of data to transfer• The amount that has already transferred (use new

HTML5 progress element)• Whether the total is known

crossOriginRequest.upload.onprogress = function(e) { var total = e.total; var loaded = e.loaded;

if (e.lengthComputable) { // do something with the progress information }}

JavaScript


Cross-Origin XMLHttpRequest

* Requires CORS-enabled server (to handle origin and Access Control headers)

//from http://www.example.comvar crossOriginRequest = new XMLHttpRequest();crossOriginRequest.open("GET", "http://www.example.net/stockfeed", true);

JavaScript


Binary Data

Supports Blob and ArrayBuffer (aka Typed Array) objects Good for for WebGL, programmable audio, etc. Demo:

http://www.html5rocks.com/en/tutorials/file/xhr2/

//Sending a Typed Array of bytesvar a = new Uint8Array([8,6,7,5,3,0,9]);var xhr = new XMLHttpRequest();xhr.open("POST", "/data/", true)xhr.send(a.buffer);

JavaScript




Browser Support: XHR Level 2

Native Chrome 2.0+ Firefox 3.5+ Safari 4.0+ Opera 12+ IE 8+* 10+

IE 8+ supports XDR Server side

participation may be required (CORS)

http://caniuse.com/#search=XMLHTTPRequest

*partial via XDomainRequest

http://caniuse.com/%23search=XMLHTTPRequest

http://caniuse.com/%23search=XMLHTTPRequest


WebSocket


If You Want to Build Web Apps for…

Financial trading Social networking Gaming Gambling System monitoring RFID tracking … WebSocket will be useful


Previous Approaches

Comet and Reverse Ajax Based on HTTP HTTP is stateless

and half-duplex


Overhead

HTTP is stateless, results in HTTP header overhead Example:

• Type one character: ~1500 characters exchanged Example:

http://syntensity.com/static/espeak.html

http://syntensity.com/static/espeak.html


GET /PollingStock//PollingStock HTTP/1.1Host: localhost:8080User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-usAccept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveReferer: http://localhost:8080/PollingStock/Cookie: showInheritedConstant=false; showInheritedProtectedConstant=false; showInheritedProperty=false; showInheritedProtectedProperty=false; showInheritedMethod=false; showInheritedProtectedMethod=false; showInheritedEvent=false; showInheritedStyle=false; showInheritedEffect=false;

HTTP Request Headers

Client


HTTP Response Headers

• Total overhead: 871 bytes (example)• Often 1.5K+ bytes (for example,

cookie data)• Overhead is expensive!

HTTP/1.x 200 OKX-Powered-By: Servlet/2.5Server: Sun Java System Application Server 9.1_02Content-Type: text/html;charset=UTF-8Content-Length: 321Date: Sat, 07 Nov 2009 00:32:46 GMT

Server


Upload/Download Ratios

Most users have Internet connections where upload to download ratios are between 1:4 and 1:20

• Result: 500 byte HTTP request header request could take as longto upload as 10 kB of HTTP response data takes to download


Enter WebSocket

W3C API (Javascript) IETF Protocol Full-duplex (bi-

directional), single socket

Shares port with existing HTTP content

Schemes: ws:// and wss://


//Create new WebSocketvar mySocket = new WebSocket("ws://www.WebSocket.org");

// Associate listenersmySocket.onopen = function(evt) { };mySocket.onclose = function(evt) { alert("closed w/ status: " + evt.code};};mySocket.onmessage = function(evt) { alert("Received message: " + evt.data);};mySocket.onerror = function(evt) { alert("Error);};

JavaScript

Using the WebSocket API


// Sending datamySocket.send("WebSocket Rocks!");

// Close WebSocketmySocket.close();

JavaScript

Using the WebSocket API


var status = document.getElementById("support");if (window.WebSocket) { // or Modernizr.websocket status.innerHTML = "HTML5 WebSocket is supported";} else { status.innerHTML = "HTML5 WebSocket is not supported";}

JavaScript

Checking for Feature Support


WebSocket History

Originally added to HTML5 Spec as TCPConnection

Moved to its own specification


WebSocket Protocol History

Version Date Details

-00 Jan. 9 2009 • Initial version

-52 Oct. 23 2009 • Subprotocol concept introduced

-76 May 6 2010 • Used in older browsers (FF4, etc.)

“draft-hixie-thewebsocketprotocol-xx” IETF Network Working Group

“draft-ietf-hybi-thewebsocketprotocol-xx” (IETF HyBi Working Group)

Version Date Details

-01 Aug. 31 2010 • Added binary format

-04 Jan. 11 2011 • Introduced data masking to address proxy server security issue

• Introduced including protocol version number in handshake

RFC 6455 Dec. 2011 • Final version http://tools.ietf.org/html/rfc6455

http://tools.ietf.org/html/rfc6455


WebSocket Handshake


WebSocket Frames

• Have a few header bytes• Text or binary data• Frames are masked from client to server


WebSocket Frames

Wireshark Trace of WebSocket Basics Lab Message (Client to Server)

81 85 CB 6E 9F 8E 83 0B F3 E2 A4

83 0B F3 E2 A4XOR CB 6E 9F 8E CB -- -- -- -- -- 48 65 6C 6C 6F H e l l o

FIN bit, RSV bits, Op-

Codemask payload

MASK bit, payloadlength


WebSocket Frames

81 05 48 65 6C 6C 6F H e l l o

FIN bit, RSV bits, Op-

Codepayload

MASK bit, payloadlength

Wireshark Trace of WebSocket Basics Lab Message (Server to Client)


WebSocket Efficiency

HTTP WebSocketOverhead 100s of bytes 2-6 bytes (typical)Latency New connection

each timeNone: Use existing connection

Latency (polling)

Wait for next interval

No waiting

Latency(long polling)

None, if request sent earlier+ time to set up next request

No waiting


Polling vs. WebSocket


WebSocket Latency Benchmark

Using Comet Using WebSocket

http://webtide.intalio.com/2011/09/cometd-2-4-0-websocket-benchmarks/

http://webtide.intalio.com/2011/09/cometd-2-4-0-websocket-benchmarks/


Browser Support

Native:• Chrome 4+• Safari 5+• Firefox 4+• Opera 10.7+• Internet Explorer 10+

http://caniuse.com/#search=WebSocket

Emulation:• Kaazing WebSocket

Gateway• socket.io• SockJS• web-socket.js (Flash)

http://caniuse.com/%23search=WebSocket

http://caniuse.com/%23search=WebSocket


WebSocket Servers and Client Libraries

Kaazing Socket.io (node.js) Apache-websocket Cramp Nowjs SockJS SuperWebSocket Jetty Atmosphere APE Project Xsockets Orbited Atmosphere Autobahn CouchDB

Misultin Cowboy YAWS Juggernaut PHP Websocket websockify ActiveMQ HornetMQ phpwebsocket Protocol::WebSocket em-websocket Jwebsocket WaterSprout Server Pywebsocket And more…

Client Libraries Web-socket-js (JavaScript) AS3 WebSocket (ActionScript) .NET WebSocket client (.NET) Anaida (.NET) WebSocket Sharp (.NET) Silverlight WebSocket client Java WebSocket Client Arduino C++ WebSocket client Ruby-web-socket ZTWebSocket (Objective-C) Libwebsockets (C)


Extending WebSocket

Once you have WebSocket, you can extend client-server protocols to the web: Chat: XMPP (Jabber), IRC Pub/Sub (Stomp/AMQP) VNC (RFB) Any TCP-based protocol

Browser becomes a first-class network citizen Real-world intermediaries can mess with traffic

(best practice is to use WebSocket Secure)


WebSocket and (Dreaded) Proxy Servers

http://www.infoq.com/articles/Web-Sockets-Proxy-Servers

http://www.infoq.com/articles/Web-Sockets-Proxy-Servers


ws:// and wss:// schemes


Traditional Architecture


WebSocket Architecture

100% Hipster


Quiz (Win a Book)

Which has more trouble with an unencrypted (ws://) connection?

1. Transparent proxies 2. Explicit proxies3. Squid proxies4. Firewalls


Server Sent Events


Server-Sent Events

Standardizes sending a continuous stream of data from server to browser

Compatible with most setups using HTTP EventSource API Great for newsfeeds, one-way stream of

data SSE-specific features:

• Automatic reconnection• Event IDs


SSE Architecture


if (!!windows.EventSource) { // or Modernizr.eventsource var stream = new EventSource("http://example.com"); //Events stream.onopen = function() { log("open"); } stream.onmessage = function(evt) { log("message: " + evt.data); } stream.onerror = function(evt) { if (evt.eventPhase != EventSource.CLOSED) { log("error"); }}};

JavaScript

Using the EventSource API


Example: News Broadcast

http://kaazing.me/

http://kaazing.me/

http://kaazing.me/


Browser Support

Native:• Chrome 6+• Safari 5+• Firefox 6+• Opera 10.6+

Emulation:• EventSource.js (Remy

Sharp)http://goo.gl/FyanG

• Kaazing WebSocket Gateway

http://caniuse.com/#search=eventsource

?

http://goo.gl/FyanG

http://caniuse.com/%23search=eventsource

http://caniuse.com/%23search=eventsource


SPDY

Pronounce: \ˈspē-dē\

S P D Y


SPDY

Not an acronym (name shows how compression can help improve speed: SPeeDY)

New Application Layer Protocol to “make the web faster”• Reduce page load

times by ~50%• Augments HTTP

(Not a replacement)• Uses HTTP-like

request-response setup


SPDY Features

HTTP header compression (85%-88% reduction) Always over TLS Next Protocol Negotiation (NPN) Request

prioritization Server push Multiplex

logical HTTP (or WebSocket)


SPDY Advantages

Better than HTTP pipelining• Not on by default, difficult to deploy• Head of Line Blocking issues

Single TCP connection(works around connection limits per origin, less need forsubdomains, Data URIs


Why use TLS/port 443?

Encrypted tunnel allows traversal of intermediaries

Less overhead than originally thought You need secure communication anyway Using standard, open ports has a big advantage"We want some chance of

getting this protocol outin our live time”—Roberto Peon (Google)


SPDY in Chrome

Default (95% of the time) WebSocket over SPDY, use command line

switch in Google Chrome:--enable-websocket-over-spdy

chrome://net-internals/#spdy


SPDY in Firefox

Since version 11 preference in about:config: network.http.spdy.enabled

Default in version 13


HTTP Strict Transport Security

Forces browser to use HTTPS• Not simply HTTPredirectHTTPS• Address rewritten before request

Enable with Strict-Transport-Security header

Browser support: FF4+, Chrome References:

• mikewest.org/2011/10/http-strict-transport-security-and-you• tools.ietf.org/html/draft-ietf-websec-strict-transport-sec-02

http://mikewest.org/2011/10/http-strict-transport-security-and-you

http://tools.ietf.org/html/draft-ietf-websec-strict-transport-sec-02


Questions?

• E-mail: [email protected]• Twitter: @peterlubbers• LinkedIn: Peter Lubbers

mailto:[email protected]

http://twitter.com/peterlubbers

http://www.linkedin.com/in/peterlubbers


Announcing the HTML5 Code Labs

Series of three Code Labs:• March 7• April 10• May 5 (HTML Cinco!)

In conjunction with GTUGSF Sign up:

http://GTUGsf.com/HTML5

http://GTUGsf.com/HTML5


Buy the Book!

• Pro HTML5 Programming (Apress, 2011)• 50% off e-book coupon code:

50OFFHTML5http://goo.gl/Dzq4A

http://goo.gl/Dzq4A


Additional Resources

Scheme host port blog (Adam Barth):http://www.schemehostport.com/

SPDY Essentials (Google Tech Talk):http://goo.gl/IcVdF

Breaking the Cross Domain Barrier (Alex Slexton):http://goo.gl/IcVdF

SPDY whitepaper:http://dev.chromium.org/spdy/spdy-whitepaper

XHR Level 2 Article (Eric Bidelman):http://www.html5rocks.com/en/tutorials/file/xhr2/

HTML5 Weekly:http://html5weekly.com/

The Web Ahead Podcasts:http://5by5.tv/webahead/

http://www.schemehostport.com/

http://goo.gl/IcVdF

http://goo.gl/IcVdF

http://goo.gl/IcVdF

http://dev.chromium.org/spdy/spdy-whitepaper

http://dev.chromium.org/spdy/spdy-whitepaper



http://html5weekly.com/

http://html5weekly.com/

http://5by5.tv/webahead/

http://5by5.tv/webahead/


Get Trained!

Proven, practical worldwide HTML5 Training (from experts, not just trainers):• E-mail us: [email protected]• Web site: http://kaazing.com/training/

http://tech.kaazing.com/training/

http://kaazing.com/training/


-


Quiz Answers

Origins 1 and 6 are the same Transparent Proxies

HTML5 Real-Time and Connectivity

Technology

Transcript of HTML5 Real-Time and Connectivity