HTML5 ADEO

Ch’ti JUG
HTML5 Communication
Building Real-Time
Applications with HTML5
Web Sockets
Ch'ti Java User Group
http://chtijug.org/

Peter Lubbers, Kaazing
10 December 2009

Copyright © Kaazing—License Creative Commons 2.0 France

Ch’ti JUG Qui C’est Ce Mec?
Peter Lubbers
• Director of documentation
and training at Kaazing
• Skills Matter and Zenika
HTML5 training courses
• Co-author Apress Book
Pro HTML5 Programming
(Spring 2010)
• Ultramarathon runner, blogger
runlaketahoe.blogspot.com

Ch’ti JUG
Agenda
• Introduction
• History of the real-time Web
• WebSocket and Server-Sent Events
• Cross-Document Messaging and
XHR Level 2
• Beyond WebSocket
• Questions?


Ch’ti JUG


Ch’ti JUG
Today’s Requirements
• Today’s Web applications demand
reliable, real-time communications with
near-zero latency
• Examples:
• Financial applications
• Social networking applications
• Online games
• Smart power grid


Ch’ti JUG
HTTP Limitations
• Until now, this has been cumbersome to
achieve, primarily due to the limitations
of HTTP
• HTTP is half-duplex (traffic flows in only
one direction at a time)
• HTTP is a stateless, request-driven
protocol


Ch’ti JUG
HTTP Limitations
• Header information is sent with each
HTTP request and response, which can
be an unnecessary overhead
• After a response is sent, the server may
choose to close the socket
• Rich Internet Applications (with Ajax,
Comet, Silverlight, and Flash) are
becoming richer, but still limited by
HTTP


Ch’ti JUG
Ajax and Comet
• Ajax (Asynchronous JavaScript and
XML) is a technique for building highly
interactive applications for the Web
• Content can change without loading the
entire page
• Ajax Delivers:
• User-perceived low latency
• Single page
• “Real-time” often achieved through
polling and long-polling (Comet)

Ch’ti JUG
Polling
• Polling is “nearly real-time”
• Sometimes used in Ajax applications to
simulate real-time communication
• Browser sends HTTP requests at regular
intervals and immediately receives a
response


Ch’ti JUG
Polling Architecture


Ch’ti JUG
Long Polling
• Also known as asynchronous-polling
• Browser sends a request to the server
and the server keeps the request open for
a set period.
• HTTP headers, present in both long-
polling and polling often account for
more than half of the network traffic.


Ch’ti JUG
Long Polling Architecture


Ch’ti JUG
Streaming
• More Efficient, but still not perfect
• Possible complications:
• Proxies and Firewalls
• Response builds up and must be flushed
periodically
• Cross-domain issues to do with browser
connection limits


Ch’ti JUG
Half-Duplex Architecture


Ch’ti JUG
Streaming Architecture


Ch’ti JUG
Current Approaches Are…

Fake Time!
Or: Not Really Time

Ch’ti JUG
Example of Polling in Action


Ch’ti JUG
HTTP Header Overhead


Ch’ti JUG Example HTTP Request
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

Ch’ti JUG
Example HTTP Response
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


Ch’ti JUG
HTTP Header Traffic Analysis
• Example network throughput for Polling
HTTP request and response headers:
• Use case A: 10,000 clients polling every 60
seconds:
• Network throughput is (871 x 10,000)/60 = 145,166
bytes = 1,161,328 bits per second (1.1 Mbps)
• Use case B: 10,000 clients polling every second:
• Network throughput is (871 x 10,000) = 8,710,000
bytes = 69,680,000 bits per second (66 Mbps)
• Use case C: 100,000 clients polling every 10
seconds:
• Network throughput is (871 x 100,000)/10 = 8710000
bytes = 69,680,000 bits per second (66 Mbps)

Ch’ti JUG
Network Throughput Comparison


Ch’ti JUG
Technology-Specific Problems
• AJAX
• Enables clients to asynchronously poll for
server-side events (at best)
• Polling leads to poor resource utilization on
both the client and server
• Comet
• Lack of a standard implementation
• Often requires complex techniques such as
multiplexing or managing multiple domains


Ch’ti JUG
Headache 2.0


Ch’ti JUG
Desktop vs. Browser
• Desktop Networking
• Full-duplex bidirectional TCP sockets
• Access any server on the network
• Browser Networking
• Half-duplex HTTP request-response
• HTTP polling, long polling fraught with
problems


Ch’ti JUG
Desktop Architecture


Ch’ti JUG
About HTML5
• HTML5 is the next set of W3C HTML
standards
• It offers new and enhanced features to
address new HTML primitives,
multimedia, offline use, communication,
and so on
• Many of the browser vendors have
already implemented several of these
features


