HTML5 Real-Time and Connectivity

High Performance

Creators of WebSocket

HTML5 Training

WebSocket Gateway

@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/

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.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

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/

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)

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

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

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)

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

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

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

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

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

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/

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)

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

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/

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

Pronounce: \ˈspē-dē\

S P D Y

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

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:

50OFFHTML5http://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

Technology

Transcript of HTML5 Real-Time and Connectivity

Boost JBoss AS7 with HTML5 WebRTC for Real Time Communications

The HTML5 Connectivity Revolution @peterlubbers. License plate: @peterlubbers.

Mobile Thirst 8: Mobile connectivity in the real world

Real-Time Inquiry Connectivity Specifications

Harnessing the Power of HTML5 Web Sockets to Create Scalable Real-Time Applications Presentation

The HTML5 Connectivity Revolution @peterlubbers

Microsoft’s Browser Roadmap€¦ · HTML5 Geolocation HTML5 History API HTML5 Parser HTML5 Sandbox HTML5 Selection HTML5 semantic elements HTML5 track HTML5 video and audio JavaScript

Telemetry: connectivity and productivity in real time ...

Hire html5 developer for html5 development and html5 game development

(Hyper)Connectivity: Does it have any real effects? The ... · (hyper)connectivity experienced through SNS and Facebook specifically. Even though the concept of (hyper)connectivity

Inferring genetic connectivity in real populations, exemplified ...Inferring genetic connectivity in real populations, exemplified by coastal and oceanic Atlantic cod Ingrid Spies

Khoi Ngo Nguyen HTML5 OVERVIEW. Outline History about HTML & HTML5 Advantage & Disadvantage of HTML5 HTML5 Overview HTML5 Training Plan Introduction Q&A.

Why Internet Connectivity is Crucial to Commercial Real Estate

Pushing real time data using HTML5 Web SocketsPushing real time data using HTML5 Web Sockets Nikolai Qve ander August 17, 2010 Master’s Thesis in Computing Science, 30 credits Supervisor

X12 837 Real-Time Claim Submission & Connectivity ... · X12 837 Real-Time Claim Submission & Connectivity Specifications . Highmark, Inc ... e.g., separator ... Real-time claim transactions

HTML5-CanIuse 1 HTML5-Tags Ordered Alphabetically 6 HTML5 ...vb-net.com/TrudoPoisk/HTML5-DOC-2.pdf · HTML5-CanIuse 1 HTML5-Tags Ordered Alphabetically 6 HTML5-Element Reference 12

HTML5 API's: Hero, Villain and your usage in real applications

Silverlight vs HTML5 - Lessons learned from the real world...

FOWA 2012: Native, HTML5, and Hybrid Mobile App Development: Real-Life Experiences - Eran Zinman

1 Real SQL Programming Embedded SQL Java Database Connectivity Stored Procedures.