Websockets at tossug
Upcoming SlideShare
Loading in...5
×
 

Websockets at tossug

on

  • 5,314 views

 

Statistics

Views

Total Views
5,314
Views on SlideShare
5,311
Embed Views
3

Actions

Likes
7
Downloads
158
Comments
1

2 Embeds 3

http://localhost 2
http://127.0.0.1 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Processing…
Post Comment
Edit your comment
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • show tradroom <br /> <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • show web-socket-js and frontend code <br />
  • <br /> <br />
  • show firefox with web-socket-js <br /> <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • show hippie timer and chatroom <br /> show hippie code <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />

Websockets at tossug Websockets at tossug Presentation Transcript

  • 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 supporting websockets
  • Server-Push • browser tells server about interested information • information streamed from server to browser without explicit request
  • 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 κόμη, 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
  • Widely used • gmail • plurk • facebook updates
  • Comet - Long-poll • Browser connects to an event endpoint • connection idled when there’s no event • browser reconnects after receiving events
  • Comet - Forever IFrame • Makes use of browser incremental rendering • IE wants <br/> • Safari wants 1KB data • cross-iframe messaging
  • 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}
  • 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}
  • 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 • webserver connections overhead
  • Lots of hacks! • spinning “loading” indicator for FF and IE • number of connections limits • transport overhead • webserver connections overhead • ...... orz
  • 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://github.com/gimite/web-socket-js
  • 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-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://example.com ^n:ds[4U
  • 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
  • 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
  • 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
  • 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
  • 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-
  • 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-
  • 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-
  • 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-
  • 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);
  • 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) { ... } ws.onclose = function(ev) { ... } ws.onerror = function(ev) { ... } ws.send(....);
  • 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: EventMachine
  • Scaling • Most likely, you want to work in async model for many stateful connections • perl: AnyEvent / Twiggy • ruby: EventMachine • python: tornado
  • 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 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);   });