WebSockets On Fire<br />HTML5 WebCamps 2011<br />
Whois<br />Jef Claes<br />Ferranti Computer Systems<br />@JefClaes<br />http://jclaes.blogspot.com<br />Jef.claes@gmail.co...
Content<br />WHY do we need WebSockets?<br />WHATare WebSockets?<br />What is the state ofWebSockets TODAY?<br />So show m...
Content<br />WHY do we need WebSockets?<br />WHATare WebSockets?<br />What is the state ofWebSockets TODAY?<br />So show m...
DIRECT COMMUNICATION between browser and server<br />
Chat applications<br />
Collaborative tools<br />
Socialnetworking<br />
Online gaming<br />
But haven’t we been doingthisfor a while?<br />
COMET<br />
1. Frequent polling<br />
Browser<br />Server<br />HTTP Request<br />HTTP Response<br />
GET /PollingStock//PollingStock HTTP/1.1Host: localhost:8080User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv...
Request / Response headers = 871 bytes<br />1000 clients poll every 10 seconds<br />1000 * 871 bytes = 0,8MB / 10 seconds<...
2. Long polling<br />
Waitfor it...<br />Browser<br />Server<br />HTTP Request<br />HTTP Response<br />
Say NO to COMET<br />
Content<br />WHY do we need WebSockets?<br />WHATare WebSockets?<br />What is the state ofWebSockets TODAY?<br />So show m...
‘TCP for the Web’Full-duplex direct communication<br />
Browser<br />Server<br />HTTP<br />HTTP<br />WebSocket<br />WebSocket<br />
WebSockets Handshake<br />GET /demo <br />HTTP/1.1 Upgrade: WebSocket<br />Connection: Upgrade <br />Host: example.com <br...
WebSockets message<br />0x00 wsMessage0xFF<br />
Benefits<br />Native implemented<br />Lessthroughput<br />Performance<br />Complexity<br />
Content<br />WHY do we need WebSockets?<br />WHATare WebSockets?<br />What is the state ofWebSockets TODAY?<br />So show m...
1. HTML5<br />Work In Progress<br />
2. Browser support<br />IE9: No<br />Safari 5, Chrome 10:Yes<br />FireFox 4, Opera 11: Yes, but…<br />Mobile: No, only Saf...
2. Browser support<br />ALTERNATIVES yesssss<br /><ul><li>Silverlight
Flash</li></li></ul><li>3. The server<br />HTML5 Labs (WCF)<br />	http://html5labs.interoperabilitybridges.com <br />pyweb...
Content<br />WHY do we need WebSockets?<br />WHATare WebSockets?<br />What is the state ofWebSockets TODAY?<br />So show m...
Why?<br />Information ASAP<br />
Information screens<br />Paging<br />JIT Printing<br />Websites<br />Why?<br />
1. NetViewer<br />
2. Current Incidents<br />
Silverlightclient<br />WCF WebSockets Server<br />Dispatcher<br />Silverlightclient<br />Silverlightclient<br />http://htm...
Code<br />
Conclusion<br />WebSockets > COMET<br />Notquite ready<br />
Recommended resources<br />http://dev.w3.org/html5/websockets/<br />http://html5labs.interoperabilitybridges.com<br />http...
Q & A<br />
Joinus<br />Twitter:<br />@MSDNBelux<br />Our tag today: #webcampbe<br />Facebook: <br />MSDN België (NL)<br />MSDN BeLux ...
Thankyou<br />
Upcoming SlideShare
Loading in...5
×

WebSockets On Fire

3,750

Published on

HTML5 WebCamps talk on WebSockets

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,750
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
62
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

