1. WebSockets
and the Real-Time Web
tossug 2010-07-06
Chia-liang Kao clkao@clkao.org

2. clkao

4. Real-Time
Web

5. New information
without refreshing
the “web-page”

6. Real-time Spam

7. COSCUP Regisration
Status

8. COSCUP Regisration
Status

9. Real-time Annoyance

10. Real-time
market quotes

11. DEMO

12. Outlines
• comet server-push technologies
• websockets introductions
• websockets examples
• frameworks and packages
supporting websockets

13. Server-Push
• browser tells server about interested
information
• information streamed from server to
browser without explicit request

16. Comet

17. Comet

18. Comet

19. 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

20. Widely used
• gmail
• plurk
• facebook updates

21. Comet - Long-poll
• Browser connects to an event endpoint
• connection idled when there’s no event
• browser reconnects after receiving events

22. Comet - Forever IFrame
• Makes use of browser incremental
rendering
• IE wants <br/>
• Safari wants 1KB data
• cross-iframe messaging

23. 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}

24. 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}

25. Lots of hacks!

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

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

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

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

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

31. Enter
WebSockets

33. Websockets

34. Websockets
• HTML5 Websockets

35. Websockets
• HTML5 Websockets
• Bidirectional communication over HTTP

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

37. Websockets
• HTML5 Websockets
• Bidirectional communication over HTTP
• Available in latest browsers
• or use http://github.com/gimite/web-socket-js

38. ws://example.com
wss://example.com

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

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

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

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
^n:ds[4U

44. 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-

45. 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-

46. 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-

47. 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-

48. 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);

49. Messages surrounded
by x{00} and x{ff}

50. Websockets API

51. 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(....);

52. DEMO

53. WebSockets
Challenges

54. Browser
Support

55. Browser
web-socket-js
Support
to the rescue!!

56. Session Management
• Reconnect
• Authentication
• within webserver or standalone?

57. Scaling

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

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

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

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

62. WebSockets
Packages

63. Perl
• Web::Hippie: AnyEvent and PSGI based
• Web::Hippie::Pipe: integrated message bus
with AnyMQ
• Mojo

65. DEMO

66. Ruby
• em-websockets
• sunshower
• cramp

67. Others
• phpwebsockets
• Node.js
• Erlang
• Haskell

68. Thank you!

69. Bonus

70. 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);
});