Ch’ti JUG
HTML5 Features
• HTML5 includes a wide range of new
features, including:
• Canvas
• Workers
• Geolocation
• New form elements
• Offline storage
• Communication APIs
• And more…


Ch’ti JUG
HTML5 Communication
• WebSocket
• Proxy/Firewall-friendly text socket for
browsers
• Server-Sent Events
• Standardized HTTP streaming (downstream)
• XMLHttpRequest Level 2
• Cross-origin XMLHttpRequest
• Cross Document Messaging
• Secure inter-window (iframe)
communication

Ch’ti JUG
Part of the HTML5 Spec?
• Web Sockets—like other pieces of the
HTML5 effort such as Local Storage and
Geolocation—was originally part of the
HTML5 specification
• Moved to a separate standards document
to keep the specification focused
• Web Sockets has been submitted to the
Internet Engineering Task Force (IETF)
by its creators, the WHATWG


Ch’ti JUG HTML5 WebSockets
• HTTP-friendly TCP for the browser with
minimal framing
• Full-duplex bidirectional communication
• Operates over a single socket
• Distributed client-server architecture
• No browser plug-ins
• Traverses proxies and firewalls seamlessly
• Allows authorized cross-origin
communication


Ch’ti JUG
WebSocket Architecture


Ch’ti JUG HTML5 WebSockets

• Connection established by upgrading
from the HTTP protocol to the WebSocket
protocol using the same TCP connection
• WebSocket data frames can be sent back
and forth between the client and the
server in full-duplex mode


Ch’ti JUG HTML5 WebSocket Schemes
• WebSocket
ws://www.websocket.org/text
• WebSocket Secure
wss://www.websocket.org/encrypted-text


Ch’ti JUG
HTML5 WebSocket Handshake
GET /text HTTP/1.1rn
Upgrade: WebSocketrn
Connection: Upgradern
Host: www.websocket.orgrn
…rn

HTTP/1.1 101 WebSocket Protocol
Handshakern
Upgrade: WebSocketrn
Connection: Upgradern
…rn


Ch’ti JUG
HTML5 WebSocket Frames
• Text and binary frames can be sent full-duplex, in either
direction at any the same time
• Each frame of data:
• Starts with a 0x00 byte
• Ends with a 0xFF byte
• Contains UTF-8 data in between
• Text Frames use terminator
• x00Hello, WebSocket0xff
• Binary Frames use length prefix:
• x000x10Hello, WebSocket
• There is no defined maximum size
• If the user agent has content that is too large to be handled, it
must fail the Web Socket connection
• JavaScript does not allow >4GB of data, so that is a practical
maximum

Ch’ti JUG
Drastic Reduction in Network
Traffic
• With WebSocket, each frame has only 2
bytes of packaging (compare almost 500:1
or even 1000:1)
• No latency involved in establishing new
TCP connections for each HTTP message
• Remember the Polling HTTP header traffic
(66 Mbps network throughput for headers
alone)?


Ch’ti JUG
HTTP Header Traffic Analysis
• Example network throughput for
WebSocket HTTP request and response
headers:
• Use case A: 10,000 frames every 60 seconds:
• Network throughput is (2 x 10,000)/60 = 333 bytes =
2,664 bits per second (2.6 Kbps)
• Use case B: 10,000 frames every second:
• Network throughput is (2 x 10,000) = 20,000 bytes =
160,000 bits per second (156 Kbps)
• Use case C: 100,000 frames every 10 seconds:
• Network throughput is (2 x 100,000)/10 = 20,000
bytes = 160,000 bits per second (156 Kbps)


Ch’ti JUG
Overheard…
"Reducing kilobytes of data to 2
bytes…and reducing latency from 150ms
to 50ms is far more than marginal. In
fact, these two factors alone are enough
to make WebSocket seriously interesting
to Google.“
—Ian Hickson (Google, HTML5 spec lead)


Ch’ti JUG HTML5 WebSockets API

