WebSockets
and the Real-Time Web

         tossug 2010-07-06
  Chia-liang Kao clkao@clkao.org
clkao
Real-Time
  Web
New information
without refreshing
 the “web-page”
Real-time Spam
COSCUP Regisration
     Status
COSCUP Regisration
     Status
Real-time Annoyance
Real-time
market quotes
DEMO
Outlines
• comet server-push technologies
• websockets introductions
• websockets examples
• frameworks and packages
 supp...
Server-Push

• browser tells server about interested
  information
• information streamed from server to
  browser without...
Comet
Comet
Comet
Comet
The word comet came to English by way of the Latin word cometes. This word, in turn, came
from the Greek word κόμη, ...
Widely used

• gmail
• plurk
• facebook updates
Comet - Long-poll

• Browser connects to an event endpoint
• connection idled when there’s no event
• browser reconnects a...
Comet - Forever IFrame

• Makes use of browser incremental
  rendering
 • IE wants <br/>
 • Safari wants 1KB data
• cross-...
Multi-part XHR
   • multi-part response with boundries:
Content-Type: multipart/mixed; boundary=Foo

--Foo
Content-Type: a...
Multi-part XHR
   • multi-part response with boundries:
Content-Type: multipart/mixed; boundary=Foo

--Foo
Content-Type: a...
Lots of hacks!
Lots of hacks!

• spinning “loading” indicator for FF and IE
Lots of hacks!

• spinning “loading” indicator for FF and IE
• number of connections limits
Lots of hacks!

• spinning “loading” indicator for FF and IE
• number of connections limits
• transport overhead
Lots of hacks!

• spinning “loading” indicator for FF and IE
• number of connections limits
• transport overhead
• webserv...
Lots of hacks!

• spinning “loading” indicator for FF and IE
• number of connections limits
• transport overhead
• webserv...
Enter
WebSockets
Websockets
Websockets

• HTML5 Websockets
Websockets

• HTML5 Websockets
• Bidirectional communication over HTTP
Websockets

• HTML5 Websockets
• Bidirectional communication over HTTP
• Available in latest browsers
Websockets

• HTML5 Websockets
• Bidirectional communication over HTTP
• Available in latest browsers
• or use http://gith...
ws://example.com

