Localnode

An explanation of the technology behind my team's node.js knockout 2011 entry, Localnode.

1. localnode 2011
2. problem nginx http://localhost:8000 http://www.google.com ?
3. solution (proxy) nginx http://sub.whatever.com local tunnel :8000 :8080 :80 whatever.com
4. exorcise the daemon nginx http://sub.whatever.com local tunnel :8000 :8080 :80 whatever.com ⊘
5. “If the only tool you have is a browser, treat everything as if it were a web page.” - Nobody ever (but play along)
6. nginx http://sub.localno.de :8000 :80 http://localno.de/ node.js socket.io localno.de
7. “But wait, that’s cross- domain!”
9. nginx http://localno.de/ http://localhost:8000/ localnode.html postMessage xhr2 socket.io <iframe>
10. 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
11. challenges
12. 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
13. 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...’, {
14. binary data • JavaScript doesn’t support binary strings • XMLHttpRequest2 includes responseType “arraybuffer” https://developer.mozilla.org/en/ JavaScript_typed_arrays/ArrayBuffer
15. 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! }
16. 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);
17. Our first serialized image using localnode
18. limitations
19. 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,
20. 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
21. 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.
22. this slide intentionally left blank except for that and that and that and that and that
23. Repair Democracy for Fun and Profit votizen.com/jobs