• Creating a WebSocket instance:
var myWebSocket = new WebSocket
(“ws://www.websocket.org”);


• Associating listeners
myWebSocket.onopen = function(evt) {
alert(“Connection open ...”); };
myWebSocket.onmessage =
function(evt) { alert( “Received
Message: ” + evt.data); };
myWebSocket.onclose = function(evt)
{ alert(“Connection closed.”); };



• Sending messages
myWebSocket.send(“Hello
WebSocket!”);
myWebSocket.close();


Ch’ti JUG
Browser Support
• Chromium support added just a few weeks
ago (nightly builds)
• Webkit activity


Ch’ti JUG
Native WebSocket in Chromium

:


Ch’ti JUG
HTML5 Server-Sent Events

• Standardizes and formalizes how a
continuous stream of data can be sent
from a server to a browser
• Introduces EventSource—a new
JavaScript API


Ch’ti JUG
SSE Architecture


Ch’ti JUG EventSource API

• Connects to a server URL to receive an event
stream:
var stream =
new EventSource("http://news.kaazing.com");

• Set event handlers:
stream.onopen = function() { alert(“open”); }
stream.onmessage = function(event) {
alert(“message: “ + event.data); }
stream.onerror = function() { alert(“error”);
}


Ch’ti JUG
Browser Support

• Partial support in Opera 9+
• Development in Firefox trunk


Ch’ti JUG
XMLHttpRequest Level 2
• XMLHttpRequest is the API that made Ajax
possible
• XMLHttpRequest Level 2 significantly
enhances XMLHttpRequest
• Improvements in the following areas:
• Progress events
• Cross-origin XMLHttpRequests


Ch’ti JUG
Progress Events
• XMLHttpRequest Level 2 supports named
progress events:
• loadstart
• progress
• abort
• error
• load
• loadend
• readyState property and
readystatechange events retained for
backward compatibility

Ch’ti JUG
Progress Events
• Progress events have fields for:
• The total amount of data to transfer
• The amount that has already transferred
• Whether the total is known (Boolean value)
• Example:
crossOriginRequest.upload.onprogress = function(e) {
var total = e.total;
var loaded = e.loaded;

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


Ch’ti JUG
Cross-Origin XMLHttpRequest
• XMLHttpRequest Level 2 allows for cross-
origin XMLHttpRequests using Cross
Origin Resource Sharing (CORS)
http://www.w3.org/TR/access-
control/
• Example:
var crossOriginRequest = new
XMLHttpRequest();
crossOriginRequest.open("GET",
"http://www.example.net/stockfeed",
true);


Ch’ti JUG Origin Security
• An origin is a subset of an address used for
modeling trust relationships on the Web
• Origins are made up of a scheme, a host, and
a port—different origin:
• https://www.example.com
• http://www.example.com
• The path is not considered in the origin
value—same origin:
• http://www.example.com/index.html
• http://www.example.com/page2.html


Ch’ti JUG Origin Security
• Cross-origin communication identifies the
sender by origin
• Allows receiver to ignore messages from
origins it does not trust or does not expect to
receive messages from (white list)
• Applications must opt-in to receiving
messages by adding an event listener for
message events
• No risk of messages interfering with an
unsuspecting application


Ch’ti JUG
Preflight Requests
• For sensitive actions (for example, a
request with credentials, or a request other
than GET or POST), an OPTIONS preflight
request is sent to the server to see if the
action is supported and allowed
• Successful communication may require a
CORS-capable server


Ch’ti JUG Cross-Origin HTTP Headers
• A cross-origin exchange between a page
hosted on www.example.com and a service
hosted on www.example.net (Request):
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/
Origin: http://www.example.com
Pragma: no-cache
Cache-Control: no-cache
Content-Length: 0


Ch’ti JUG
Cross-Origin HTTP Headers
• Cross-origin exchange between a page
hosted on www.example.com and a service
hosted on www.example.net (Response):
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


Ch’ti JUG
Cross-Origin XMLHttpRequest
• Allows you to build web applications that
use services hosted on different origins
• For example, a web application that used static
content from one origin and Ajax services from
another
• Allows client-side aggregation (the
ultimate mashup)


Ch’ti JUG
Client-Side Aggregation


Ch’ti JUG
Browser Support
• Latest versions of
• Firefox
• Chrome
• Safari


Ch’ti JUG Cross Document Messaging
• Enables secure cross-origin
communication across iframes, tabs, and
windows (using origin security)
• Defines the PostMessage API as a
standard way to send messages
• Provides asynchronous message passing
between JavaScript contexts


Ch’ti JUG Cross Document Messaging
• Can be accomplished by direct scripting
(a script running in one page tries to
manipulate another document), but
may not be allowed due to security
restrictions


Ch’ti JUG PostMessage Overview


Ch’ti JUG HTML5 PostMessage
• Allows you to communicate between
documents served by different origins
• Also handy for same-origin messaging,
because it provides a consistent, easy to use
API (for example, HTML5 Web Workers)


Ch’ti JUG HTML5 PostMessage
• Sending a message:
myFrame.contentWindow.postMessage
('Hello, world',
'http://www.example.com/');


Ch’ti JUG
HTML5 PostMessage
• Listening for messages:
window.addEventListener(“message”, messageHandler,
true);
function messageHandler(e) {
switch(e.origin) {
case “friend.example.com”:
// process message
processMessage(e.data);
break;
default:
// message origin not recognized
// ignoring message
}
}

Ch’ti JUG
Browser Support
• Firefox 3.5 and greater
• Safari 4.0 and greater
• Chrome 2.0 and greater
• Opera 9.6 and greater
• Internet Explorer 8 (supports cross-frame
but not cross-window messaging)


Ch’ti JUG
Extending HTML5 WebSockets
• Once you have a bi-directional, full-
duplex socket connection, you can do all
kinds of great things in a browser
• Any TCP-based protocol works over
WebSocket
• JMS, AMQP, STOMP, XMPP, IMAP, AMQP,
IRC, and more
• Custom Protocols
• Binary Protocols
• Encode Binary as Text


Ch’ti JUG
Stomp Example
• Streaming Text Oriented Messaging
Protocol
• Connect to a message broker to
publish and subscribe to channels and
topics
• Example message brokers that
support Stomp:
• RabbitMQ
• ActiveMQ
• More

Ch’ti JUG Stomp Protocol
Stomp commands Server frames
• ABORT • ERROR
• ACK • MESSAGE
• BEGIN • RECEIPT
• COMMIT
• CONNECT
Example Stomp frame:
• DISCONNECT
CONNECTn
• SEND login: <username>n
• SUBSCRIBE passcode:<passcode>n
• UNSUBSCRIBE n
^@


Ch’ti JUG
Example Stomp Client
• Stomp Client
var myStomp = new StompClient();
myStomp.onopen =
function(headers) {
myStomp.subscribe(“/topic/destination”);
}
myStomp.onmessage =
function(headers, body) { alert(body); }
myStomp.connect(“ws://www.websocket.org/stomp”);
myStomp.send(“Hello STOMP!”,
“/topic/destination”);


Ch’ti JUG
Kaazing WebSocket Gateway
• Enterprise Grade WebSocket server
• Seamlessly and reliably extends any TCP-
based business messaging protocol to the
Web with ultra high performance and
minimal latency
• Requires no third-party browser plug-in or
client-side installation
• Provides emulation for older browsers so
you can code against the new standards
today


Ch’ti JUG
Browser Certification
• Supports native HTML 5
Communications (when available) as well
as emulation for current browsers
• Certified Browser Versions:
• Apple Safari 3.0+
• Google Chrome 1.0+
• Microsoft Internet Explorer 5.5+
• Mozilla Firefox 1.5+
• Opera 9.5+


Ch’ti JUG
Client Libraries
• Stomp and the Stomp-JMS Adapter
• AMQP
• XMPP (Jabber)
• IRC
• Darkstar
• More added all the time


Ch’ti JUG
Client Library Technologies
• JavaScript
• Adobe Flex (Flash)
• Microsoft Silverlight (Kaazing is a
Microsoft Silverlight partner)
• Java and JavaFX (Kaazing is a Sun
Microsystems partner)


Ch’ti JUG
Financial Applications


Ch’ti JUG
Earth Control Game
http://apps.facebook.com/earthcontrol


Ch’ti JUG
Chess Vegas
http://www.chessvegas.com/


Ch’ti JUG
Degony Game
http://www.degony.com


Ch’ti JUG Important Links
• Kaazing Website:
www.kaazing.com
• Kaazing Technology Network:
http://tech.kaazing.com/
• Download Kaazing WebSocket Gateway:
http://www.kaazing.com/download
• “When can I use” site:
http://a.deveria.com/caniuse/
• Skills Matter:
www.skillsmatter.com
• Zenika:
http://www.zenika.com

Ch’ti JUG

Question 1
Win a jQuery book


Ch’ti JUG

What does “Stomp” stand for?


Ch’ti JUG

Question 2
Win a jetBrains license


Ch’ti JUG

Which browser supports
WebSockets natively?


Ch’ti JUG

Raffle (Tombola)
Win an iPod Touch
Sponsored by:


Ch’ti JUG Cocktail

• Merci pour votre attention
• Merci au Groupe ADEO pour son
sponsoring


Ch’ti JUG Licence
• Les photos et logos appartiennent à leurs
auteurs respectifs
• Le contenu de la présentation est sous
licence Creative Commons 2.0 France
• Contrat Paternité
• Pas d'Utilisation Commerciale
• Partage des Conditions Initiales à
l'Identique
• http://creativecommons.org/licenses/by-
nc-sa/2.0/fr/


HTML5 ADEO

More Related Content

What's hot (14)

Viewers also liked (8)

Similar to HTML5 ADEO (20)

More from Ch'ti JUG (8)

Recently uploaded (20)

HTML5 ADEO

Editor's Notes