Slide 1

Slide 1 text

localnode 2011

Slide 2

Slide 2 text

problem nginx http://localhost:8000 http://www.google.com ?

Slide 3

Slide 3 text

solution (proxy) nginx http://sub.whatever.com local tunnel :8000 :8080 :80 whatever.com

Slide 4

Slide 4 text

exorcise the daemon nginx http://sub.whatever.com local tunnel :8000 :8080 :80 whatever.com ⊘

Slide 5

Slide 5 text

“If the only tool you have is a browser, treat everything as if it were a web page.” - Nobody ever (but play along)

Slide 6

Slide 6 text

nginx http://sub.localno.de :8000 :80 http://localno.de/ node.js socket.io localno.de

Slide 7

Slide 7 text

“But wait, that’s cross- domain!”

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

nginx http://localno.de/ http://localhost:8000/ localnode.html postMessage xhr2 socket.io

Slide 10

Slide 10 text

design choices • No registration, tunneler reserves subdomain for as long as (s)he’s connected • Iframe source downloadable as a static file to be hosted by local web server • Tunnel is created as soon as static file is detected at URL tunneler specifies

Slide 11

Slide 11 text

challenges

Slide 12

Slide 12 text

concurrent requests • >1 request is handled in parallel • node.js needs to keep them straight and respond to the correct request • We created a unique token identifier kept through entire request/response cycle

Slide 13

Slide 13 text

cookies / headers • Headers are sent along with the url • Here’s what a request to the web tunnel looks like: { token: ‘some-unique-token’, url: ‘/foo/bar/’, method: ‘GET’, headers: ‘User-Agent Mozilla/5.0...’, {

Slide 14

Slide 14 text

binary data • JavaScript doesn’t support binary strings • XMLHttpRequest2 includes responseType “arraybuffer” https://developer.mozilla.org/en/ JavaScript_typed_arrays/ArrayBuffer

Slide 15

Slide 15 text

binary data • Create a typed array from XHR2’s array buffer • Base64 encode the typed array of bytes • You’re now serializing binary data in JS! var xhr = new XMLHttpRequest(); xrh.responseType = ‘arraybuffer’; xhr.onload = function() { var bytes = new Uint8Array(this.response); // you’re off to the races! }

Slide 16

Slide 16 text

binary data In node, of course, deserializing base64 and sending it down as a response is easy: var buffer = new Buffer(content, ‘base64’); res.end(buffer);

Slide 17

Slide 17 text

Our first serialized image using localnode

Slide 18

Slide 18 text

limitations

Slide 19

Slide 19 text

301 / 302 redirects • XHR2 does NOT pass “location” header • Instead, the redirect happens silently in the guts of the browser • Result is outdated url on the client THIS SUCKS. Please provide a fix! Dear W3C,

Slide 20

Slide 20 text

file upload • Actually, this one is possible, we just didn’t have time to accomplish it. • XHR2.send accepts an instance of FormData for multi-part form posts. • Node.js would need to base64 encode for sending to the iframe via postMessage https://developer.mozilla.org/en/ XMLHttpRequest/FormData

Slide 21

Slide 21 text

absolute urls • Didn’t your momma teach you not to use absolute urls to your own domain? • Could be solved with a regex, but I’d rather break your site.

Slide 22

Slide 22 text

this slide intentionally left blank except for that and that and that and that and that

Slide 23

Slide 23 text

Repair Democracy for Fun and Profit votizen.com/jobs