Building Living Web Applications with HTML5 WebSockets

7,504 views

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,504
On SlideShare
0
From Embeds
0
Number of Embeds
3,893
Actions
Shares
0
Downloads
168
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Building Living Web Applications with HTML5 WebSockets

  1. 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. 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. 3. Architectural  (R)evoluEon   Client-­‐Server   Full  duplex   Client   Back-­‐end  server  3   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  4. 4. Architectural  (R)evoluEon   Legacy  Web   Half  Duplex   Web   Browser   Web   Server  4   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  5. 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. 6. HTTP:  Polling  &  Long  Polling   I  want  Desktop-­‐ like  InteracEons  6   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  7. 7. A  Parallel  Universe  Without  Mailman  7   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  8. 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. 9. HTTP  Overhead   788  bytes  +  1  byte  9   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  10. 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.  
  11. 11. Workarounds  and  Hacks  11   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  12. 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. 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. 14. Architectural  (R)evoluEon   Living  Web   WebSocket   Full  duplex   Web   WebSocket  Server   Back-­‐end     server  14   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  15. 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.  
  16. 16. Browser  Support  17   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  17. 17. Can  I  Use?   caniuse.com  18   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  18. 18. Can  I  Use?  19   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  19. 19. Can  I  Use?   websocketstest.com  20   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  20. 20. How  Can  I  Use?  21   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  21. 21. How  Can  I  Use?  22   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  22. 22. The  WebSocket  Handshake  23   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  23. 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. 24. InspecEng  WebSocket  Frames   Available  today  in  Chromium  and  Chrome  Canary  25   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  25. 25. Demo!   Inspec,ng  WebSocket   Frames  26   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  26. 26. 27   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  27. 27. 28   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  28. 28. Got  WebSockets  –  Now  What?  29   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  29. 29. A  New  World  30   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  30. 30. Build  Highly  Scalable  Web  Messaging  Apps    31   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  31. 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. 32. Demos!  33   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  33. 33. Presso:  WebSocket  Powered  Social  HTML5  PresentaEon  Tool  34   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  34. 34. Demos!  35   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  
  35. 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. 36. 37   Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  

×