1. The Evented Web
webhooks, websockets and beyond
pearson://re:mix
April 14, 2011
Mike Brevoort
Software Architect @ Pearson eCollege
@mbrevoort
Thursday, April 14, 2011
2. • The evented What? Why?
• Webhooks
• Websockets
• Asynchronous I/O and node.js
• Putting it all together
Thursday, April 14, 2011
3. Semi-related
points in time
Thursday, April 14, 2011
4. 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)
Thursday, April 14, 2011
5. Conditioned...
...to wait
...into a one sided
conversation
http://sites.google.com/site/davidnchung/StakeElephant.jpg
Thursday, April 14, 2011
6. When we should have been
doing this!
http://www.tecacentre.net/funpics/funpics/flying_elephant.jpg
Thursday, April 14, 2011
22. receive data, do something, pass it on
$ cat apple.txt | wc | mail -s "The count"
joe@me.com
http://www.flickr.com/photos/russmorris/2713018257
Thursday, April 14, 2011
23. 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
Thursday, April 14, 2011
24. 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
Thursday, April 14, 2011
26. 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”
Thursday, April 14, 2011
34. Prospero
A system-to-system messaging
framework within Tempest
similar to pubsubhubbub pub/sub
evented messaging
Thursday, April 14, 2011
35. Webhooks
• powerful glue
• plumbing of the evented web
• empowering
Thursday, April 14, 2011
36. Intermission
Everything’s Amazing, Nobody’s Happy
Thursday, April 14, 2011
37. Websockets
Server Client
Thursday, April 14, 2011
38. Websockets
eb
Server Browser
w
(the hard part)
Thursday, April 14, 2011
39. eb
Server Browser
w
Comet Silverlight Duplex
Flash sockets Websockets
Thursday, April 14, 2011
40. ck e ts
e bso
W
enables “native” bidirectional
communication between a server and a
web browser
Thursday, April 14, 2011
41. 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)
Thursday, April 14, 2011
42. m e t
C o
long held HTTP requests
umbrella term for multiple techniques
compatible
aka
“Ajax Push”,
“Reverse Ajax”,
“HTTP Streaming”
Thursday, April 14, 2011
43. F la sh
c k e ts
S o
raw TCP socket
requires Flash runtime
proxy and router woes
can implement websocket protocol
Thursday, April 14, 2011
44. 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
Thursday, April 14, 2011
45. Why not comet?
• an inefficient hack
• 1/2 duplex
• HTTP Overhead
• latency
http://websocket.org/quantum.html
Thursday, April 14, 2011
46. 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
Thursday, April 14, 2011
47. om et
C
Long Polling
http://publib.boulder.ibm.com/infocenter/wasinfo/v6r1/index.jsp?topic=/com.ibm.websphere.ajax.devguide.help/docs/PureAjax_pubsub_clients.html
Thursday, April 14, 2011
48. om et
C
Keep-Alive Streaming
http://publib.boulder.ibm.com/infocenter/wasinfo/v6r1/index.jsp?topic=/com.ibm.websphere.ajax.devguide.help/docs/PureAjax_pubsub_clients.html
Thursday, April 14, 2011
49. ckets
Web so
a protocol
http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-03
Thursday, April 14, 2011
50. 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/
Thursday, April 14, 2011
51. ckets
eb so
W
Browser Support
http://caniuse.com
Thursday, April 14, 2011
52. 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
Thursday, April 14, 2011
53. ckets
eb so
W
What about the
server?
Thursday, April 14, 2011
54. Traditional Web
Servers just won’t do
Thursday, April 14, 2011
55. Traditional Web
Servers just won’t do
Thursday, April 14, 2011
56. 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
Thursday, April 14, 2011
58. 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
Thursday, April 14, 2011
59. Alternatively
// the async way
db.query("select * from T", function(result) {
console.log( result[0].C );
});
Thursday, April 14, 2011
61. Apache vs Nginx
asynchronous vs synchronous I/O
event loop vs thread per connection
http://blog.webfaction.com/a-little-holiday-present
Thursday, April 14, 2011
62. Apache vs Nginx
asynchronous vs synchronous I/O
event loop vs thread per connection
http://blog.webfaction.com/a-little-holiday-present
Thursday, April 14, 2011
63. Some of the
contenders
(non-blocking, asyncronous I/O, event loop)
• Twisted (python)
• EventMachine (Ruby)
• Node.js (javascript)
Thursday, April 14, 2011
64. provide an easy way to build scalable network programs.
• server-side Javascript
• client-side development likeness
• Javascript designed specifically to be used
with an event loop
• non-blocking libraries
• FAST, underpinned by V8
• community momentum
Thursday, April 14, 2011
65. a different way of
thinking
var callback = function(response) {
// do something with response
};
obj.getSomething(data, callback);
Thursday, April 14, 2011
66. Ummm...
But, don’t I have to wait until
more browsers support
Websockets?
http://www.flickr.com/photos/way2go/5536458691/
Thursday, April 14, 2011
69. Don’t be ridiculous. We
can use fallbacks!
With Socket.io and
rusty paperclip we can
do anything
Thursday, April 14, 2011
70. 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
Thursday, April 14, 2011
71. e t. io
o c k
S
Websocket HTML File
Flash Socket JSONP Polling
AJAX Polling & Multipart
Thursday, April 14, 2011
72. 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
Thursday, April 14, 2011
73. 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
Thursday, April 14, 2011
74. Anton.io?
Prospero’s Brother
extending Prospero
to the “Browser Channel”
alpha in development
Thursday, April 14, 2011
75. Thank You
(you’re free to fly now)
Thursday, April 14, 2011