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  

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  

 

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  3  

Architectural  (R)evoluEon  

Client  

Full  duplex  

Back-­‐end  server  

Client-­‐Server  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  4  

Architectural  (R)evoluEon  

Browser  Web  Server  

Half  Duplex  

Web  

Legacy  Web  

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  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  6  

HTTP:  Polling  &  Long  Polling  

I  want  Desktop-­‐like  InteracEons  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  7  

A  Parallel  Universe  Without  Mailman  

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  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  9  

HTTP  Overhead  

788  bytes  +  1  byte  

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  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  11  

Workarounds  and  Hacks  

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  

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  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  14  

Architectural  (R)evoluEon  

Back-­‐end    server  

WebSocket  

WebSocket  Server  

Full  duplex  

Web  

Living  Web  

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  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  17  

Browser  Support  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  18  

Can  I  Use?  

caniuse.com  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  19  

Can  I  Use?  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  20  

Can  I  Use?  websocketstest.com  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  21  

How  Can  I  Use?  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  22  

How  Can  I  Use?  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  23  

The  WebSocket  Handshake  

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  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  25  

InspecEng  WebSocket  Frames  

Available  today  in  Chromium  and  Chrome  Canary  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  26  

Demo!  Inspec,ng  WebSocket  

Frames  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  27  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  28  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  29  

Got  WebSockets  –  Now  What?  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  30  

A  New  World  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  31  

Build  Highly  Scalable  Web  Messaging  Apps    

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  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  33  

Demos!  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  34  

Presso:  WebSocket  Powered  Social  HTML5  PresentaEon  Tool  

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  35  

Demos!  

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  

   

Copyright  ©  2012  Kaazing  Corpora3on.  All  Rights  Reserved.  37