The HTML5 Connectivity Revolution
@peterlubbers

License plate: @peterlubbers

Image: @rdclark

Image: @jeffreypalermo

• A is for Applications
• B is for Bi-Directional
• C is for Connectivity
#devcon5
@peterlubbers
#html5

• June 2004 W3C Meeting in San Jose, California:
– Discussion about the rise of web applications
– Vote on updating HTML for web applications:
 8 For
 14 Against
• Result:
– Web Hypertext Application
Technology Working Group
(WHATWG) formed 2 days later
– Web Applications 1.0  HTML5

HTML5 Feature Areas

Native Support:
• http://caniuse.com
• http://mobilehtml5.org/
Polyfills (emulation):
• Modernizr’s All in One page: http://goo.gl/szvyv

• A pragmatic approach
• Fix real-world problems
• Especially true for
Connectivity features

Yes, but…
• Same-origin restrictions
• JSON with Padding (JSONP) vulnerabilities
• Half-duplex HTTP architecture
• Reverse Ajax (COM pl E xi T y!
)
– Excessive Overhead
– High Latency

100% Half Duplex

100% Hipster

• Enables secure cross-origin communication across iframes, tabs, and windows
• PostMessage API (also used in Web
Workers)
• Demo: DZSLides (Paul Rouget, Mozilla): http://paulrouget.com/dzslides/

Cross Document

• HTML5 introduces Cross-Origin Resource Sharing
(CORS)
– http://www.w3.org/TR/cors/
– http://enable-cors.org
• Allows (safe) exemptions from the Same-Origin Policy
– “With CORS you receive data instead of [JSONP] code,
which you can parse safely”
—Frank Salim

• Improvements over Level 1:
– Cross-origin XMLHttpRequest
– Progress events
– Binary support
• Specification: http://www.w3.org/TR/XMLHttpRequest/
• Demo: http://www.html5rocks.com/en/tutorials/file/xhr2/

XMLHttpRequest
 Level 1
 Level 2

• Standardizes sending a continuous stream of data from server to browser
• EventSource API
• Great for newsfeeds, one-way streams of data
• SSE-specific features:
 Automatic reconnection
 Event IDs

• New API ( W3C ) and Protocol ( IETF RFC 6455 )
• Allows browser to communicate with a remote host
• Full-duplex (bi-directional), single socket
• Port 80/443 (ws:// and wss://)
• Huge reduction in unnecessary overhead and latency
• A socket in your browser!

• Financial trading
• Social networking
• Gaming
• Gambling
• System monitoring
• RFID tracking
…
WebSocket to the rescue!

Huge Latency Reduction
Using Comet Using WebSocket http://webtide.intalio.com/2011/09/cometd-2-4-0-websocket-benchmarks/

•
•
•
•
•
•
•
•
•
•
•
•
• Alchemy-Websockets (.NET) http://alchemywebsockets.net/
•
•
• Jetty (Java) http://jetty.codehaus.org/jetty/
SockJS-node
(Node) https://github.com/sockjs/sockjs-node
Apache ActiveMQ (Java) http://activemq.apache.org/
apache-websocket (C) https://github.com/disconnect/apachewebsocket#readme
APE Project (C) http://www.ape-project.org/
Autobahn (virtual appliance) http://www.caucho.com/
Cowboy https://github.com/extend/cowboy
Cramp (Ruby) http://cramp.in/
Diffusion (Commercial product) http://www.pushtechnology.com/home
EM-WebSocket (Ruby) https://github.com/igrigorik/em-websocket
Extendible Web Socket Server (PHP) https://github.com/wkjagt/Extendible-Web-
Socket-Server
gevent-websocket (Python) http://www.gelens.org/code/geventwebsocket/
GlassFish (Java) http://glassfish.java.net/
•
•
•
•
•
•
•
•
•
•
•
jWebsocket (Java) http://jwebsocket.org/
Kaazing WebSocket Gateway (Java) http://www.kaazing.com
libwebsockets (C) http://git.warmcat.com/cgi-bin/cgit/libwebsockets/
Misultin (Erlang) https://github.com/ostinelli/misultin
net.websocket (Go) http://code.google.com/p/go.net/websocket
Netty (Java) http://netty.io/
Nugget (.NET) http://nugget.codeplex.com/
Orbited (Python) http://labs.gameclosure.com/orbited2
phpdaemon (PHP) http://phpdaemon.net/
Pusher (cloud service) http://pusher.com/
pywebsockets (Python) http://code.google.com/p/pywebsocket/
RabbitMQ (Erlang) https://github.com/videlalvaro/rabbitmqwebsockets
•
•
•
•
•
•
•
•
•
•
•
•
•
• SuperWebSocket (.NET) http://superwebsocket.codeplex.com/
Tomcat (Java) http://tomcat.apache.org/
Tornado (python) http://www.tornadoweb.org/
txWebSocket (Python) https://github.com/rlotun/txWebSocket
vert.x (Java) http://vertx.io/
Watersprout (PHP) http://spoutserver.com/
web-socket-ruby (Ruby) https://github.com/gimite/web-socket-ruby
Webbit (Java) https://github.com/webbit/webbit
WebSocket-Node (Node.js) https://github.com/Worlize/WebSocket-Node
websockify (Python) https://github.com/kanaka/websockify
XSockets (.NET) http://xsockets.net/
Yaws (Erlang) http://yaws.hyber.org/websockets.yaws
Goliath (Ruby) https://github.com/postrank-labs/goliath
• Socket.io (Node.js) http://socket.io/

• Most importantly, 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
• The browser becomes a first-class network citizen
• Demo: This presentation in real time!
http://demo.kaazing.com/presso

Insert ritual dance to the demo gods here… http://demo.kaazing.com/presso

http://demo.kaazing.com/presso
WebSocket
Diagram and Presso system: @pmoskovi (based on impress.js
)
 You

http://demo.kaazing.com/forex/

http://demo.kaazing.com/racer/

Securing HTML5 Communication
Image: @ultrarunwild

• CORS
• General move to TLS/port 443
– Encrypted tunnel allows traversal of intermediaries
– Less overhead than originally thought
– Example: SPDY
• Using standard, open ports has a big advantage
"We want some chance of getting this (SPDY) protocol out
in our live time”
—Roberto Peon (Google)
• And more:
– Single Sign-On, Authentication and Authorization
For example, Kaazing Kerberos protocol over WS

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

• Pro HTML5 Programming
2 nd Edition (Apress, 2011)
• 40% off e-book coupon code:
HTL528 http://goo.gl/Dzq4A

• SFHTML5 Talk about Connectivity and Real Time Presentation: http://www.slideshare.net/peterlubbers/html5-realtime-andconnectivity
• HTML5 Weekly Newsletter: http://html5weekly.com/
• The Web Ahead Podcast: http://5by5.tv/webahead/
• San Francisco HTML5 User Group
(monthly presentations and videos): http://sfhtml5.org
• Kaazing WebSocket Gateway: http://kaazing.com/

• Kaazing University provides proven, practical HTML5 training worldwide (experts, not just trainers)
• Customers include Google, Cisco, Intel, and more
• Web site: http://kaazing.com/training/
• E-mail us: training@kaazing.com

-