The HTML5 Connectivity

License

Agenda A is for Applications B is for Bi-Directional C is for Connectivity #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

Browser Support Native Support: Polyfills (emulation): Modernizr’s All in One page:

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):

PostMessage Architecture Cross Document Messaging

CORS HTML5 introduces Cross-Origin Resource Sharing (CORS) – – 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: Demo:

 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)W3CIETF 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 Reduction Using CometUsing WebSocket

(Fairly) Complete List of WebSocket Servers Alchemy-Websockets (.NET) Apache ActiveMQ (Java) apache-websocket (C) websocket#readme websocket#readme APE Project (C) Autobahn (virtual appliance) Cowboy Cramp (Ruby) Diffusion (Commercial product) EM-WebSocket (Ruby) Extendible Web Socket Server (PHP) Socket-Server Socket-Server gevent-websocket (Python) websocket/ websocket/ GlassFish (Java) Goliath (Ruby) Jetty (Java) jWebsocket (Java) Kaazing WebSocket Gateway (Java) libwebsockets (C) Misultin (Erlang) net.websocket (Go) Netty (Java) Nugget (.NET) Orbited (Python) phpdaemon (PHP) Pusher (cloud service) pywebsockets (Python) RabbitMQ (Erlang) websockets websockets Socket.io (Node.js) SockJS-node (Node) SuperWebSocket (.NET) Tomcat (Java) Tornado (python) txWebSocket (Python) vert.x (Java) Watersprout (PHP) web-socket-ruby (Ruby) Webbit (Java) WebSocket-Node (Node.js) websockify (Python) XSockets (.NET) Yaws (Erlang)

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

Insert ritual dance to the demo gods here…

 You Me    WebSocket   Diagram and Presso (based on impress.js)impress.js

WebSocket Demo

WebSocket Demo

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

LinkedIn: Peter Lubbers

Buy the Book! Pro HTML5 Programming 2 nd Edition (Apress, 2011) 40% off e-book coupon code: HTL

Additional Resources SFHTML5 Talk about Connectivity and Real Time Presentation: connectivity connectivity HTML5 Weekly Newsletter: The Web Ahead Podcast: San Francisco HTML5 User Group (monthly presentations and videos): Kaazing WebSocket Gateway:

HTML5 Training Kaazing University provides proven, practical HTML5 training worldwide (experts, not just trainers) Customers include Google, Cisco, Intel, and more Web site: us:

-