Websockets - OMG! Someone broke the internet!

3,159 views

Published on

This deck looks at some of the applications of the websockets API. There is an example use case and then I explore the implications for the web of using this tech

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,159
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
34
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Websockets - OMG! Someone broke the internet!

  1. 1. OMG! Someone broke the internet! James Lewis Monday, 24 May 2010
  2. 2. • Introductions • So what are Websockets then? • Interactions on the World Wide Web • Implications for building application • Recap Monday, 24 May 2010
  3. 3. Monday, 24 May 2010
  4. 4. James Lewis Developer XP Coach Sometime architect Monday, 24 May 2010
  5. 5. 1990 2000 2010 A brief history of push to the browser Monday, 24 May 2010
  6. 6. late ’80’s... Al Gore invents the interweb 1990 2000 2010 A brief history of push to the browser Monday, 24 May 2010
  7. 7. 1995... Push invented multipart/x-mixed-replace 1990 2000 2010 A brief history of push to the browser Monday, 24 May 2010
  8. 8. 1996... MS start using push XMLHTTP 1990 2000 2010 A brief history of push to the browser Monday, 24 May 2010
  9. 9. ~2003... Mozilla XHR 1990 2000 2010 A brief history of push to the browser Monday, 24 May 2010
  10. 10. 2006... The term COMET is coined 1990 2000 2010 A brief history of push to the browser Monday, 24 May 2010
  11. 11. 2008... HTML 5 (draft) 1990 2000 2010 A brief history of push to the browser Monday, 24 May 2010
  12. 12. Dec 2009... Chrome build 4.0.249.0 Websocket support added 1990 2000 2010 A brief history of push to the browser Monday, 24 May 2010
  13. 13. 1990 2000 2010 A brief history of push to the browser Monday, 24 May 2010
  14. 14. An Example Grid computing Monday, 24 May 2010
  15. 15. An Example Grid computing What do you need to create a grid? Monday, 24 May 2010
  16. 16. An Example Grid computing What do you need to create a grid? Clients that are capable of exectuting arbitrary algorithms Monday, 24 May 2010
  17. 17. An Example Grid computing What do you need to create a grid? Clients that are capable of exectuting arbitrary algorithms A co-ordinating service to push code / data to clients and assemble the results Monday, 24 May 2010
  18. 18. Monday, 24 May 2010
  19. 19. Monday, 24 May 2010
  20. 20. OS JVM app client - server Anatomy of a traditional grid client Monday, 24 May 2010
  21. 21. OS JVM app <Publisher> A co-ordinating service to push code / data and assemble the results client - server Anatomy of a traditional grid client Monday, 24 May 2010
  22. 22. OS JVM Clients that are capable of exectuting arbitrary algorithms app <Listener> <Publisher> A co-ordinating service to push code / data and assemble the results client - server Anatomy of a traditional grid client Monday, 24 May 2010
  23. 23. Monday, 24 May 2010
  24. 24. SKYNET Monday, 24 May 2010
  25. 25. SKYNET we-run-any-code.com Monday, 24 May 2010
  26. 26. How does we-run-any-code.com work? Monday, 24 May 2010
  27. 27. How does we-run-any-code.com work? Well, it doesn’t at the moment... Monday, 24 May 2010
  28. 28. How does we-run-any-code.com work? Well, it doesn’t at the moment... But if it did... Monday, 24 May 2010
  29. 29. OS JVM app <Listener> <Publisher> client - server Monday, 24 May 2010
  30. 30. OS Browser JVM js engine app <Listener> app <Publisher> client - server we-run-any-code.com Monday, 24 May 2010
  31. 31. OS Browser JVM js engine app <Listener> app Map <Publisher> client - server we-run-any-code.com Monday, 24 May 2010
  32. 32. OS Browser JVM js engine app <Listener> app Map <Publisher> Reduce client - server we-run-any-code.com Monday, 24 May 2010
  33. 33. What do you need to create a grid? Monday, 24 May 2010
  34. 34. What do you need to create a grid? Execute arbitrary code Co-ordinating service Push code to client Monday, 24 May 2010
  35. 35. What do you need to create a grid? Execute arbitrary code eval(string) Co-ordinating service Push code to client Monday, 24 May 2010
  36. 36. What do you need to create a grid? Execute arbitrary code eval(string) Co-ordinating service Umm, a web server? Push code to client Any ideas? Monday, 24 May 2010
  37. 37. “The HTML5 initiative introduced the Web Socket interface -- now developed as an independent specification -- which defines a full-duplex communications channel that operates over a single socket and is exposed via a JavaScript interface in compliant browsers. “ Source: websockets.org Monday, 24 May 2010
  38. 38. [Constructor(in DOMString url, in optional DOMString protocol)] interface WebSocket { <snip> // networking attribute Function onopen; attribute Function onmessage; attribute Function onerror; attribute Function onclose; boolean send(in DOMString data); void close(); }; <snip> Monday, 24 May 2010
  39. 39. Interactions on the World Wide Web Websockets Monday, 24 May 2010
  40. 40. Interactions on the World Wide Web Websockets GET /nextJob HTTP/1.1 Host: werunanycode.com Connection: Upgrade Upgrade: WebSocket Monday, 24 May 2010
  41. 41. Interactions on the World Wide Web Websockets GET /nextJob HTTP/1.1 Host: werunanycode.com HTTP/1.1 101 WebSocket Protocol Connection: Upgrade Handshake Upgrade: WebSocket Upgrade: WebSocket Connection: Upgrade Monday, 24 May 2010
  42. 42. Interactions on the World Wide Web Websockets Monday, 24 May 2010
  43. 43. Interactions on the World Wide Web Websockets websocket: function(url, s) { <snip> $(ws) .bind('open', $.websocketSettings.open) .bind('close', $.websocketSettings.close) .bind('message', $.websocketSettings.message) .bind('message', function(e){ var m = $.evalJSON(e.originalEvent.data); var h = $.websocketSettings.events[m.type]; if (h) h.call(this, m); }); <snip> } Monday, 24 May 2010
  44. 44. Interactions on the World Wide Web Websockets public class ClientMessageCallback implements WebSocket { private Outbound outbound; public void onConnect(Outbound outbound) { } public void onDisconnect() { } public void sendMessage(String message) { try { outbound.sendMessage(message); } catch (IOException e) { throw new RuntimeException(e); } } } Monday, 24 May 2010
  45. 45. Interactions on the World Wide Web Websockets Monday, 24 May 2010
  46. 46. Interactions on the World Wide Web Websockets Monday, 24 May 2010
  47. 47. Interactions on the World Wide Web Websockets {"type":"message", "data": {"algo":"2+2"} } Monday, 24 May 2010
  48. 48. Interactions on the World Wide Web Websockets {"type":"message", "data": {"algo":"2+2"} } Monday, 24 May 2010
  49. 49. Interactions on the World Wide Web Websockets {"type":"message", "data": {"algo":"2+2"} } {"type":"answer", "data": "4"} Monday, 24 May 2010
  50. 50. Interactions on the World Wide Web Websockets {"type":"message", "data": {"algo":"2+2"} } {"type":"answer", "data": "4"} Monday, 24 May 2010
  51. 51. What did we just see? Monday, 24 May 2010
  52. 52. What did we just see? Raw TCP/IP based sockets Monday, 24 May 2010
  53. 53. What did we just see? Raw TCP/IP based sockets Message exchange Monday, 24 May 2010
  54. 54. What did we just see? Raw TCP/IP based sockets Message exchange State transition logic in the client Monday, 24 May 2010
  55. 55. What did we just see? Raw TCP/IP based sockets Message exchange State transition logic in the client The building blocks of the World Wide Web Monday, 24 May 2010
  56. 56. What did we just see? Raw TCP/IP based sockets Message exchange State transition logic in the client hick c lients t The building blocks of the World Wide Web ^ Monday, 24 May 2010
  57. 57. OS Browser JVM js engine app <Listener> <Listener> app <Publisher> <Publisher> See? It’s a thick client! Monday, 24 May 2010
  58. 58. But that doesn’t break the internet does it? Monday, 24 May 2010
  59. 59. But that doesn’t break the internet does it? well, what is the internet? Monday, 24 May 2010
  60. 60. Monday, 24 May 2010
  61. 61. Monday, 24 May 2010
  62. 62. Characteristics of the interwebernet self-descriptive messages identification of resources manipulation of resources through representations HATEOAS layered system Source: Fielding, Roy. 2000. Architectural Styles and the Design of Network-based Software Architectures. PhD diss Monday, 24 May 2010
  63. 63. Image of ISP Backbone Connectivity reflecting Skitter Path Data - 1998 http://www.caida.org/Tools/Skitter/viz9808.html Monday, 24 May 2010
  64. 64. Feature #1- scalability Monday, 24 May 2010
  65. 65. Feature #1- scalability “The internet trades latency for scalability” Dr Jim Webber Monday, 24 May 2010
  66. 66. Feature #1- scalability “The internet trades latency for scalability” Dr Jim Webber “Push trades scalability for latency” Monday, 24 May 2010
  67. 67. Feature #1- scalability “The internet trades latency for scalability” Dr Jim Webber “Push trades scalability for latency” Me Monday, 24 May 2010
  68. 68. This may suprise you but the web doesn’t look like this Monday, 24 May 2010
  69. 69. Monday, 24 May 2010
  70. 70. Monday, 24 May 2010
  71. 71. Client cache Monday, 24 May 2010
  72. 72. Proxy cache Client cache Monday, 24 May 2010
  73. 73. Proxy cache CDN Client cache Monday, 24 May 2010
  74. 74. Proxy cache CDN Infrastructure caches Client cache Monday, 24 May 2010
  75. 75. Proxy cache CDN Infrastructure Reverse proxy caches cache Client cache Monday, 24 May 2010
  76. 76. Monday, 24 May 2010
  77. 77. Monday, 24 May 2010
  78. 78. Monday, 24 May 2010
  79. 79. Monday, 24 May 2010
  80. 80. Monday, 24 May 2010
  81. 81. Monday, 24 May 2010
  82. 82. Monday, 24 May 2010
  83. 83. And Websockets? Monday, 24 May 2010
  84. 84. Monday, 24 May 2010
  85. 85. Monday, 24 May 2010
  86. 86. Monday, 24 May 2010
  87. 87. Feature #2 - availability Monday, 24 May 2010
  88. 88. Feature #2 - availability “The internet is not a five nines fabric” Urs Hölzle Monday, 24 May 2010
  89. 89. Feature #2 - availability “The internet is not a five nines fabric” Urs Hölzle “If you are going to build an internet scale application using push, you’d better not count on it’s availability” Monday, 24 May 2010
  90. 90. Feature #2 - availability “The internet is not a five nines fabric” Urs Hölzle “If you are going to build an internet scale application using push, you’d better not count on it’s availability” Me Monday, 24 May 2010
  91. 91. Monday, 24 May 2010
  92. 92. 2005 Pakistan suffers a near complete Internet outage as a submarine cable becomes defective (Jun) Monday, 24 May 2010
  93. 93. 2005 Pakistan suffers a near complete Internet outage as a submarine cable becomes defective (Jun) 2008 The Middle East, India, and other parts of Africa and Asia see a major degradation in Internet service, including outages, after several undersea cables carrying Internet traffic to the region are cut within 1 week (Jan-Feb) YouTube becomes unreacheable for a couple of hours after Pakistan Telecom starts an unauthorized announcement of YouTube's subnet prefix (24 Feb) Source: Hobbes' Internet Timeline, www.zakon.org/robert/internet/timeline/ Monday, 24 May 2010
  94. 94. Corus steel works, the Netherlands - ANP Monday, 24 May 2010
  95. 95. Other stuff you will need to think about Monday, 24 May 2010
  96. 96. Other stuff you will need to think about Testing Monday, 24 May 2010
  97. 97. Other stuff you will need to think about Testing Coupling Monday, 24 May 2010
  98. 98. Other stuff you will need to think about Testing Coupling Domain models Monday, 24 May 2010
  99. 99. How do you normally test webapps? ... <div id=”algorithm”> <span>var x = [crazy complex prime stuff]</span> <form action=”/jobs/asd2b234c598/answer” method=”POST”> <input type=”text” name=”answer” value=”” /> </form> </div> ... Monday, 24 May 2010
  100. 100. How do you normally test webapps? ... <div id=”algorithm”> <span>var x = [crazy complex prime stuff]</span> <form action=”/jobs/asd2b234c598/answer” method=”POST”> <input type=”text” name=”answer” value=”” /> </form> </div> ... unit tests integration tests functional tests acceptance tests Monday, 24 May 2010
  101. 101. But now the logic is in both client and server unit tests integration tests functional tests acceptance tests Monday, 24 May 2010
  102. 102. But now the logic is in both client and server unit tests integration tests acceptance tests functional tests unit tests integration tests functional tests acceptance tests Monday, 24 May 2010
  103. 103. But now the logic is in both client and server unit tests integration tests acceptance tests functional tests unit tests integration tests functional tests acceptance tests You don’t suck, so you are going to test both right? Monday, 24 May 2010
  104. 104. And the asynchronous stuff? You’re pretty good at testing multi-threaded code are you? Monday, 24 May 2010
  105. 105. And the asynchronous stuff? You’re pretty good at testing multi-threaded code are you? Dan North and James’ first rule of concurrency Monday, 24 May 2010
  106. 106. And the asynchronous stuff? You’re pretty good at testing multi-threaded code are you? “Doug Lea does it better than you do...” Dan North and James’ first rule of concurrency Monday, 24 May 2010
  107. 107. Recap Monday, 24 May 2010
  108. 108. Recap Websockets are really cool! Monday, 24 May 2010
  109. 109. Recap Websockets are really cool! And simple to use Monday, 24 May 2010
  110. 110. Recap Websockets are really cool! And simple to use http://code.google.com/p/jquery-websocket/ http://jetty.codehaus.org/jetty/ http://www.google.com/chrome Monday, 24 May 2010
  111. 111. Recap Monday, 24 May 2010
  112. 112. Recap You can implement some really exciting applications with them Monday, 24 May 2010
  113. 113. Recap You can implement some really exciting applications with them They are particularly well-suited to low-latency stuff Trading applications for example Monday, 24 May 2010
  114. 114. Recap Monday, 24 May 2010
  115. 115. Recap But you won’t be able to take advantage of the stuff that makes the internet scale or interoperate You will have to learn how to do that yourself Monday, 24 May 2010
  116. 116. Ps we-run-any-code.com is coming... Monday, 24 May 2010
  117. 117. >> Welcome back James >> SKYNET is active >> The current grid size is: 22,107,123 >> What code would you like to run? ... Monday, 24 May 2010
  118. 118. Thanks! James Lewis jalewis@thoughtworks.com http://twitter.com/boicy http://bovon.org Monday, 24 May 2010
  119. 119. Monday, 24 May 2010
  120. 120. we-run-any-code.com A traditional implementation... Monday, 24 May 2010
  121. 121. Interactions on the World Wide Web Traditional we-run-any-code.com Monday, 24 May 2010
  122. 122. Interactions on the World Wide Web Traditional we-run-any-code.com classic HTTP request-response Monday, 24 May 2010
  123. 123. Interactions on the World Wide Web Traditional we-run-any-code.com classic HTTP request-response Monday, 24 May 2010
  124. 124. Interactions on the World Wide Web Traditional we-run-any-code.com Monday, 24 May 2010
  125. 125. Interactions on the World Wide Web Traditional we-run-any-code.com Monday, 24 May 2010
  126. 126. Interactions on the World Wide Web Traditional we-run-any-code.com Monday, 24 May 2010
  127. 127. Interactions on the World Wide Web Traditional we-run-any-code.com GET /index HTTP/1.1 Host: we-run-any-code.com Monday, 24 May 2010
  128. 128. Interactions on the World Wide Web Traditional we-run-any-code.com GET /index HTTP/1.1 Host: we-run-any-code.com HTTP/1.1 200 OK <html> ... <a rel=”nextjob” href=”/nextjob” /> ... </html> Monday, 24 May 2010
  129. 129. Interactions on the World Wide Web Traditional we-run-any-code.com Monday, 24 May 2010
  130. 130. Interactions on the World Wide Web Traditional we-run-any-code.com GET /nextjob HTTP/1.1 Host: we-run-any-code.com Monday, 24 May 2010
  131. 131. Interactions on the World Wide Web Traditional we-run-any-code.com GET /nextjob HTTP/1.1 Host: we-run-any-code.com HTTP/1.1 303 See Other Location: /jobs/asd2b234c598 Monday, 24 May 2010
  132. 132. Interactions on the World Wide Web Traditional we-run-any-code.com GET /nextjob HTTP/1.1 Host: we-run-any-code.com HTTP/1.1 303 See Other Location: /jobs/asd2b234c598 GET /jobs/asd2b234c598 HTTP/1.1 Host: we-run-any-code.com Monday, 24 May 2010
  133. 133. Interactions on the World Wide Web Traditional we-run-any-code.com GET /nextjob HTTP/1.1 Host: we-run-any-code.com HTTP/1.1 303 See Other Location: /jobs/asd2b234c598 GET /jobs/asd2b234c598 HTTP/1.1 Host: we-run-any-code.com HTTP/1.1 200 OK ... <div id=”algorithm”> <span>var x = [crazy complex prime stuff]</span> <form action=”/jobs/asd2b234c598/answer” method=”POST”> <input type=”text” name=”answer” value=”” /> </form> </div> ... Monday, 24 May 2010
  134. 134. What did we just see? HTTP verbs and status codes Addressable resources HATEOAS This is how the internet has been able to grow to, umm, internet-scale... Monday, 24 May 2010
  135. 135. Closed set of operations, well-understood semantics GET <resource-name> HTTP/1.1 PUT <resource-name> HTTP/1.1 POST <resource-name> HTTP/1.1 DELETE <resource-name> HTTP/1.1 OPTIONS <resource-name> HTTP/1.1 HEAD <resource-name> HTTP/1.1 Monday, 24 May 2010
  136. 136. Enables you to go from this: Monday, 24 May 2010
  137. 137. To this Monday, 24 May 2010
  138. 138. Representations of resources Addressable self-contained (there’s this thing with media types, but we won’t go into that) Monday, 24 May 2010
  139. 139. Representations of resources Addressable ... <div id=”algorithm”> <span>var x = [crazy complex prime stuff]</span> self-contained <form action=”/jobs/asd2b234c598/answer” method=”POST”> <input type=”text” name=”answer” value=”” /> </form> </div> ... (there’s this thing with media types, but we won’t go into that) Monday, 24 May 2010
  140. 140. Representations of resources HTTP/1.1 303 See Other Location: /jobs/asd2b234c598 Addressable ... <div id=”algorithm”> <span>var x = [crazy complex prime stuff]</span> self-contained <form action=”/jobs/asd2b234c598/answer” method=”POST”> <input type=”text” name=”answer” value=”” /> </form> </div> ... (there’s this thing with media types, but we won’t go into that) Monday, 24 May 2010
  141. 141. Hypermedia As The Engine Of Application State <html> ... <a rel=”nextjob” href=”/nextjob” /> ... </html> Monday, 24 May 2010
  142. 142. Hypermedia As The Engine Of Application State Starting GET Grid GET Finding job GET Submitting answer POST Running job <html> ... <a rel=”nextjob” href=”/nextjob” /> ... </html> Monday, 24 May 2010

×