From Code to Community: Sponsoring The Perl and Raku Conference 2025 Learn more

VTI / SockJS-0.10 / t-vendor / html / example-cursors.html 

            

              
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

              
<!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>