Websockets - OMG! Someone broke the internet!

OMG! Someone broke the internet!James Lewis

Monday, 24 May 2010

• Introductions

• So what are Websockets then?

• Interactions on the World Wide Web

• Implications for building application

• Recap

Monday, 24 May 2010

Monday, 24 May 2010

Developer

XP Coach

Sometime architect

James Lewis

Monday, 24 May 2010

201020001990

A brief history of push to the browser

Monday, 24 May 2010

201020001990

late ’80’s...Al Gore invents the interweb


Monday, 24 May 2010

201020001990

1995...Push inventedmultipart/x-mixed-replace


Monday, 24 May 2010

201020001990

1996...MS start using pushXMLHTTP


Monday, 24 May 2010

201020001990

~2003...MozillaXHR


Monday, 24 May 2010

201020001990

2006...The term COMET is coined


Monday, 24 May 2010

201020001990

2008...HTML 5 (draft)


Monday, 24 May 2010

201020001990

Dec 2009...Chrome build 4.0.249.0Websocket support added


Monday, 24 May 2010

201020001990


Monday, 24 May 2010

An ExampleGrid computing

Monday, 24 May 2010


What do you need to create a grid?

Monday, 24 May 2010


Clients that are capable of exectuting arbitrary algorithms


Monday, 24 May 2010



A co-ordinating service to push code / data to clients and assemble the results


Monday, 24 May 2010

Monday, 24 May 2010

Monday, 24 May 2010

OS

JVM

app

client - server

Anatomy of a traditional grid client

Monday, 24 May 2010

OS

JVM

app

client - server

<Publisher> A co-ordinating service to push code / data and assemble the results


Monday, 24 May 2010

OS

JVM

app

client - server

<Listener>

<Publisher>


A co-ordinating service to push code / data and assemble the results


Monday, 24 May 2010

Monday, 24 May 2010

SKYNET

Monday, 24 May 2010

SKYNETSKYNETwe-run-any-code.com

Monday, 24 May 2010

How does we-run-any-code.com work?

Monday, 24 May 2010


Well, it doesn’t at the moment...

Monday, 24 May 2010


Well, it doesn’t at the moment...

But if it did...

Monday, 24 May 2010

OS

JVM

app

client - server

<Listener>

<Publisher>

Monday, 24 May 2010

OS

JVM

app

client - server

<Listener>

<Publisher>

Browser

js engine

app

we-run-any-code.com

Monday, 24 May 2010

OS

JVM

app

client - server

<Listener>

<Publisher>

Browser

js engine

app

we-run-any-code.com

Map

Monday, 24 May 2010

OS

JVM

app

client - server

<Listener>

<Publisher>

Browser

js engine

app

we-run-any-code.com

Map

Reduce

Monday, 24 May 2010


Monday, 24 May 2010

Execute arbitrary code

Co-ordinating service

Push code to client


Monday, 24 May 2010

eval(string)Execute arbitrary code


Push code to client


Monday, 24 May 2010

eval(string)

Umm, a web server?

Execute arbitrary code


Push code to client Any ideas?


Monday, 24 May 2010

“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

