Your SlideShare is downloading. ×
  • Like
Websockets at tossug
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Websockets at tossug

  • 4,981 views
Published

 

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • So at Slide 54 you put in a screenshot from http://jwebsocket.org/index.htm?page=browsers.htm without even bothering to change the colors or layout even a little and also without mentioning the source and in addition you do not find it important to mention at all the only Open Source Java WebSocket library available? Talk about intellectual honesty...
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,981
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
164
Comments
1
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide


















  • show tradroom
















































































  • show web-socket-js and frontend code


  • show firefox with web-socket-js


















  • show hippie timer and chatroom
    show hippie code










Transcript

  • 1. WebSockets and the Real-Time Web tossug 2010-07-06 Chia-liang Kao clkao@clkao.org
  • 2. clkao
  • 3. Real-Time Web
  • 4. New information without refreshing the “web-page”
  • 5. Real-time Spam
  • 6. COSCUP Regisration Status
  • 7. COSCUP Regisration Status
  • 8. Real-time Annoyance
  • 9. Real-time market quotes
  • 10. DEMO
  • 11. Outlines • comet server-push technologies • websockets introductions • websockets examples • frameworks and packages supporting websockets
  • 12. Server-Push • browser tells server about interested information • information streamed from server to browser without explicit request
  • 13. Comet
  • 14. Comet
  • 15. Comet
  • 16. Comet The word comet came to English by way of the Latin word cometes. This word, in turn, came from the Greek word κόμη, which means "hair of the head". The Greek scientist and philosopher Aristotlefirst used the derived form of κόμη, κομήτης, to describe what he saw as "stars with hair." Theastronomical symbol for comets is (☄), consisting of a small disc with three hairlike extensions. • 2006, coined by Alex Russell • Server push for real time notification
  • 17. Widely used • gmail • plurk • facebook updates
  • 18. Comet - Long-poll • Browser connects to an event endpoint • connection idled when there’s no event • browser reconnects after receiving events
  • 19. Comet - Forever IFrame • Makes use of browser incremental rendering • IE wants <br/> • Safari wants 1KB data • cross-iframe messaging
  • 20. Multi-part XHR • multi-part response with boundries: Content-Type: multipart/mixed; boundary=Foo --Foo Content-Type: application/json {foo: 1} --Foo Content-Type: application/json {foo: 2}
  • 21. Multi-part XHR • multi-part response with boundries: Content-Type: multipart/mixed; boundary=Foo --Foo Content-Type: application/json {foo: 1} --Foo Content-Type: application/json {foo: 2}
  • 22. Lots of hacks!
  • 23. Lots of hacks! • spinning “loading” indicator for FF and IE
  • 24. Lots of hacks! • spinning “loading” indicator for FF and IE • number of connections limits
  • 25. Lots of hacks! • spinning “loading” indicator for FF and IE • number of connections limits • transport overhead
  • 26. Lots of hacks! • spinning “loading” indicator for FF and IE • number of connections limits • transport overhead • webserver connections overhead
  • 27. Lots of hacks! • spinning “loading” indicator for FF and IE • number of connections limits • transport overhead • webserver connections overhead • ...... orz
  • 28. Enter WebSockets
  • 29. Websockets
  • 30. Websockets • HTML5 Websockets
  • 31. Websockets • HTML5 Websockets • Bidirectional communication over HTTP
  • 32. Websockets • HTML5 Websockets • Bidirectional communication over HTTP • Available in latest browsers
  • 33. Websockets • HTML5 Websockets • Bidirectional communication over HTTP • Available in latest browsers • or use http://github.com/gimite/web-socket-js
  • 34. ws://example.com wss://example.com
  • 35. Request: GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com ^n:ds[4U
  • 36. Request: GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com ^n:ds[4U
  • 37. Request: GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com ^n:ds[4U
  • 38. Request: GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com ^n:ds[4U
  • 39. Request: GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com ^n:ds[4U
  • 40. Request: GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com ^n:ds[4U Response: HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Origin: http://example.com Sec-WebSocket-Location: ws://example.com/demo Sec-WebSocket-Protocol: sample 8jKS'y:G*Co,Wxa-
  • 41. Request: GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com ^n:ds[4U Response: HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Origin: http://example.com Sec-WebSocket-Location: ws://example.com/demo Sec-WebSocket-Protocol: sample 8jKS'y:G*Co,Wxa-
  • 42. Request: GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com ^n:ds[4U Response: HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Origin: http://example.com Sec-WebSocket-Location: ws://example.com/demo Sec-WebSocket-Protocol: sample 8jKS'y:G*Co,Wxa-
  • 43. Request: GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com New in draft#76 ^n:ds[4U Response: HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Origin: http://example.com Sec-WebSocket-Location: ws://example.com/demo Sec-WebSocket-Protocol: sample 8jKS'y:G*Co,Wxa-
  • 44. my @keys = map { my $k = $env>{'HTTP_SEC_WEBSOCKET_KEY'.$_}; join('', $k =~ m/d/g) / scalar @{[$k =~ m/ /g]}; } (1,2); md5(pack('NN', @keys) . $key3);
  • 45. Messages surrounded by x{00} and x{ff}
  • 46. Websockets API
  • 47. Websockets API ws = new WebSocket("ws://foo.com:5000”)); ws.onopen = function(ev) { ... } ws.onmessage = function(ev) { ... } ws.onclose = function(ev) { ... } ws.onerror = function(ev) { ... } ws.send(....);
  • 48. DEMO
  • 49. WebSockets Challenges
  • 50. Browser Support
  • 51. Browser web-socket-js Support to the rescue!!
  • 52. Session Management • Reconnect • Authentication • within webserver or standalone?
  • 53. Scaling
  • 54. Scaling • Most likely, you want to work in async model for many stateful connections
  • 55. Scaling • Most likely, you want to work in async model for many stateful connections • perl: AnyEvent / Twiggy
  • 56. Scaling • Most likely, you want to work in async model for many stateful connections • perl: AnyEvent / Twiggy • ruby: EventMachine
  • 57. Scaling • Most likely, you want to work in async model for many stateful connections • perl: AnyEvent / Twiggy • ruby: EventMachine • python: tornado
  • 58. WebSockets Packages
  • 59. Perl • Web::Hippie: AnyEvent and PSGI based • Web::Hippie::Pipe: integrated message bus with AnyMQ • Mojo
  • 60. DEMO
  • 61. Ruby • em-websockets • sunshower • cramp
  • 62. Others • phpwebsockets • Node.js • Erlang • Haskell
  • 63. Thank you!
  • 64. Bonus
  • 65. HTML5 EventSource Content-Type: text/event-stream data: Foo id: 123 data: Bar id: 124   var eventSrc = new EventSource('events.php');      eventSrc.addEventListener('open', function (event) {     console.log(event.type);   });      eventSrc.addEventListener('message', function (event) {     console.log(event.type);     console.log(event.data);   });