�ݺ�ߣ

The Evented Web
webhooks, websockets and beyond

pearson://re:mix
April 14, 2011

Mike Brevoort
Software Architect @ Pearson eCollege
@mbrevoort

Thursday, April 14, 2011

• The evented What? Why?
• Webhooks
• Websockets
• Asynchronous I/O and node.js
• Putting it all together


Semi-related
points in time


1990 HTML
1993 Common Gateway
Interface (CGI)
1997 Java servlets
1999 XMLHTTP ActiveX
control

2004 Gmail, “web 2.0”
2005 AJAX coined
2006 CometD/Bayeux
2010 Websockets Draft
(Dec 2009)


Conditioned...

...to wait
...into a one sided
conversation
http://sites.google.com/site/davidnchung/StakeElephant.jpg

When we should have been
doing this!

http://www.tecacentre.net/funpics/funpics/ﬂying_elephant.jpg

The traditional web

Call Me... I won’t call you.

boiling yet?
boiling yet?
boiling yet?
boiling yet?
boiling yet?
boiling yet?
boiling yet?
boiling yet?
boiling yet?
boiling yet?
boiling yet?
http://www.charlesculp.com/isleroyale07/BoilingWater_IMG_3487_800_160.jpg

the disconnected

anonymous web


it’s all about events

http://www.ﬂickr.com/photos/cizake/4164756091/


I will call them
Webhooks.

And they will be good

2006
Jeff Lindsay
@progrium


what is a Webhook?

callbacks over HTTP

... an HTTP POST that occurs
when something happens


Server Server


realtime
instant data

scalability
performance
throughput


I got it!

When something
happens, I’ll just
call you!

So... relax


it’s simple

“even a baby
can do it”


user
configurable event handling

to infinity
and beyond!


credit: Jeff Lindsay @progrium


receive data in real time

Superpoke
/remove

HTTP POST
signed request
Facebook User w/ user id
removes app


build

change

resolve
issue

script
it!


receive data, do something, pass it on

$ cat apple.txt | wc | mail -s "The count"
joe@me.com

http://www.ﬂickr.com/photos/russmorris/2713018257

New
Yo’ App
event
HTTP POST

HT Order
TP
New PO
ST

Order

Customer Yo’
Pays Warehouse

HT
TP
Come and

PO
T S
get it


process data, give something in return

like a typical API call

but the contract is dictated by
the caller
g
methin
w hen so , I’m
s
happen send
o
going t
you Y
just tell me OK
where

Respond back
with X
OR
call me back
HERE


Webhook Standards?
• Yes, it’s called HTTP
• OK, but there are a few related
conventions/standards including RESTFul
webhooks, pubsubhubbub, etc

“even a baby
can do it”


http://code.google.com/p/pubsubhubbub/


Prospero
A system-to-system messaging
framework within Tempest

similar to pubsubhubbub pub/sub
evented messaging


Webhooks

• powerful glue
• plumbing of the evented web
• empowering


Intermission

Everything’s Amazing, Nobody’s Happy


Websockets

Server Client


Websockets

eb
Server Browser
w

(the hard part)


eb
Server Browser
w

Comet Silverlight Duplex

Flash sockets Websockets


ck e ts
e bso
W
enables “native” bidirectional
communication between a server and a
web browser


ck e ts
e bso
W
W3C API and IETF Protocol

Shares ports with HTTP/S (80, 443)

Cross-Origin

Works across firewalls, proxies
and routers (theoretically)


m e t
C o
long held HTTP requests

umbrella term for multiple techniques

compatible

aka
“Ajax Push”,
“Reverse Ajax”,
“HTTP Streaming”

F la sh
c k e ts
S o
raw TCP socket

requires Flash runtime

proxy and router woes

can implement websocket protocol


ig h t
lv erl
S i le x
D u p
socket or polling

requires Silverlight

sockets over ports 4502-4534

can implement websocket protocol


Why not comet?

• an inefficient hack
• 1/2 duplex
• HTTP Overhead
• latency

http://websocket.org/quantum.html


