Skip to content

Instantly share code, notes, and snippets.

@angeloh

angeloh/index.html

Created May 10, 2014 23:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save angeloh/f9deb0ba4a9ac42d0dd8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save angeloh/f9deb0ba4a9ac42d0dd8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. angeloh created this gist May 10, 2014.
    170 changes: 170 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,170 @@
    <!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>