[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

WebsocketsInteractions on the World Wide Web

Monday, 24 May 2010


GET /nextJob HTTP/1.1Host: werunanycode.comConnection: UpgradeUpgrade: WebSocket

Monday, 24 May 2010

HTTP/1.1 101 WebSocket Protocol HandshakeUpgrade: WebSocketConnection: Upgrade


GET /nextJob HTTP/1.1Host: werunanycode.comConnection: UpgradeUpgrade: WebSocket

Monday, 24 May 2010


Monday, 24 May 2010


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


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


Monday, 24 May 2010


Monday, 24 May 2010


{"type":"message", "data": {"algo":"2+2"}}

Monday, 24 May 2010



Monday, 24 May 2010



{"type":"answer", "data": "4"}

Monday, 24 May 2010



{"type":"answer", "data": "4"}

Monday, 24 May 2010

What did we just see?

Monday, 24 May 2010


Raw TCP/IP based sockets

Monday, 24 May 2010



Message exchange

Monday, 24 May 2010



Message exchange

State transition logic in the client

Monday, 24 May 2010



Message exchange


The building blocks of the World Wide Web

Monday, 24 May 2010



Message exchange


The building blocks of the World Wide Webthick clien

ts

^the World Wide Web

Monday, 24 May 2010

OS

JVM

app

Browser

js engine

app<Listener>

<Publisher>

<Listener>

<Publisher>

See? It’s a thick client!

Monday, 24 May 2010

But that doesn’t break the internet does it?

Monday, 24 May 2010

But that doesn’t break the internet does it?

well, what is the internet?

Monday, 24 May 2010

Monday, 24 May 2010

Monday, 24 May 2010

Characteristics of the interwebernet

identification of resources

manipulation of resources through representations

self-descriptive messages

HATEOAS

Source: Fielding, Roy. 2000. Architectural Styles and the Design of Network-based Software Architectures. PhD diss

layered system

Monday, 24 May 2010

Image of ISP Backbone Connectivity reflecting Skitter Path Data - 1998 http://www.caida.org/Tools/Skitter/viz9808.html

Monday, 24 May 2010

http://www.caida.org/Tools/Skitter/viz9808.html

http://www.caida.org/Tools/Skitter/viz9808.html

Feature #1- scalability

Monday, 24 May 2010

Feature #1- scalability“The internet trades latency for scalability”Dr Jim Webber

Monday, 24 May 2010

Feature #1- scalability“The internet trades latency for scalability”

“Push trades scalability for latency”

Dr Jim Webber

Monday, 24 May 2010

Feature #1- scalability“The internet trades latency for scalability”

“Push trades scalability for latency”

Dr Jim Webber

Me

Monday, 24 May 2010

This may suprise you but the web doesn’t look like thisMonday, 24 May 2010

Monday, 24 May 2010

Monday, 24 May 2010

Client cache

Monday, 24 May 2010

Client cache

Proxy cache

Monday, 24 May 2010

Client cache

Proxy cache CDN

Monday, 24 May 2010

Client cache

Proxy cache CDN Infrastructurecaches

Monday, 24 May 2010

Client cache

Proxy cache CDN Infrastructurecaches

Reverse proxycache

Monday, 24 May 2010

Monday, 24 May 2010

Monday, 24 May 2010

Monday, 24 May 2010

Monday, 24 May 2010

Monday, 24 May 2010

Monday, 24 May 2010

Monday, 24 May 2010

And Websockets?

Monday, 24 May 2010

Monday, 24 May 2010

Monday, 24 May 2010

Monday, 24 May 2010

Feature #2 - availability

Monday, 24 May 2010

Feature #2 - availability“The internet is not a five nines fabric”Urs Hölzle

Monday, 24 May 2010

Feature #2 - availability“The internet is not a five nines fabric”

“If you are going to build an internet scale application using push, you’d better not count on it’s availability”

Urs Hölzle

Monday, 24 May 2010

Feature #2 - availability“The internet is not a five nines fabric”

“If you are going to build an internet scale application using push, you’d better not count on it’s availability”

Urs Hölzle

Me

Monday, 24 May 2010

Monday, 24 May 2010

Pakistan suffers a near complete Internet outage as a submarine cable becomes defective (Jun)

2005

Monday, 24 May 2010

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)

2008

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/

Pakistan suffers a near complete Internet outage as a submarine cable becomes defective (Jun)

2005

Monday, 24 May 2010

http://www.zakon.org/robert/internet/timeline/

http://www.zakon.org/robert/internet/timeline/

Corus steel works, the Netherlands - ANP

Monday, 24 May 2010

Other stuff you will need to think about

Monday, 24 May 2010


Testing

Monday, 24 May 2010


Testing

Coupling

Monday, 24 May 2010


Testing

Coupling

Domain models

Monday, 24 May 2010

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

How do you normally test webapps?




</form></div>...

acceptance tests

integration tests

functional tests

unit tests

Monday, 24 May 2010

But now the logic is in both client and server

