The document discusses the history and capabilities of websockets. It begins with a brief history of push technology in web browsers from the late 1980s to the introduction of websockets in HTML5 in 2009. It then provides an example of how websockets could enable grid computing by allowing a coordinating service to push code and data to clients. The document discusses some implications of building applications with websockets, including how it affects testing due to logic residing in both the client and server.

1. OMG! Someone broke the internet!
James Lewis
Monday, 24 May 2010

2. • Introductions
• So what are Websockets then?
• Interactions on the World Wide Web
• Implications for building application
• Recap
Monday, 24 May 2010

3. Monday, 24 May 2010

4. James Lewis
Developer
XP Coach
Sometime architect
Monday, 24 May 2010

5. 1990 2000 2010
A brief history of push to the browser
Monday, 24 May 2010

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. 1995...
Push invented
multipart/x-mixed-replace
1990 2000 2010
A brief history of push to the browser
Monday, 24 May 2010

8. 1996...
MS start using push
XMLHTTP
1990 2000 2010
A brief history of push to the browser
Monday, 24 May 2010

9. ~2003...
Mozilla
XHR
1990 2000 2010
A brief history of push to the browser
Monday, 24 May 2010

10. 2006...
The term COMET is coined
1990 2000 2010
A brief history of push to the browser
Monday, 24 May 2010

11. 2008...
HTML 5 (draft)
1990 2000 2010
A brief history of push to the browser
Monday, 24 May 2010

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. 1990 2000 2010
A brief history of push to the browser
Monday, 24 May 2010

14. An Example
Grid computing
Monday, 24 May 2010

15. An Example
Grid computing
What do you need to create a grid?
Monday, 24 May 2010

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. 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. Monday, 24 May 2010

19. Monday, 24 May 2010

20. OS
JVM
app
client - server
Anatomy of a traditional grid client
Monday, 24 May 2010

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. 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. Monday, 24 May 2010

24. SKYNET
Monday, 24 May 2010

25. SKYNET
we-run-any-code.com
Monday, 24 May 2010

26. How does we-run-any-code.com work?
Monday, 24 May 2010

27. How does we-run-any-code.com work?
Well, it doesn’t at the moment...
Monday, 24 May 2010

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. OS
JVM
app <Listener>
<Publisher>
client - server
Monday, 24 May 2010

30. OS Browser
JVM js engine
app <Listener> app
<Publisher>
client - server we-run-any-code.com
Monday, 24 May 2010

31. OS Browser
JVM js engine
app <Listener> app
Map
<Publisher>
client - server we-run-any-code.com
Monday, 24 May 2010

32. OS Browser
JVM js engine
app <Listener> app
Map
<Publisher> Reduce
client - server we-run-any-code.com
Monday, 24 May 2010

33. What do you need to create a grid?
Monday, 24 May 2010

