More Related Content
Similar to Building Living Web Applications with HTML5 WebSockets
Similar to Building Living Web Applications with HTML5 WebSockets (20)
More from Peter Moskovits
More from Peter Moskovits (7)
Building Living Web Applications with HTML5 WebSockets
- 1. Building
Living
Web
ApplicaEons
with
HTML5
WebSockets
Creators
of
HTML5
WebSocket
WebSocket
Gateway
High
Performance
Enterprise
Support
Peter
Moskovits
-‐
@pmoskovi
Developer
Evangelist
1
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 2. Agenda
• Is
There
a
Problem?
• How
Serious
is
the
Problem?
• Any
Hope?
• Demos
OFFER
BETTER
EXPERIENCE
EVERYWHERE
2
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 3. Architectural
(R)evoluEon
Client-‐Server
Full
duplex
Client
Back-‐end
server
3
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 4. Architectural
(R)evoluEon
Legacy
Web
Half
Duplex
Web
Browser
Web
Server
4
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 5. Architectural
(R)evoluEon
Legacy
Web
Half
Duplex
Full
duplex
Web
Browser
Web
Middleware
Back-‐end
Tier
server
5
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 6. HTTP:
Polling
&
Long
Polling
I
want
Desktop-‐
like
InteracEons
6
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 7. A
Parallel
Universe
Without
Mailman
7
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 8. HTTP:
Polling
&
Long
Polling
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
8
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 9. HTTP
Overhead
788
bytes
+
1
byte
9
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 10. Workarounds
and
Hacks
AJAX:
Asynchronous
JavaScript
and
XML
Lack
of
standard
implementa3on
Used
for
building
highly
interac3ve
Web
apps
Comet
adds
lots
of
complexity
Content
can
change
without
full
page
refresh
User-‐perceived
low
latency
"Real-‐3me"
o`en
achieved
using
polling
and
long-‐polling
10
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
12
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 13. Architectural
(R)evoluEon
Legacy
Web
Half
Duplex
Full
duplex
Web
Browser
Web
Middleware
Back-‐end
Tier
server
13
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 14. Architectural
(R)evoluEon
Living
Web
WebSocket
Full
duplex
Web
WebSocket
Server
Back-‐end
server
14
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 15. Legacy
Web
Half
Duplex
Full
duplex
Web
Browser
Web
Middleware
Back-‐end
Tier
server
Living
Web
WebSocket
Full
duplex
Web
WebSocket
Server
Back-‐end
server
16
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 17. Can
I
Use?
caniuse.com
18
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 18. Can
I
Use?
19
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 19. Can
I
Use?
websocketstest.com
20
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 20. How
Can
I
Use?
21
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 21. How
Can
I
Use?
22
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 23. 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
24
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 24. InspecEng
WebSocket
Frames
Available
today
in
Chromium
and
Chrome
Canary
25
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 25. Demo!
Inspec,ng
WebSocket
Frames
26
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 26. 27
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 27. 28
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 28. Got
WebSockets
–
Now
What?
29
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 29. A
New
World
30
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 30. Build
Highly
Scalable
Web
Messaging
Apps
31
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 31. Extend
the
Reach
of
Your
Rich
Business
Protocols
to
the
Web
Living
Web
JMS,
AMQP,
XMPP/WebSocket
JMS,
AMQP,
XMPP/TCP
Web
Kaazing
Back-‐end
WebSocket
Gateway
server
32
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 32. Demos!
33
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 34. Demos!
35
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 35. AddiEonal
Resources
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
Rich
Real-‐Time
User
Experience
36
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.
- 36. 37
Copyright
©
2012
Kaazing
Corpora3on.
All
Rights
Reserved.