acceptance tests

integration tests

functional tests

unit tests

Monday, 24 May 2010


acceptance tests

integration tests

functional tests

unit tests

acceptance tests

integration tests

functional tests

unit tests

Monday, 24 May 2010


acceptance tests

integration tests

functional tests

unit tests

acceptance tests

integration tests

functional tests

unit tests

You don’t suck, so you are going to test both right?

Monday, 24 May 2010

And the asynchronous stuff? You’re pretty good at testing multi-threaded

code are you?

Monday, 24 May 2010


code are you?

Dan North and James’ first rule of concurrency

Monday, 24 May 2010


code are you?

Dan North and James’ first rule of concurrency

“Doug Lea does it better than you do...”

Monday, 24 May 2010

Recap

Monday, 24 May 2010

Websockets are really cool!

Recap

Monday, 24 May 2010

Websockets are really cool!And simple to use

Recap

Monday, 24 May 2010

Websockets are really cool!And simple to use

Recap

http://code.google.com/p/jquery-websocket/

http://jetty.codehaus.org/jetty/

http://www.google.com/chrome

Monday, 24 May 2010







Recap

Monday, 24 May 2010

You can implement some really exciting applications with them

Recap

Monday, 24 May 2010

You can implement some really exciting applications with them

They are particularly well-suited to low-latency stuff

Trading applications for example

Recap

Monday, 24 May 2010

Recap

Monday, 24 May 2010

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

Ps we-run-any-code.com is coming...

Monday, 24 May 2010

Welcome back James

SKYNET is active

The current grid size is:

What code would you like to run?

22,107,123

...

>>

>>

>>

>>

Monday, 24 May 2010

Thanks!

James Lewis

[email protected]://twitter.com/boicyhttp://bovon.org

Monday, 24 May 2010

mailto:[email protected]

mailto:[email protected]

http://twitter.com/boicy

http://twitter.com/boicy

http://bovon.org

http://bovon.org

Monday, 24 May 2010

A traditional implementation...

we-run-any-code.com

Monday, 24 May 2010

Traditional we-run-any-code.comInteractions on the World Wide Web

Monday, 24 May 2010


classic HTTP request-response

Monday, 24 May 2010


classic HTTP request-response

Monday, 24 May 2010


Monday, 24 May 2010


Monday, 24 May 2010


Monday, 24 May 2010


GET /index HTTP/1.1Host: we-run-any-code.com

Monday, 24 May 2010


GET /index HTTP/1.1Host: we-run-any-code.com

HTTP/1.1 200 OK

<html>...

<a rel=”nextjob” href=”/nextjob” />...

</html>

Monday, 24 May 2010


Monday, 24 May 2010


GET /nextjob HTTP/1.1Host: we-run-any-code.com

Monday, 24 May 2010


GET /nextjob HTTP/1.1Host: we-run-any-code.com HTTP/1.1 303 See Other

Location: /jobs/asd2b234c598

Monday, 24 May 2010




GET /jobs/asd2b234c598 HTTP/1.1Host: we-run-any-code.com

Monday, 24 May 2010







</form></div>...

GET /jobs/asd2b234c598 HTTP/1.1Host: we-run-any-code.com

HTTP/1.1 200 OK

Monday, 24 May 2010


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

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

Enables you to go from this:

Monday, 24 May 2010

To this

Monday, 24 May 2010

Representations of resources

Addressable

self-contained

(there’s this thing with media types, but we won’t go into that)

Monday, 24 May 2010





</form></div>...

Addressable

self-contained


Monday, 24 May 2010





</form></div>...

HTTP/1.1 303 See OtherLocation: /jobs/asd2b234c598 Addressable

self-contained


Monday, 24 May 2010

Hypermedia As The Engine Of Application State

<html>...


</html>

Monday, 24 May 2010

Hypermedia As The Engine Of Application State

<html>...


</html>

Starting Grid

GET Finding job

Running jobSubmitting answer

GET

GET

POST

Monday, 24 May 2010

Documents

Websockets - OMG! Someone broke the internet!