Websockets at tossug

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

Real-Time Web

New information without refreshing the “web-page”

Real-time Spam

COSCUP Regisration Status

Real-time Annoyance

Real-time market quotes

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 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 Aristotleﬁrst 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 notiﬁcation

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}

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

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

Ruby • em-websockets • sunshower • cramp

Others • phpwebsockets • Node.js • Erlang • Haskell

Thank you!

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

Websockets at tossug

by clkao

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 2

Statistics

Websockets at tossug Presentation Transcript