index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  
  <title>Emerging tech</title>
  <style type="text/css">body{font-family: sans-serif;} label{display:block;}</style>
</head>
<body>

  <h1>Emerging tech, yo!</h1>
  <h2 id="data">-</h2>

  <form>
    <label>
      Node
      <input name="node" value="dc42">
    </label>

    <label>
      Payload
      <input name="payload" value="0">
    </label>

    <input type="submit">

  </form>

  <script src="bower_components/pubnub/web/pubnub.min.js"></script>
  <script type="text/javascript">

    var pubnub = PUBNUB.init({
      subscribe_key: 'sub-c-9c92c072-698f-11e4-97dd-02ee2ddab7fe',
      publish_key: 'pub-c-10a63f9f-359c-472b-a6ba-d55766a60e69'
    });

    pubnub.subscribe({
      channel: 'dc42',
      backfill: true,
      callback: function(message){
        if(message.value){
          var v = message.value;
          document.body.style.backgroundColor = 'rgb('+v+','+v+','+v+')';
          document.body.style.color = v < 127 ? '#fff' : '#000';
          document.getElementById('data').innerText = v;
        }
      }
    });


    document.querySelector('form').onsubmit = function(e){
      e.preventDefault();

      var message = {
          node:    document.querySelector('[name=node]').value,
          payload: document.querySelector('[name=payload]').value.split(',').map(function(n){
            return parseInt(n, 10)
          })
        }

      pubnub.publish({
        channel:'inbound',
        message:message
      })

      console.log(">>", message)

    }


  </script>
</body>
</html>