wss://example.com
Request:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Prot...
Request:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Prot...
Request:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Prot...
Request:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Prot...
Request:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Prot...
Request:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Prot...
Request:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Prot...
Request:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Prot...
Request:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Prot...
my @keys = map {
    my $k = $env>{'HTTP_SEC_WEBSOCKET_KEY'.$_};
    join('', $k =~ m/d/g) / scalar @{[$k =~ m/ /g]};
} (1...
Messages surrounded
by x{00} and x{ff}
Websockets API
Websockets API

ws = new WebSocket("ws://foo.com:5000”));

ws.onopen = function(ev) { ... }
ws.onmessage = function(ev) { ...
DEMO
WebSockets
Challenges
Browser
Support
Browser
  web-socket-js
Support
  to the rescue!!
Session Management

• Reconnect
• Authentication
• within webserver or standalone?
Scaling
Scaling

• Most likely, you want to work in async
  model for many stateful connections
Scaling

• Most likely, you want to work in async
  model for many stateful connections
• perl: AnyEvent / Twiggy
Scaling

• Most likely, you want to work in async
  model for many stateful connections
• perl: AnyEvent / Twiggy
• ruby: ...
Scaling

• Most likely, you want to work in async
  model for many stateful connections
• perl: AnyEvent / Twiggy
• ruby: ...
WebSockets
 Packages
Perl

• Web::Hippie: AnyEvent and PSGI based
• Web::Hippie::Pipe: integrated message bus
  with AnyMQ
• Mojo
DEMO
Ruby

• em-websockets
• sunshower
• cramp
Others

• phpwebsockets
• Node.js
• Erlang
• Haskell
Thank you!
Bonus
HTML5 EventSource
 Content-Type: text/event-stream
 data: Foo
 id: 123

 data: Bar
 id: 124
  var eventSrc = new EventSour...
Websockets at tossug
Websockets at tossug
Websockets at tossug
Websockets at tossug
Websockets at tossug
Upcoming SlideShare
Loading in...5
×

Websockets at tossug

5,288

Published on

Published in: Technology, Business
1 Comment
7 Likes
Statistics
Notes
  • 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...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,288
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
169
Comments
1
Likes
7
Embeds 0
No embeds

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










  • Websockets at tossug

    1. 1. WebSockets and the Real-Time Web tossug 2010-07-06 Chia-liang Kao clkao@clkao.org
    2. 2. clkao
    3. 3. Real-Time Web
    4. 4. New information without refreshing the “web-page”
    5. 5. Real-time Spam
    6. 6. COSCUP Regisration Status
    7. 7. COSCUP Regisration Status
    8. 8. Real-time Annoyance
    9. 9. Real-time market quotes
    10. 10. DEMO
    11. 11. Outlines • comet server-push technologies • websockets introductions • websockets examples • frameworks and packages supporting websockets
    12. 12. Server-Push • browser tells server about interested information • information streamed from server to browser without explicit request
    13. 13. Comet
    14. 14. Comet
    15. 15. Comet
    16. 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. 17. Widely used • gmail • plurk • facebook updates
    18. 18. Comet - Long-poll • Browser connects to an event endpoint • connection idled when there’s no event • browser reconnects after receiving events
    19. 19. Comet - Forever IFrame • Makes use of browser incremental rendering • IE wants <br/> • Safari wants 1KB data • cross-iframe messaging
    20. 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. 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. 22. Lots of hacks!
    23. 23. Lots of hacks! • spinning “loading” indicator for FF and IE
    24. 24. Lots of hacks! • spinning “loading” indicator for FF and IE • number of connections limits
    25. 25. Lots of hacks! • spinning “loading” indicator for FF and IE • number of connections limits • transport overhead
    26. 26. Lots of hacks! • spinning “loading” indicator for FF and IE • number of connections limits • transport overhead • webserver connections overhead
    27. 27. Lots of hacks! • spinning “loading” indicator for FF and IE • number of connections limits • transport overhead • webserver connections overhead • ...... orz
    28. 28. Enter WebSockets
    29. 29. Websockets
    30. 30. Websockets • HTML5 Websockets
    31. 31. Websockets • HTML5 Websockets • Bidirectional communication over HTTP
    32. 32. Websockets • HTML5 Websockets • Bidirectional communication over HTTP • Available in latest browsers
    33. 33. Websockets • HTML5 Websockets • Bidirectional communication over HTTP • Available in latest browsers • or use http://github.com/gimite/web-socket-js
    34. 34. ws://example.com wss://example.com
    35. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 45. Messages surrounded by x{00} and x{ff}
    46. 46. Websockets API
    47. 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. 48. DEMO
    49. 49. WebSockets Challenges
    50. 50. Browser Support
    51. 51. Browser web-socket-js Support to the rescue!!
    52. 52. Session Management • Reconnect • Authentication • within webserver or standalone?
    53. 53. Scaling
    54. 54. Scaling • Most likely, you want to work in async model for many stateful connections
    55. 55. Scaling • Most likely, you want to work in async model for many stateful connections • perl: AnyEvent / Twiggy
    56. 56. Scaling • Most likely, you want to work in async model for many stateful connections • perl: AnyEvent / Twiggy • ruby: EventMachine
    57. 57. Scaling • Most likely, you want to work in async model for many stateful connections • perl: AnyEvent / Twiggy • ruby: EventMachine • python: tornado
    58. 58. WebSockets Packages
    59. 59. Perl • Web::Hippie: AnyEvent and PSGI based • Web::Hippie::Pipe: integrated message bus with AnyMQ • Mojo
    60. 60. DEMO
    61. 61. Ruby • em-websockets • sunshower • cramp
    62. 62. Others • phpwebsockets • Node.js • Erlang • Haskell
    63. 63. Thank you!
    64. 64. Bonus
    65. 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);   });
    1. A particular slide catching your eye?

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

    ×