HTML5 Real-Time and Connectivity

HTML5 Real-Time and
Connectivity

@peterlubbers
Kaazing
Creators of WebSocket WebSocket Gateway

High Performance HTML5 Training

1 Copyright © 2012 Kaazing Corporation. All Rights Reserved. Illustration by Will Phillips Jr.

About @peterlubbers

 Sr. Director Technical Communication
Kaazing (we’re hiring)
 Author, Pro HTML5 Programming
 HTML5… it’s how I roll

2 Copyright © 2012 Kaazing Corporation. All Rights Reserved.

Agenda

 Web Origin Concept
 Cross Document Messaging #sfhtml5
@peterlubbers
 CORS
XMLHttpRequest Level 2
WebSocket
 Server-Sent Events
 SPDY


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

8 Copyright © 2012 Kaazing Corporation. All Rights Reserved. Credit: 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


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


Origin Quiz (Win a Book)

Which URLs have the same Origin?
1. http://www.example.com/index.html
2. https://www.example.com/index.html
3. http://img.example.com/html5.png
4. http://www.example.com:8080/page2.html
5. 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 PostMessageAPI to send messages
(also used in Web Workers)
 Pass messages asynchronously between
JavaScript contexts
 Demo: DZSLides (Paul Rouget, Mozilla):
http://paulrouget.com/dzslides/


PostMessage Architecture


Using PostMessage

Sending a message
JavaScript

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

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


Using PostMessage

Processing a message
JavaScript

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

function messageHandler(e) {
if (e.origin == "http://portal.example.com") {
processMessage(e.data);
}
// ignore message if origin not recognized
}


Handlewith Care

 Warning: “Use of this API requires extra care to
protect users from hostile entities abusing
a site for their own purposes” —WHATWG Spec
http://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)


Using a Whitelist

JavaScript

varallowedOrigins = ["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);


Browser Support

Native Emulation
 Chrome 2.0+  EasyXDM
 Firefox 3.5+ http://easyxdm.net/
 IE 8.0+  KaazingWebSocket

 Opera 9.6+
Gateway
 Safari 4.0+ http://caniuse.com/#search=postmessage


CORS

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 Originheader
• Contains the request’s origin
• Produced by the browser
• Cannot be changed by application code
• Differs from referer[sic]: refereris a complete
URL (can include full path)
 Originating page’s server must approve
(Access-Control-Allow-* headers)


CORS vs. Same Origin


Origin Header (Client Request)

HTTP

POST /main HTTP/1.1
Host: www.example.net
User-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.3
Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,*
/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://www.example.com/path
Origin: http://www.example.com
Pragma: no-cache

Access Control Headers (Server Response)

HTTP

HTTP/1.1 201 Created
Transfer-Encoding: chunked
Server: Kaazing Gateway
Date: Mon, 02 Nov 2009 06:55:08 GMT
Content-Type: text/plain
Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Credentials: true


Browser Support

Native Server Support:
 Chrome 4.0+  Use a CORS-aware
 Firefox 3.5+
server
 Add Access-Control-
 Safari 4.0+
Allow-Origin header
 IE 8+* 10+ to server config.
 Opera 12+ http://caniuse.com/#search=CORS

*partial via XDomainRequest

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/


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
JavaScript
crossOriginRequest.upload.onprogress = function(e) {
var total = e.total;
var loaded = e.loaded;

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


Cross-Origin XMLHttpRequest

JavaScript

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

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


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/

JavaScript

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


Browser Support: XHR Level 2

Native  IE 8+ supports XDR
 Chrome 2.0+  Server side
 Firefox 3.5+ participation may be
 Safari 4.0+
required (CORS)
 Opera 12+
http://caniuse.com/#search=XMLHTTPRequest
 IE 8+* 10+

*partial via XDomainRequest

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 Request Headers

Client

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


HTTP Response Headers

Server

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

• Total overhead: 871 bytes (example)
• Often 1.5K+ bytes (for example,
cookie data)
• Overhead is expensive!


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 long
to 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://


Using the WebSocket API

JavaScript

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

// Associate listeners
mySocket.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);
};


