building living web applications with html5 websockets
TRANSCRIPT
![Page 1: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/1.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 1
High Performance
Creators of HTML5 WebSocket
Enterprise Support
WebSocket Gateway
Building Living Web ApplicaEons with
HTML5 WebSockets
Peter Moskovits -‐ @pmoskovi Developer Evangelist
![Page 2: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/2.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 2
Agenda
OFFER BETTER EXPERIENCE EVERYWHERE
• Is There a Problem?
• How Serious is the Problem?
• Any Hope? • Demos
![Page 3: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/3.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 3
Architectural (R)evoluEon
Client
Full duplex
Back-‐end server
Client-‐Server
![Page 4: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/4.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 4
Architectural (R)evoluEon
Browser Web Server
Half Duplex
Web
Legacy Web
![Page 5: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/5.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 5
Architectural (R)evoluEon
Browser Web Tier
Half Duplex Full duplex
Back-‐end server Middleware
Web
Legacy Web
![Page 6: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/6.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 6
HTTP: Polling & Long Polling
I want Desktop-‐like InteracEons
![Page 7: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/7.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 7
A Parallel Universe Without Mailman
![Page 8: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/8.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 8
HTTP • Was designed to serve sta3c documents • Half duplex, high latency • Overhead: 800-‐2000 bytes • Complex architecture: plugins, polling, legacy applica3on servers • Expensive to "Webscale" applica3ons
HTTP: Polling & Long Polling
![Page 9: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/9.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 9
HTTP Overhead
788 bytes + 1 byte
![Page 10: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/10.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 10
Workarounds and Hacks
AJAX: Asynchronous JavaScript and XML Used for building highly interac3ve Web apps Content can change without full page refresh User-‐perceived low latency "Real-‐3me" o`en achieved using polling and long-‐polling
Lack of standard implementa3on Comet adds lots of complexity
![Page 11: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/11.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 11
Workarounds and Hacks
![Page 12: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/12.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 12
HTML5 WebSocket
§ Extends TCP across the Web • Full-‐duplex, single socket, very low overhead
• Shares port with HTTP (80/443) • Enables new classes of networked apps
§ W3C API (JavaScript) § IETF Protocol
![Page 13: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/13.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 13
Architectural (R)evoluEon
Browser Web Tier
Half Duplex Full duplex
Back-‐end server Middleware
Web
Legacy Web
![Page 14: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/14.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 14
Architectural (R)evoluEon
Back-‐end server
WebSocket
WebSocket Server
Full duplex
Web
Living Web
![Page 15: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/15.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 16
Browser Web Tier
Half Duplex Full duplex
Back-‐end server Middleware
Web
Legacy Web
Back-‐end server
WebSocket
WebSocket Server
Full duplex
Web
Living Web
![Page 16: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/16.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 17
Browser Support
![Page 17: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/17.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 18
Can I Use?
caniuse.com
![Page 18: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/18.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 19
Can I Use?
![Page 19: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/19.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 20
Can I Use? websocketstest.com
![Page 20: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/20.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 21
How Can I Use?
![Page 21: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/21.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 22
How Can I Use?
![Page 22: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/22.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 23
The WebSocket Handshake
![Page 23: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/23.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 24
WebSocket Frames
§ Only a few header bytes § Data may be text or binary § Frames from client to server are masked (XORed w/ random value) to avoid confusing proxies
![Page 24: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/24.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 25
InspecEng WebSocket Frames
Available today in Chromium and Chrome Canary
![Page 25: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/25.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 26
Demo! Inspec,ng WebSocket
Frames
![Page 26: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/26.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 27
![Page 27: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/27.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 28
![Page 28: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/28.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 29
Got WebSockets – Now What?
![Page 29: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/29.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 30
A New World
![Page 30: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/30.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 31
Build Highly Scalable Web Messaging Apps
![Page 31: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/31.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 32
Back-‐end server
JMS, AMQP, XMPP/WebSocket
Kaazing WebSocket Gateway
JMS, AMQP, XMPP/TCP
Web
Living Web
Extend the Reach of Your Rich Business Protocols to the Web
![Page 32: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/32.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 33
Demos!
![Page 33: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/33.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 34
Presso: WebSocket Powered Social HTML5 PresentaEon Tool
![Page 34: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/34.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 35
Demos!
![Page 35: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/35.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 36
AddiEonal Resources
Rich Real-‐Time User Experience
kaazing.com/download The Zinger: blog.kaazing.com Pro HTML5 Programming Guide More Demos & Content
• kaazing.com/demo • websocket.org • kaazing.com/about/collateral
Kaazing University
• HTML5 Fast Track • HTML5 Mobile Mastery • Kaazing Master Class
![Page 36: Building Living Web Applications with HTML5 WebSockets](https://reader034.vdocument.in/reader034/viewer/2022052505/554bc7d3b4c90530298b56b2/html5/thumbnails/36.jpg)
Copyright © 2012 Kaazing Corpora3on. All Rights Reserved. 37