෴

Jed Schmidt

Jed Smith

(fab)

140byt.es

ramendan

   .---.
_ /     ' .---.
>|  o    `     `\
` \       .---._ '._ ,
   '-.;         /`  /'
      \    '._.'   /
       '.        .'
         `";--\_/
         _/_   |
      -'`/  .--;--
        '    .'

   .---.
_ /     ' .---.
>|  o    `     `\
` \       .---._ '._ ,
   '-.;         /`  /'
      \    '._.'   /
       '.        .'
         `";--\_/
         _/_   |
      -'`/  .--;--
        '    .'

          39°C

so, yeah.

<aside>

brought to you by

weenote

it's like
keynote.

but more
wee.

for more information, go to:
github.com/jed/weenote

</aside>

so.

▁ ▂ ▃ ▅ ▆ ▇

1 to 10

where
10 == @substack

◀◀

5,443,200
seconds ago

2.000000
months ago

8/2/2012

2/8/2012

"wondering if this exists:
a @nodejs server that exposes
websocket-connected browsers
over subdomains as disposable
webhook-ready endpoints."

— @jedschmidt

✔ nodejs
✔ server
✔ websocket
✔ connected
✔ browser
✔ webhook
✔ endpoint

✔ nodejs
✔ server
✔ websocket
✔ connected
✔ browser
✔ webhook
✔ endpoint
✖ real-time
✖ transpile

browserver

a node.js server

a node.js server
in your browser

browserver

[yo dawg!]




      http.createServer(function(req, res){ ... })

      http.get("http://rejectjs.org", function(res){ ... })



    <script>
      http.createServer(function(req, res){ ... })

      http.get("http://rejectjs.org", function(res){ ... })
    </script>


  <head>
    <script>
      http.createServer(function(req, res){ ... })

      http.get("http://rejectjs.org", function(res){ ... })
    </script>
  </head>

<html>
  <head>
    <script>
      http.createServer(function(req, res){ ... })

      http.get("http://rejectjs.org", function(res){ ... })
    </script>
  </head>
</html>

W
T
F

WHAT
THE
FRÜSTÜCK

SINHALA
PUNCTUATION
KUNDDALIYA

U+0DF4

෴

෴
browserver

browserver is
HTTP over WS

how it works

five easy steps

browser
connects
to server

server
assigns/announces
a hostname

server proxies
HTTP in

server proxies
HTTP out

browser
becomes
server

browserver.org

so.

specifically:

browserver

github.com/jed/
browserver-node

1.66kb

var http   = require("http")
var engine = require("engine.io")
var brow   = require("browserver")

var http   = require("http")
var engine = require("engine.io")
var brow   = require("browserver")

var httpServer = http.createServer(function(req, res){ ... })
var wsServer   = engine.attach(httpServer)
var browServer = new brow.Server

var http   = require("http")
var engine = require("engine.io")
var brow   = require("browserver")

var httpServer = http.createServer(function(req, res){ ... })
var wsServer   = engine.attach(httpServer)
var browServer = new brow.Server

browServer.listen(wsServer)

var http   = require("http")
var engine = require("engine.io")
var brow   = require("browserver")

var httpServer = http.createServer(function(req, res){ ... })
var wsServer   = engine.attach(httpServer)
var browServer = new brow.Server

browServer.listen(wsServer)
browServer.listen(httpServer, {hostname: "*.myserver.com"})

var http   = require("http")
var engine = require("engine.io")
var brow   = require("browserver")

var httpServer = http.createServer(function(req, res){ ... })
var wsServer   = engine.attach(httpServer)
var browServer = new brow.Server

browServer.listen(wsServer)
browServer.listen(httpServer, {hostname: "*.myserver.com"})
browserver.on("connection", function(server){ ... })

var http   = require("http")
var engine = require("engine.io")
var brow   = require("browserver")

var httpServer = http.createServer(function(req, res){ ... })
var wsServer   = engine.attach(httpServer)
var browServer = new brow.Server

browServer.listen(wsServer)
browServer.listen(httpServer, {hostname: "*.myserver.com"})
browserver.on("connection", function(server){ ... })

httpServer.listen(80)

browserver

github.com/jed/
browserver-client

1.31kb

<html>
  <head>
                                                     








  </head>
</html>

<html>
  <head>
    <script src="/path/to/engine.js"></script>       








  </head>
</html>

<html>
  <head>
    <script src="/path/to/engine.js"></script>       
    <script src="/browserver.js"></script>







  </head>
</html>

<html>
  <head>
    <script src="/path/to/engine.js"></script>       
    <script src="/browserver.js"></script>
    <script>





    </script>
  </head>
</html>

<html>
  <head>
    <script src="/path/to/engine.js"></script>       
    <script src="/browserver.js"></script>
    <script>
      var ws = new eio.Socket({host: "myserver.com"})




    </script>
  </head>
</html>

<html>
  <head>
    <script src="/path/to/engine.js"></script>       
    <script src="/browserver.js"></script>
    <script>
      var ws = new eio.Socket({host: "myserver.com"})

      http.createServer(function(req, res) {
        // your logic here
      })
    </script>
  </head>
</html>

<html>
  <head>
    <script src="/path/to/engine.js"></script>       
    <script src="/browserver.js"></script>
    <script>
      var ws = new eio.Socket({host: "myserver.com"})

      http.createServer(function(req, res) {
        // your logic here
      }).listen(ws)
    </script>
  </head>
</html>

WebSockets

or Server-sent events

or WebRTC

or polling

or pollllllllllllllllllllllllling

(long polling)

HTTP

why HTTP?

①

why JavaScript?

code reuse?

✖

low
cognitive
overhead

why HTTP?

②

why node.js?

callbacks

callbacks
are the

best

worst

best

thing about
node.

node : callbacks
http : webhooks

node : callbacks
http : webhooks

thing.fetch(callback)

thing.fetch(callback)
thing.fetch(url)

webhooks

webhooks are the best idea

webhooks are the best idea
we're not using enough of

webhooks can help you:

abstract
transports

decouple
services

use the tech
you already know

questions?
comments?

   .---.
_ /     ' .---.
>|  o    `     `\
` \       .---._ '._ ,
   '-.;         /`  /'
      \    '._.'   /
       '.        .'
         `";--\_/
         _/_   |
      -'`/  .--;--
        '    .'

       thank you!