WebSockets On Fire

  1. 1. WebSockets On Fire<br />HTML5 WebCamps 2011<br />
  2. 2. Whois<br />Jef Claes<br />Ferranti Computer Systems<br />@JefClaes<br />http://jclaes.blogspot.com<br />Jef.claes@gmail.com <br />
  3. 3. Content<br />WHY do we need WebSockets?<br />WHATare WebSockets?<br />What is the state ofWebSockets TODAY?<br />So show me some CODE.<br />
  4. 4. Content<br />WHY do we need WebSockets?<br />WHATare WebSockets?<br />What is the state ofWebSockets TODAY?<br />So show me some CODE.<br />
  5. 5. DIRECT COMMUNICATION between browser and server<br />
  6. 6. Chat applications<br />
  7. 7. Collaborative tools<br />
  8. 8. Socialnetworking<br />
  9. 9. Online gaming<br />
  10. 10. But haven’t we been doingthisfor a while?<br />
  11. 11. COMET<br />
  12. 12. 1. Frequent polling<br />
  13. 13. Browser<br />Server<br />HTTP Request<br />HTTP Response<br />
  14. 14. GET /PollingStock//PollingStock HTTP/1.1Host: localhost:8080User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-usAccept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveReferer: http://www.example.com/PollingStock/Cookie: showInheritedConstant=false; showInheritedProtectedConstant=false; showInheritedProperty=false; showInheritedProtectedProperty=false; showInheritedMethod=false; showInheritedProtectedMethod=false; showInheritedEvent=false; showInheritedStyle=false; showInheritedEffect=falseHTTP/1.x 200 OKX-Powered-By: Servlet/2.5Server: Sun Java System Application Server 9.1_02Content-Type: text/html;charset=UTF-8<br />
  15. 15. Request / Response headers = 871 bytes<br />1000 clients poll every 10 seconds<br />1000 * 871 bytes = 0,8MB / 10 seconds<br /> 0,8 MB * 6 = 4,8 MB / minute<br /> 4,8 MB * 60 = 288 MB / hour<br /> 288 MB * 24 = 6,912 GB / day<br />
  16. 16. 2. Long polling<br />
  17. 17. Waitfor it...<br />Browser<br />Server<br />HTTP Request<br />HTTP Response<br />
  18. 18. Say NO to COMET<br />
  19. 19. Content<br />WHY do we need WebSockets?<br />WHATare WebSockets?<br />What is the state ofWebSockets TODAY?<br />So show me some CODE.<br />
  20. 20. ‘TCP for the Web’Full-duplex direct communication<br />
  21. 21. Browser<br />Server<br />HTTP<br />HTTP<br />WebSocket<br />WebSocket<br />
  22. 22. WebSockets Handshake<br />GET /demo <br />HTTP/1.1 Upgrade: WebSocket<br />Connection: Upgrade <br />Host: example.com <br />Origin: http://example.com <br />Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 <br />Sec-WebSocket-Key2: 12998 5 Y3 1 <br />.P00 ^n:ds[4U <br />HTTP/1.1 101 <br />WebSocket Protocol Handshake <br />Upgrade: WebSocket<br />Connection: Upgrade <br />Sec-WebSocket-Origin: http://example.com <br />Sec-WebSocket-Location: ws://example.com/demo <br />Sec-WebSocket-Protocol: sample <br />8jKS'y:G*Co,Wxa- <br />
  23. 23. WebSockets message<br />0x00 wsMessage0xFF<br />
  24. 24. Benefits<br />Native implemented<br />Lessthroughput<br />Performance<br />Complexity<br />
  25. 25. Content<br />WHY do we need WebSockets?<br />WHATare WebSockets?<br />What is the state ofWebSockets TODAY?<br />So show me some CODE.<br />
  26. 26. 1. HTML5<br />Work In Progress<br />
  27. 27. 2. Browser support<br />IE9: No<br />Safari 5, Chrome 10:Yes<br />FireFox 4, Opera 11: Yes, but…<br />Mobile: No, only Safari :-(<br />Source: http://caniuse.com <br />
  28. 28. 2. Browser support<br />ALTERNATIVES yesssss<br /><ul><li>Silverlight
  29. 29. Flash</li></li></ul><li>3. The server<br />HTML5 Labs (WCF)<br /> http://html5labs.interoperabilitybridges.com <br />pywebsocket(Apache extension) http://code.google.com/p/pywebsocket/<br />jWebSocket (Java)<br />http://jwebsocket.org/<br />web-socket-ruby (Ruby)<br />https://github.com/gimite/web-socket-ruby<br />…<br />
  30. 30. Content<br />WHY do we need WebSockets?<br />WHATare WebSockets?<br />What is the state ofWebSockets TODAY?<br />So show me some CODE.<br />
  31. 31. Why?<br />Information ASAP<br />
  32. 32. Information screens<br />Paging<br />JIT Printing<br />Websites<br />Why?<br />
  33. 33. 1. NetViewer<br />
  34. 34. 2. Current Incidents<br />
  35. 35. Silverlightclient<br />WCF WebSockets Server<br />Dispatcher<br />Silverlightclient<br />Silverlightclient<br />http://html5labs.interoperabilitybridges.com/<br />
  36. 36. Code<br />
  37. 37. Conclusion<br />WebSockets > COMET<br />Notquite ready<br />
  38. 38. Recommended resources<br />http://dev.w3.org/html5/websockets/<br />http://html5labs.interoperabilitybridges.com<br />http://blogs.msdn.com/b/interoperability/archive/tags/html5/<br />http://jclaes.blogspot.com<br />
  39. 39. Q & A<br />
  40. 40. Joinus<br />Twitter:<br />@MSDNBelux<br />Our tag today: #webcampbe<br />Facebook: <br />MSDN België (NL)<br />MSDN BeLux (FR)<br />Latestnews on www.msdn.be<br />Always up to date: register to MSDN Flash and Express Yourselfhttp://www.msdn-newsletters.be<br />
  41. 41. Thankyou<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×