<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="UTF-8" />

  <link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />

  <script type="text/javascript" src="lib/sockjs.js"></script>
  <script type="text/javascript" src="static/jquery.min.js"></script>

  <script type="text/javascript" src="config.js"></script>

  <style type="text/css">
      .cursor {
        height: 30px;
        width: 30px;
        position: absolute;
        border: 1px solid gray;
        z-index: -1;
      }
  </style>

</head>
<body>

<form>
  <select id="transport">
  <option value="">- any - </option>
  <option value="websocket">websocket</option>
  <option value="not-websocket">- not websocket -</option>
  <option value="xdr-streaming">xdr-streaming</option>
  <option value="xhr-streaming">xhr-streaming</option>
  <option value="iframe-eventsource">iframe-eventsource</option>
  <option value="iframe-htmlfile">iframe-htmlfile</option>
  <option value="xdr-polling">xdr-polling</option>
  <option value="xhr-polling">xhr-polling</option>
  <option value="iframe-xhr-polling">iframe-xhr-polling</option>
  <option value="jsonp-polling">jsonp-polling</option>
  </select>
  <input type="button" value="Connect" id="connect">
  <input type="button" value="Disconnect" id="disconnect" disabled="yes">
</form>

  Latency: <code id="latency"></code><br>
  <code id="logs" style="height:200px; overflow:auto; display: block; border: 1px gray solid;">
  </code>

<script>
    function log(a) {
            if ('console' in window && 'log' in window.console) {
                console.log(a);
            }
            $('#logs').append($("<code>").text(a));
            $('#logs').append($("<br>"));
            $('#logs').scrollTop($('#logs').scrollTop()+10000);
      }

    var sjs = null;
    var protocol;
    $('#connect').click(function() {
        $('#connect').attr('disabled', true);
        $('#disconnect').each(function(_,e){e.disabled='';});
        var protocol = $('#transport').val() || undefined;
        if (protocol === 'not-websocket') {
            protocol = ['xdr-streaming',
                      'xhr-streaming',
                      'iframe-eventsource',
                      'iframe-htmlfile',
                      'xdr-polling',
                      'xhr-polling',
                      'iframe-xhr-polling',
                      'jsonp-polling'];
        }
        log('[connecting] ' + protocol);
        options = jQuery.extend({}, client_opts.sockjs_opts)
        options.protocols_whitelist = typeof protocol === 'string' ?
                                                        [protocol] : protocol;
        sjs = new SockJS(client_opts.url + '/broadcast', null, options);
        sjs.onopen = onopen
        sjs.onclose = onclose;
        sjs.onmessage = xonmessage;
    });
    $('#disconnect').click(function() {
        $('#disconnect').attr('disabled', true);
        log('[disconnecting]');
        sjs.close();
    });

    var onopen = function() {
        log('connected ' + sjs.protocol);
    };
    var onclose = function(e) {
        log('disconnected ' + e);
        $('#connect').each(function(_,e){e.disabled='';});
        $('#disconnect').attr('disabled', true);
    };
    var myself = (''+Math.random()).substr(2);
    var xonmessage = function(e) {
        var msg = JSON.parse(e.data);
        if (msg.id === myself) {
            var td = (new Date()).getTime() - msg.t;
            $('#latency').text('' + td + ' ms');
        }
        var id = 'cursor_'+msg.id;
        if ($('#'+id).length === 0) {
            $("body").append('<div id="' + id + '" class="cursor"></div>');
        }
        $('#'+id).offset({top:msg.y-15, left:msg.x-15});
    };
    var x, y;
    var last_x, last_y, tref;
    $(document).mousemove(function(e) {
         x = e.pageX; y = e.pageY;
         if(!tref) poll();
    });
    var poll = function() {
         tref = null;
         if (last_x === x && last_y === y)
             return;
         var msg = {x:x, y:y, t: (new Date()).getTime(), id:myself};
         last_x = x; last_y = y;
         var raw_msg = JSON.stringify(msg);
         if (sjs && sjs.readyState === SockJS.OPEN) {
             sjs.send(raw_msg);
         }
         tref = setTimeout(poll, 200);
    };
    $('#connect').each(function(_,e){e.disabled='';});
    $('#disconnect').attr('disabled', true);
</script>
</body>
</html>