The Evented Web

8,704 views
8,509 views

Published on

pearson://re:mix 4/14/2011

Published in: Technology
1 Comment
22 Likes
Statistics
Notes
No Downloads
Views
Total views
8,704
On SlideShare
0
From Embeds
0
Number of Embeds
117
Actions
Shares
0
Downloads
0
Comments
1
Likes
22
Embeds 0
No embeds

No notes for slide

The Evented Web

  1. 1. The Evented Web webhooks, websockets and beyond pearson://re:mix April 14, 2011 Mike Brevoort Software Architect @ Pearson eCollege @mbrevoortThursday, April 14, 2011
  2. 2. • The evented What? Why? • Webhooks • Websockets • Asynchronous I/O and node.js • Putting it all togetherThursday, April 14, 2011
  3. 3. Semi-related points in timeThursday, April 14, 2011
  4. 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. 5. Conditioned... ...to wait ...into a one sided conversation http://sites.google.com/site/davidnchung/StakeElephant.jpgThursday, April 14, 2011
  6. 6. When we should have been doing this! http://www.tecacentre.net/funpics/funpics/flying_elephant.jpgThursday, April 14, 2011
  7. 7. The traditional web Call Me... I won’t call you.Thursday, April 14, 2011
  8. 8. 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.jpgThursday, April 14, 2011
  9. 9. the disconnected anonymous webThursday, April 14, 2011
  10. 10. it’s all about events http://www.flickr.com/photos/cizake/4164756091/Thursday, April 14, 2011
  11. 11. I will call them Webhooks. And they will be good 2006 Jeff Lindsay @progriumThursday, April 14, 2011
  12. 12. what is a Webhook? callbacks over HTTP ... an HTTP POST that occurs when something happensThursday, April 14, 2011
  13. 13. Server ServerThursday, April 14, 2011
  14. 14. realtime instant data scalability performance throughputThursday, April 14, 2011
  15. 15. realtime instant data scalability performance throughputThursday, April 14, 2011
  16. 16. I got it! When something happens, I’ll just call you! So... relaxThursday, April 14, 2011
  17. 17. it’s simple “even a baby can do it”Thursday, April 14, 2011
  18. 18. user configurable event handling to infinity and beyond!Thursday, April 14, 2011
  19. 19. credit: Jeff Lindsay @progriumThursday, April 14, 2011
  20. 20. receive data in real time Superpoke /remove HTTP POST signed request Facebook User w/ user id removes appThursday, April 14, 2011
  21. 21. build change resolve issue script it!Thursday, April 14, 2011
  22. 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/2713018257Thursday, April 14, 2011
  23. 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 itThursday, April 14, 2011
  24. 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 HEREThursday, April 14, 2011
  25. 25. Thursday, April 14, 2011
  26. 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
  27. 27. http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  28. 28. http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  29. 29. http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  30. 30. http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  31. 31. http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  32. 32. http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  33. 33. http://code.google.com/p/pubsubhubbub/Thursday, April 14, 2011
  34. 34. Prospero A system-to-system messaging framework within Tempest similar to pubsubhubbub pub/sub evented messagingThursday, April 14, 2011
  35. 35. Webhooks • powerful glue • plumbing of the evented web • empoweringThursday, April 14, 2011
  36. 36. Intermission Everything’s Amazing, Nobody’s HappyThursday, April 14, 2011
  37. 37. Websockets Server ClientThursday, April 14, 2011
  38. 38. Websockets eb Server Browser w (the hard part)Thursday, April 14, 2011
  39. 39. eb Server Browser w Comet Silverlight Duplex Flash sockets WebsocketsThursday, April 14, 2011
  40. 40. ck e ts e bso W enables “native” bidirectional communication between a server and a web browserThursday, April 14, 2011
  41. 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. 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. 43. F la sh c k e ts S o raw TCP socket requires Flash runtime proxy and router woes can implement websocket protocolThursday, April 14, 2011
  44. 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 protocolThursday, April 14, 2011
  45. 45. Why not comet? • an inefficient hack • 1/2 duplex • HTTP Overhead • latency http://websocket.org/quantum.htmlThursday, April 14, 2011
  46. 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.htmlThursday, April 14, 2011
  47. 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.htmlThursday, April 14, 2011
  48. 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.htmlThursday, April 14, 2011
  49. 49. ckets Web so a protocol http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-03Thursday, April 14, 2011
  50. 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. 51. ckets eb so W Browser Support http://caniuse.comThursday, April 14, 2011
  52. 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/1642956Thursday, April 14, 2011
  53. 53. ckets eb so W What about the server?Thursday, April 14, 2011
  54. 54. Traditional Web Servers just won’t doThursday, April 14, 2011
  55. 55. Traditional Web Servers just won’t doThursday, April 14, 2011
  56. 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/OThursday, April 14, 2011
  57. 57. 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.pdfThursday, April 14, 2011
  58. 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 cyclesThursday, April 14, 2011
  59. 59. Alternatively // the async way db.query("select * from T", function(result) { console.log( result[0].C ); });Thursday, April 14, 2011
  60. 60. Asynchronous IO • non-blocking • event loop • callbacksThursday, April 14, 2011
  61. 61. Apache vs Nginx asynchronous vs synchronous I/O event loop vs thread per connection http://blog.webfaction.com/a-little-holiday-presentThursday, April 14, 2011
  62. 62. Apache vs Nginx asynchronous vs synchronous I/O event loop vs thread per connection http://blog.webfaction.com/a-little-holiday-presentThursday, April 14, 2011
  63. 63. Some of the contenders (non-blocking, asyncronous I/O, event loop) • Twisted (python) • EventMachine (Ruby) • Node.js (javascript)Thursday, April 14, 2011
  64. 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 momentumThursday, April 14, 2011
  65. 65. a different way of thinking var callback = function(response) { // do something with response }; obj.getSomething(data, callback);Thursday, April 14, 2011
  66. 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
  67. 67. Thursday, April 14, 2011
  68. 68. Don’t be ridiculous. We can use fallbacks!Thursday, April 14, 2011
  69. 69. Don’t be ridiculous. We can use fallbacks! With Socket.io and rusty paperclip we can do anythingThursday, April 14, 2011
  70. 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 mechanismsThursday, April 14, 2011
  71. 71. e t. io o c k S Websocket HTML File Flash Socket JSONP Polling AJAX Polling & MultipartThursday, April 14, 2011
  72. 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 WebkitThursday, April 14, 2011
  73. 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 RecordingThursday, April 14, 2011
  74. 74. Anton.io? Prospero’s Brother extending Prospero to the “Browser Channel” alpha in developmentThursday, April 14, 2011
  75. 75. Thank You (you’re free to fly now)Thursday, April 14, 2011

×