C om et Polling

http://publib.boulder.ibm.com/infocenter/wasinfo/v6r1/index.jsp?topic=/com.ibm.websphere.ajax.devguide.help/docs/PureAjax_pubsub_clients.html

om et
C
Long Polling


om et
C
Keep-Alive Streaming


ckets
Web so
a protocol

http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-03


ckets
Web so
an API
var socket = new WebSocket("ws://host/socket/");

socket.onopen = function() {
! console.log("viva la socket!");
}

socket.onmessage = function(msg) {
! console.log(msg);!
}
http://dev.w3.org/html5/websockets/


ckets
eb so
W
Browser Support

http://caniuse.com


ckets
Web so
Security Flaw
• secure Websockets (wss://) not affected

• not specifically Websockets, rather affects all sockets over HTTP
including Flash and Java

• IETF study of 47,338 HTTP proxies tested found 0.37% and
0.017% were vulnerable to the two attack types

• Browser vendors want to bulletproof Websocket wire protocol to
handle even buggy implementations of intercepting proxies

• Websocket protocol R6 introduced 2/6/2011, actively being
reviewed. More info: http://tools.ietf.org/wg/hybi/

http://security.sys-con.com/node/1642956


ckets
eb so
W

What about the
server?


Traditional Web
Servers just won’t do


Why?
All these webhooks and websockets
mean orders of magnitude more
concurrent, long lived connections

Thread per connection is not scalable

So much time is wasted waiting... on I/O


Typical I/O Latency
L1: 3 cycles
L2: 14 cycles
RAM: 250 cycles
DISK: 41,000,000 cycles
NETWORK: 240,000,000 cycles
L1
L2
RAM
Disk
Network

0 60,000,000 120,000,000 180,000,000 240,000,000 300,000,000
http://nodejs.org/jsconf.pdf


What’s wrong with
this?
var result = db.query("select * from T");
// wait for result
// use result
console.log( result[0].C );

waiting idle
blocking for 240,000,000 cycles

Alternatively

// the async way
db.query("select * from T", function(result) {
console.log( result[0].C );
});


Asynchronous IO

• non-blocking
• event loop
• callbacks


Apache vs Nginx
asynchronous vs synchronous I/O
event loop vs thread per connection

http://blog.webfaction.com/a-little-holiday-present


Some of the
contenders
(non-blocking, asyncronous I/O, event loop)

• Twisted (python)
• EventMachine (Ruby)
• Node.js (javascript)


provide an easy way to build scalable network programs.
• server-side Javascript
• client-side development likeness
• Javascript designed speciﬁcally to be used
with an event loop

• non-blocking libraries
• FAST, underpinned by V8
• community momentum

a different way of
thinking
var callback = function(response) {
// do something with response
};

obj.getSomething(data, callback);


Ummm...

But, don’t I have to wait until
more browsers support
Websockets?
http://www.ﬂickr.com/photos/way2go/5536458691/

Don’t be ridiculous. We
can use fallbacks!


Don’t be ridiculous. We
can use fallbacks!

With Socket.io and
rusty paperclip we can
do anything


e t. io
o c k
S

Socket.IO aims to make realtime apps
possible in every browser and mobile
device, blurring the differences between
the different transport mechanisms


e t. io
o c k
S
Websocket HTML File

Flash Socket JSONP Polling

AJAX Polling & Multipart


e t. io
o c k
S
IE 5.5+ Firefox 3+

Chrome 4+ Safari 3+

Opera 10.6 Android Webkit

iOS Safari WebOs Webkit


Demo
webhooks + websockets

2. New Call GET
(webhook)

4. Respond Say + Record /twillio
5. Say 7. New Recording POST
(webhook)

1. Call
6. Record /socket.io

3. Status 8. Recording
(websocket) (websocket)

9. <audio/> GET
Recording


Anton.io?
Prospero’s Brother
extending Prospero
to the “Browser Channel”

alpha in development


Thank You

(you’re free to ﬂy now)


�ݺ�ߣ

The Evented Web

More Related Content

The Evented Web