34. What do you need to create a grid?
Execute arbitrary code
Co-ordinating service
Push code to client
Monday, 24 May 2010

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. 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. “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. [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. Interactions on the World Wide Web
Websockets
Monday, 24 May 2010

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. 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. Interactions on the World Wide Web
Websockets
Monday, 24 May 2010

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. 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. Interactions on the World Wide Web
Websockets
Monday, 24 May 2010

46. Interactions on the World Wide Web
Websockets
Monday, 24 May 2010

47. Interactions on the World Wide Web
Websockets
{"type":"message", "data":
{"algo":"2+2"}
}
Monday, 24 May 2010

48. Interactions on the World Wide Web
Websockets
{"type":"message", "data":
{"algo":"2+2"}
}
Monday, 24 May 2010

49. Interactions on the World Wide Web
Websockets
{"type":"message", "data":
{"algo":"2+2"}
}
{"type":"answer", "data": "4"}
Monday, 24 May 2010

50. Interactions on the World Wide Web
Websockets
{"type":"message", "data":
{"algo":"2+2"}
}
{"type":"answer", "data": "4"}
Monday, 24 May 2010

51. What did we just see?
Monday, 24 May 2010

52. What did we just see?
Raw TCP/IP based sockets
Monday, 24 May 2010

53. What did we just see?
Raw TCP/IP based sockets
Message exchange
Monday, 24 May 2010

54. What did we just see?
Raw TCP/IP based sockets
Message exchange
State transition logic in the client
Monday, 24 May 2010

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. 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. OS Browser
JVM js engine
app <Listener>
<Listener>
app
<Publisher>
<Publisher>
See? It’s a thick client!
Monday, 24 May 2010

58. But that doesn’t break the internet does it?
Monday, 24 May 2010

59. But that doesn’t break the internet does it?
well, what is the internet?
Monday, 24 May 2010

60. Monday, 24 May 2010

61. Monday, 24 May 2010

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. Image of ISP Backbone Connectivity reflecting Skitter Path Data - 1998
http://www.caida.org/Tools/Skitter/viz9808.html
Monday, 24 May 2010

64. Feature #1- scalability
Monday, 24 May 2010

65. Feature #1- scalability
“The internet trades latency for scalability”
Dr Jim Webber
Monday, 24 May 2010

66. Feature #1- scalability
“The internet trades latency for scalability”
Dr Jim Webber
“Push trades scalability for latency”
Monday, 24 May 2010

67. Feature #1- scalability
“The internet trades latency for scalability”
Dr Jim Webber
“Push trades scalability for latency”
Me
Monday, 24 May 2010

68. This may suprise you but the web doesn’t look like this
Monday, 24 May 2010

69. Monday, 24 May 2010

70. Monday, 24 May 2010

71. Client cache
Monday, 24 May 2010

72. Proxy cache
Client cache
Monday, 24 May 2010

73. Proxy cache CDN
Client cache
Monday, 24 May 2010

74. Proxy cache CDN Infrastructure
caches
Client cache
Monday, 24 May 2010

75. Proxy cache CDN Infrastructure Reverse proxy
caches cache
Client cache
Monday, 24 May 2010

76. Monday, 24 May 2010

77. Monday, 24 May 2010

78. Monday, 24 May 2010

79. Monday, 24 May 2010

80. Monday, 24 May 2010

81. Monday, 24 May 2010

82. Monday, 24 May 2010

83. And Websockets?
Monday, 24 May 2010

84. Monday, 24 May 2010

85. Monday, 24 May 2010

86. Monday, 24 May 2010

87. Feature #2 - availability
Monday, 24 May 2010

88. Feature #2 - availability
“The internet is not a five nines fabric”
Urs Hölzle
Monday, 24 May 2010

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. 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. Monday, 24 May 2010

92. 2005
Pakistan suffers a near complete Internet outage as a submarine cable
becomes defective (Jun)
Monday, 24 May 2010

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. Corus steel works, the Netherlands - ANP
Monday, 24 May 2010

95. Other stuff you will
need to think about
Monday, 24 May 2010

96. Other stuff you will
need to think about
Testing
Monday, 24 May 2010

97. Other stuff you will
need to think about
Testing
Coupling
Monday, 24 May 2010

98. Other stuff you will
need to think about
Testing
Coupling
Domain models
Monday, 24 May 2010

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. 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. But now the logic is in
both client and server
unit tests integration tests
functional tests
acceptance tests
Monday, 24 May 2010

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. 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. And the asynchronous stuff? You’re
pretty good at testing multi-threaded
code are you?
Monday, 24 May 2010

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. 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. Recap
Monday, 24 May 2010

108. Recap
Websockets are really cool!
Monday, 24 May 2010

109. Recap
Websockets are really cool!
And simple to use
Monday, 24 May 2010

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. Recap
Monday, 24 May 2010

112. Recap
You can implement some really exciting
applications with them
Monday, 24 May 2010

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. Recap
Monday, 24 May 2010

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. Ps we-run-any-code.com is coming...
Monday, 24 May 2010

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. Thanks!
James Lewis
jalewis@thoughtworks.com
http://twitter.com/boicy
http://bovon.org
Monday, 24 May 2010

119. Monday, 24 May 2010

120. we-run-any-code.com
A traditional implementation...
Monday, 24 May 2010

121. Interactions on the World Wide Web
Traditional we-run-any-code.com
Monday, 24 May 2010

122. Interactions on the World Wide Web
Traditional we-run-any-code.com
classic HTTP request-response
Monday, 24 May 2010

123. Interactions on the World Wide Web
Traditional we-run-any-code.com
classic HTTP request-response
Monday, 24 May 2010

124. Interactions on the World Wide Web
Traditional we-run-any-code.com
Monday, 24 May 2010

125. Interactions on the World Wide Web
Traditional we-run-any-code.com
Monday, 24 May 2010

126. Interactions on the World Wide Web
Traditional we-run-any-code.com
Monday, 24 May 2010

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. 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. Interactions on the World Wide Web
Traditional we-run-any-code.com
Monday, 24 May 2010

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. 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. 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. 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. 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. 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. Enables you to go from this:
Monday, 24 May 2010

137. To this
Monday, 24 May 2010

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. 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. 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. Hypermedia As The Engine Of
Application State
<html>
...
<a rel=”nextjob” href=”/nextjob” />
...
</html>
Monday, 24 May 2010

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