github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/themes/wind/static/libs/sockjs-client-1.1.0/tests/html/example-cursors.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3  <head>
     4    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     5    <meta charset="UTF-8" />
     6  
     7    <link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />
     8  
     9    <script type="text/javascript" src="lib/sockjs.js"></script>
    10    <script type="text/javascript" src="static/jquery.min.js"></script>
    11  
    12    <script type="text/javascript" src="config.js"></script>
    13  
    14    <style type="text/css">
    15        .cursor {
    16          height: 30px;
    17          width: 30px;
    18          position: absolute;
    19          border: 1px solid gray;
    20          z-index: -1;
    21        }
    22    </style>
    23  
    24  </head>
    25  <body>
    26  
    27  <form>
    28    <select id="transport">
    29    <option value="">- any - </option>
    30    <option value="websocket">websocket</option>
    31    <option value="not-websocket">- not websocket -</option>
    32    <option value="xdr-streaming">xdr-streaming</option>
    33    <option value="xhr-streaming">xhr-streaming</option>
    34    <option value="iframe-eventsource">iframe-eventsource</option>
    35    <option value="iframe-htmlfile">iframe-htmlfile</option>
    36    <option value="xdr-polling">xdr-polling</option>
    37    <option value="xhr-polling">xhr-polling</option>
    38    <option value="iframe-xhr-polling">iframe-xhr-polling</option>
    39    <option value="jsonp-polling">jsonp-polling</option>
    40    </select>
    41    <input type="checkbox" id="sameOrigin" checked>Same Origin?
    42    <input type="button" value="Connect" id="connect">
    43    <input type="button" value="Disconnect" id="disconnect" disabled="yes">
    44  </form>
    45  
    46    Latency: <code id="latency"></code><br>
    47    <code id="logs" style="height:200px; overflow:auto; display: block; border: 1px gray solid;">
    48    </code>
    49  
    50  <script>
    51      function log(a) {
    52              if ('console' in window && 'log' in window.console) {
    53                  console.log(a);
    54              }
    55              $('#logs').append($("<code>").text(a));
    56              $('#logs').append($("<br>"));
    57              $('#logs').scrollTop($('#logs').scrollTop()+10000);
    58        }
    59  
    60      var sjs = null;
    61      var transport;
    62      $('#connect').click(function() {
    63          $('#connect').attr('disabled', true);
    64          $('#disconnect').each(function(_,e){e.disabled='';});
    65          var transport = $('#transport').val() || undefined;
    66          if (transport === 'not-websocket') {
    67              transport = ['xdr-streaming',
    68                        'xhr-streaming',
    69                        'eventsource',
    70                        'iframe-eventsource',
    71                        'htmlfile',
    72                        'iframe-htmlfile',
    73                        'xdr-polling',
    74                        'xhr-polling',
    75                        'iframe-xhr-polling',
    76                        'jsonp-polling'];
    77          }
    78          log('[connecting] ' + transport);
    79          var url;
    80          if ($('#sameOrigin').prop('checked')) {
    81            if (window.location.origin) url = window.location.origin;
    82            else {
    83              url = window.location.protocol + '//' + window.location.hostname +
    84                (window.location.port ? ':' + window.location.port : '');
    85            }
    86          } else {
    87            url = clientOptions.url;
    88          }
    89          sjs = new SockJS(url + '/broadcast', null, { transports: transport });
    90          sjs.onopen = onopen
    91          sjs.onclose = onclose;
    92          sjs.onmessage = xonmessage;
    93      });
    94      $('#disconnect').click(function() {
    95          $('#disconnect').attr('disabled', true);
    96          log('[disconnecting]');
    97          sjs.close();
    98      });
    99  
   100      var onopen = function() {
   101          log('connected ' + sjs.transport);
   102          $('#sameOrigin').attr('disabled', true);
   103      };
   104      var onclose = function(e) {
   105          log('disconnected ' + e.code + ', ' + e.reason);
   106          $('#connect').each(function(_,e){e.disabled='';});
   107          $('#disconnect').attr('disabled', true);
   108          $('#sameOrigin').attr('disabled', false);
   109      };
   110      var myself = (''+Math.random()).substr(2);
   111      var xonmessage = function(e) {
   112          var msg = JSON.parse(e.data);
   113          if (msg.id === myself) {
   114              var td = (new Date()).getTime() - msg.t;
   115              $('#latency').text('' + td + ' ms');
   116          }
   117          var id = 'cursor_'+msg.id;
   118          if ($('#'+id).length === 0) {
   119              $("body").append('<div id="' + id + '" class="cursor"></div>');
   120          }
   121          $('#'+id).offset({top:msg.y-15, left:msg.x-15});
   122      };
   123      var x, y;
   124      var last_x, last_y, tref;
   125      $(document).mousemove(function(e) {
   126           x = e.pageX; y = e.pageY;
   127           if(!tref) poll();
   128      });
   129      var poll = function() {
   130           tref = null;
   131           if (last_x === x && last_y === y)
   132               return;
   133           var msg = {x:x, y:y, t: (new Date()).getTime(), id:myself};
   134           last_x = x; last_y = y;
   135           var raw_msg = JSON.stringify(msg);
   136           if (sjs && sjs.readyState === SockJS.OPEN) {
   137               sjs.send(raw_msg);
   138           }
   139           tref = setTimeout(poll, 200);
   140      };
   141      $('#connect').each(function(_,e){e.disabled='';});
   142      $('#disconnect').attr('disabled', true);
   143  </script>
   144  </body>
   145  </html>