The HTML5 Connectivity Revolution @peterlubbers

License plate: @peterlubbers

Image: @rdclark

Image: @jeffreypalermo

Agenda

• A is for Applications• B is for Bi-Directional• C is for Connectivity

#devcon5@peterlubbers

#html5

‘A’ is for (Web) Applications• 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

HTML5 Feature Areas

Browser Support

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

HTML5 “Paves the Cow Paths”• A pragmatic approach • Fix real-world problems• Especially true for

Connectivity features

HTML5 Connectivity

Hang on, I can already do that!Yes, but…• Same-origin restrictions• JSON with Padding (JSONP) vulnerabilities• Half-duplex HTTP architecture• Reverse Ajax (COMplExiTy!)– Excessive Overhead– High Latency

Traditional Architecture

100% Half Duplex

Modern Web Application Architecture

100% Hipster

Cross Document Messaging• 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/

PostMessage ArchitectureCross Document

Messaging

CORS• 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

XMLHttpRequest Level 2• 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/

Level 2

XMLHttpRequest

Level 1

Server-Sent Events• 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

SSE Architecture

WebSocket• 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!

If You Want to Build Web Apps for…• Financial trading• Social networking• Gaming • Gambling • System monitoring• RFID tracking

… WebSocket to the rescue!

Serious Overhead Reduction

Huge Latency ReductionUsing Comet Using WebSocket

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

(Fairly) Complete List of WebSocket Servers • Alchemy-Websockets (.NET)

http://alchemywebsockets.net/• Apache ActiveMQ (Java)

http://activemq.apache.org/• apache-websocket (C)

https://github.com/disconnect/apache-websocket#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/gevent-websocket/

• GlassFish (Java)http://glassfish.java.net/

• Goliath (Ruby)https://github.com/postrank-labs/goliath

• Jetty (Java)• http://jetty.codehaus.org/jetty/ • 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/rabbitmq-websockets• Socket.io (Node.js)

http://socket.io/

• SockJS-node (Node)https://github.com/sockjs/sockjs-node

• 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

Extending WebSocket• Most importantly, once you have WebSocket, you can

extend client-server protocols to the web:Chat: XMPP (Jabber), IRCPub/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

You

Me

WebSocket

http://demo.kaazing.com/presso

Diagram and Presso system: @pmoskovi (based on impress.js)

WebSocket Demo

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

WebSocket Demo

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

Image: @ultrarunwildSecuring HTML5 Communication

Securing HTML5 Communication• 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

Buy the Book!

• Pro HTML5 Programming 2nd Edition (Apress, 2011)

• 40% off e-book coupon code:HTL528http://goo.gl/Dzq4A

Additional Resources• SFHTML5 Talk about Connectivity and Real Time Presentation:

http://www.slideshare.net/peterlubbers/html5-realtime-and-connectivity

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

HTML5 Training• 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

-