angeloh/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=9">
  <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  <title>Goodow Realtime Channel API Playground</title>

  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <!-- <script src="http://cdn.sockjs.org/sockjs-0.3.4.js"></script>
  <script src="https://d1fxtkz8shb9d2.cloudfront.net/sockjs-0.3.4.js"></script> -->
  <script src="bower_components/bower-sockjs-client/sockjs.js"></script>

  <!-- <script src="bower_components/realtime-channel/gwt.nocache.js"></script> -->
  <script src="bower_components/realtime-channel/realtime-channel.js"></script>
</head>
<style>
  .box {
    background-color: #F0F0F0;
    border: 5px solid blue;
    width: 400px;
    height: 300px;
  }

  .innerbox {
    overflow: auto;
    border: 5px solid blue;
    border-left: 0px;
    border-right: 0px;
  }

  body {
    background-color: #F0F0F0;
  }
</style>

<body>

<div id="send" class="box" style="position:absolute;left:0px;top:0px">

  <form onsubmit="return false;">
    Address:<input type="text" id="sendAddress" value="someaddress"/><br>
    Message:<input type="text" id="sendMessage" value="Hello, World!"/>
    <input type="button" id="sendButton" value="Send message"/>
  </form>

  <br>
  Sent messages:<br>

  <div id="sent" class="innerbox" style="width: 400px; height: 205px;">
  </div>
</div>

<div id="subscribe" class="box" style="position:absolute;left:450px;top:0px">

  <form onsubmit="return false;">
    Address:<input type="text" id="subscribeAddress" value="someaddress"/>
    <input type="button" id="subscribeButton" value="Subscribe"/>
  </form>

  <br>
  Subscriptions:<br>

  <div id="subscribed" class="innerbox" style="width: 400px; height: 230px;">
  </div>
</div>

<br>

<div id="receive" class="box" style="position:absolute;left:0px;top:350px">

  Received messages:<br>

  <div id="received" class="innerbox" style="width: 400px; height: 275px;">
  </div>

</div>

<div id="status" class="box" style="position:absolute;left:450px;top:350px">
  <input type="button" id="connectButton" value="Open connection"/><br>
  <input type="button" id="closeButton" value="Close connection"/><br>
  Connection Status:&nbsp;
  <div id="status_info">Not connected</div>
</div>

<script>

  var bus = null;

  function publish(address,  message) {
    if (bus) {
      var json = {text: message};
      bus.publish(address, json);
      /* bus.send(address, json, function(message) {
    	message.reply({end: "reply"});
      }); */
      $('#sent').append($("<code>").text("Address:" + address + " Message:" + JSON.stringify(json)));
      $('#sent').append($("</code><br>"));
    }
  }

  function subscribe(address) {
    if (bus) {
      var handlerRegistration = bus.registerHandler(address, function(message) {
        $('#received').append("Address:" + address + " Message:" + JSON.stringify(message.body()) + "<br>");
        var f = function(message) {
          console.log(JSON.stringify(message.body()));
        };
        message.reply({a:"b"}, f);
      });
      $('#subscribed').append($("<code>").text("Address:" + address));
      $('#subscribed').append($("</code><br>"));

      // You can unregister the handler like this:
      // handlerRegistration.unregisterHandler();
    }
  }

  function closeConn() {
    if (bus) {
      bus.close();
      bus = null;
    }
  }

  function openConn() {
    if (!bus) {
      var options = {debug:true, forkLocal:true};
      bus = new good.channel.WebSocketBus(window.location.toString() + "eventbus", options);
      // bus = new good.channel.WebSocketBus("http://data.goodow.com:8080/eventbus", options);

      bus.registerHandler("@goodow.bus.onOpen", function(message) {
        $("#status_info").text("Connected");
        console.log("Opened at: " + new Date().toString());
      });

      bus.registerHandler("@goodow.bus.onClose", function(message) {
        $("#status_info").text("Not connected");
        console.log("Closed at: " + new Date().toString());
      });

      bus.registerHandler("@goodow.bus.onError", function(error) {
        console.log("Error at: " + error);
      });
    }
  }

  $(document).ready(function() {
    $("#sendButton").click(function() {
      publish($("#sendAddress").val(), $("#sendMessage").val());
    });

    $("#subscribeButton").click(function() {
      subscribe($("#subscribeAddress").val());
    });

    $("#closeButton").click(function() {
      closeConn();
    });

    $("#connectButton").click(function() {
      openConn();
    });
  });