Using the WebSocket API

JavaScript

// Sending data
mySocket.send("WebSocket Rocks!");

// Close WebSocket
mySocket.close();


Checking for Feature Support

JavaScript

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";
}


WebSocket History

 Originally added to HTML5 Spec as
TCPConnection
 Moved to its
own specification


WebSocket Protocol History

“draft-hixie-thewebsocketprotocol-xx” IETF Network Working Group
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-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

WebSocket Handshake


WebSocket Frames

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


WebSocket Frames

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

FIN bit, MASK bit,
RSV bits, Op- payload mask payload
Code length

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

83 0B F3 E2 A4
XOR CB 6E 9F 8E CB
-- -- -- -- --
48 65 6C 6C 6F
H ello


WebSocket Frames

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

FIN bit, MASK bit,
RSV bits, Op- payload payload
Code length

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


WebSocket Efficiency

HTTP WebSocket
Overhead 100s of bytes 2-6 bytes (typical)
Latency New connection None: Use existing
each time connection
Latency Wait for next No waiting
(polling) interval
Latency None, if request No waiting
(long polling) sent earlier
+ time to set up
next request


Polling vs. WebSocket


WebSocket Latency Benchmark

Using Comet Using WebSocket

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


Browser Support

Native: Emulation:
• Chrome 4+ • KaazingWebSocket
• Safari 5+ Gateway
• Firefox 4+ • socket.io

• Opera 10.7+ • SockJS

• Internet Explorer 10+ • web-socket.js (Flash)
http://caniuse.com/#search=WebSocket


WebSocket Servers and Client Libraries

 Kaazing  Misultin Client Libraries
 Socket.io (node.js)  Cowboy  Web-socket-js (JavaScript)
 Apache-websocket  YAWS  AS3 WebSocket (ActionScript)
 Cramp  Juggernaut  .NET WebSocket client (.NET)
 Nowjs  PHP Websocket  Anaida (.NET)
 SockJS  websockify  WebSocket Sharp (.NET)
 SuperWebSocket  ActiveMQ  Silverlight WebSocket client
 Jetty  HornetMQ  Java WebSocket Client
 Atmosphere  phpwebsocket  Arduino C++ WebSocket client
 APE Project  Protocol::WebSocket  Ruby-web-socket
 Xsockets  em-websocket  ZTWebSocket (Objective-C)
 Orbited  Jwebsocket  Libwebsockets (C)
 Atmosphere  WaterSprout Server
 Autobahn  Pywebsocket
 CouchDB  And more…


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


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 proxies
3. Squid proxies
4. 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


Using the EventSource API

JavaScript

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");
}}};


Example: News Broadcast

http://kaazing.me/

Browser Support

Native: Emulation:
• Chrome 6+ • EventSource.js (Remy
• Safari 5+ Sharp)
• Firefox 6+ http://goo.gl/FyanG
• Opera 10.6+ • KaazingWebSocket
Gateway
http://caniuse.com/#search=eventsource

?

SPDY

Pronounce: ˈspēdē
-


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 for
subdomains, 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 out
in 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 HTTPredirectHTTPS
• 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


Questions?

• E-mail: peter.lubbers@kaazing.com
• Twitter: @peterlubbers
• LinkedIn: Peter Lubbers

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


Buy the Book!

• Pro HTML5 Programming (Apress, 2011)
• 50% off e-book coupon code:
50OFFHTML5
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/

Get Trained!

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


-

Quiz Answers

 Origins 1 and 6 are the same
 Transparent Proxies


HTML5 Real-Time and Connectivity

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML5 Real-Time and Connectivity

Similar to HTML5 Real-Time and Connectivity (20)

More from Peter Lubbers

More from Peter Lubbers (8)

Recently uploaded

Recently uploaded (20)

HTML5 Real-Time and Connectivity

Editor's Notes