mouseover on clicks will show client data
[realtime-mouse-tracking.git] / a.js
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
var host = "/";
 
function loadJs(i,s,o,g,c){
    a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m);
    a.onload=function(){
        c();
    }
}
loadJs(window,document,'script','/socket.io-client/socket.io.js', function(){NRTTAdmin()});
 
function NRTTAdmin(){
    var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
            window.setTimeout(callback, 1000 / 60)
    };
    var canvas = document.createElement("canvas");
    var width = 1920;
    var height = 1080;
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');
 
    var div = document.getElementById("canvas");
    document.body.insertBefore(canvas, div);
 
    var clicks = [];
    var moves = [];
 
    var step = function () {
        render();
        animate(step);
    };
 
    function render(){
        ctx.clearRect(0, 0, width, height);
        for(key in clicks) {
            click = clicks[key];
            if (click.time < Date.now()) {
                clicks.splice(key, 1);
            }
            ctx.globalAlpha = 0.5;
            ctx.beginPath();
            ctx.fillStyle = click.color;
            ctx.arc(click.x, click.y, 4, 0, 2 * Math.PI, true);
            ctx.fill();
            ctx.lineWidth = 0.5;
            ctx.strokeStyle = '#003300';
            ctx.stroke();
        }
        for(key in moves) {
            move = moves[key];
            if (move.time < Date.now()) {
                moves.splice(key, 1);
            }
            ctx.beginPath();
            ctx.moveTo(move[0].x, move[0].y);
            ctx.lineTo(move[1].x, move[1].y);
            ctx.stroke();
        }
    }
 
    animate(step);
 
    var aSocket = io();
    aSocket.emit('t:connect', {w:window.width, h:window.height, admin:1234});
    aSocket.on('t:click', function(click){
        click.time = Date.now() + 15000;
        clicks.push(click);
    });
    aSocket.on('t:mousemove', function(move){
        move.time = Date.now() + 15000;
        moves.push(move);
    });
    aSocket.on('disconnect', function(){
    });
}
 
comments