</script>
<a href="https://github.com/goodow/realtime"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>

	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9">
	<meta http-equiv="X-UA-Compatible" content="chrome=1" />
	<title>Goodow Realtime Channel API Playground</title>

	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<!-- <script src="http://cdn.sockjs.org/sockjs-0.3.4.js"></script>
	<script src="https://d1fxtkz8shb9d2.cloudfront.net/sockjs-0.3.4.js"></script> -->
	<script src="bower_components/bower-sockjs-client/sockjs.js"></script>

	<!-- <script src="bower_components/realtime-channel/gwt.nocache.js"></script> -->
	<script src="bower_components/realtime-channel/realtime-channel.js"></script>
	</head>
	<style>
	.box {
	background-color: #F0F0F0;
	border: 5px solid blue;
	width: 400px;
	height: 300px;
	}

	.innerbox {
	overflow: auto;
	border: 5px solid blue;
	border-left: 0px;
	border-right: 0px;
	}

	body {
	background-color: #F0F0F0;
	}
	</style>

	<body>

	<div id="send" class="box" style="position:absolute;left:0px;top:0px">

	<form onsubmit="return false;">
	Address:<input type="text" id="sendAddress" value="someaddress"/><br>
	Message:<input type="text" id="sendMessage" value="Hello, World!"/>
	<input type="button" id="sendButton" value="Send message"/>
	</form>

	<br>
	Sent messages:<br>

	<div id="sent" class="innerbox" style="width: 400px; height: 205px;">
	</div>
	</div>

	<div id="subscribe" class="box" style="position:absolute;left:450px;top:0px">

	<form onsubmit="return false;">
	Address:<input type="text" id="subscribeAddress" value="someaddress"/>
	<input type="button" id="subscribeButton" value="Subscribe"/>
	</form>

	<br>
	Subscriptions:<br>

	<div id="subscribed" class="innerbox" style="width: 400px; height: 230px;">
	</div>
	</div>

	<br>

	<div id="receive" class="box" style="position:absolute;left:0px;top:350px">

	Received messages:<br>

	<div id="received" class="innerbox" style="width: 400px; height: 275px;">
	</div>

	</div>

	<div id="status" class="box" style="position:absolute;left:450px;top:350px">
	<input type="button" id="connectButton" value="Open connection"/><br>
	<input type="button" id="closeButton" value="Close connection"/><br>
	Connection Status:
	<div id="status_info">Not connected</div>
	</div>

	<script>

	var bus = null;

	function publish(address, message) {
	if (bus) {
	var json = {text: message};
	bus.publish(address, json);
	/* bus.send(address, json, function(message) {
	message.reply({end: "reply"});
	}); */
	$('#sent').append($("<code>").text("Address:" + address + " Message:" + JSON.stringify(json)));
	$('#sent').append($("</code><br>"));
	}
	}

	function subscribe(address) {
	if (bus) {
	var handlerRegistration = bus.registerHandler(address, function(message) {
	$('#received').append("Address:" + address + " Message:" + JSON.stringify(message.body()) + "<br>");
	var f = function(message) {
	console.log(JSON.stringify(message.body()));
	};
	message.reply({a:"b"}, f);
	});
	$('#subscribed').append($("<code>").text("Address:" + address));
	$('#subscribed').append($("</code><br>"));

	// You can unregister the handler like this:
	// handlerRegistration.unregisterHandler();
	}
	}

	function closeConn() {
	if (bus) {
	bus.close();
	bus = null;
	}
	}

	function openConn() {
	if (!bus) {
	var options = {debug:true, forkLocal:true};
	bus = new good.channel.WebSocketBus(window.location.toString() + "eventbus", options);
	// bus = new good.channel.WebSocketBus("http://data.goodow.com:8080/eventbus", options);

	bus.registerHandler("@goodow.bus.onOpen", function(message) {
	$("#status_info").text("Connected");
	console.log("Opened at: " + new Date().toString());
	});

	bus.registerHandler("@goodow.bus.onClose", function(message) {
	$("#status_info").text("Not connected");
	console.log("Closed at: " + new Date().toString());
	});

	bus.registerHandler("@goodow.bus.onError", function(error) {
	console.log("Error at: " + error);
	});
	}
	}

	$(document).ready(function() {
	$("#sendButton").click(function() {
	publish($("#sendAddress").val(), $("#sendMessage").val());
	});

	$("#subscribeButton").click(function() {
	subscribe($("#subscribeAddress").val());
	});

	$("#closeButton").click(function() {
	closeConn();
	});

	$("#connectButton").click(function() {
	openConn();
	});
	});

	</script>
	<a href="https://github.com/goodow/realtime"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
	</body>
	</html>