<script>
        var socket = io('http://192.168.40.148:3001');
        socket.on('connect', function (data) {
            drawMap('/theme/map2.jpg');

            socket.on('position_update', function (data) {
                console.log('position_update', data, data.length);
                for (i = 0; i < data.length; i++)
                    drawCircle(data);
            });

            socket.on('auth', function (data) {
                console.log('auth ', data);
            });

            socket.emit('auth', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1ZDRiOWVlMD
AzZmUxMTExMTBiZWEyODIiLCJ1c2VybmFtZSI6Im5hbWRsIiwiZGlzcGxheU5hbWUiOi
JOYW0gTeG6t3QgU-G6r3QiLCJpYXQiOjE1NzEzMDYyMTN9.FvHhN1ZO-EdECWcyZteXGG9UvL5yG-fa1QttDsEUKwo');
            socket.emit('box', { 'box': '0,0,1691,1156' });
        });

        socket.on('disconnect', function (data) {
            console.log('disconnect');
        });

        function drawCircle(dataPosition) {
            var canvas = document.getElementById('mycanvas');
            var context = canvas.getContext('2d');
            context.beginPath();
            context.arc(dataPosition.x, dataPosition.y, 10, 0, 2 * Math.PI, false);
            context.fillStyle = "rgba(231, 10, 10, 0.5)";
            context.fill();
            context.lineWidth = 1;
            context.strokeStyle = '#ff0000';
            context.stroke();
        }

        function drawMap(imageUrl) {
            var canvas = document.getElementById('mycanvas');
            var context = canvas.getContext('2d');
            var img = new Image;
            img.onload = function () { context.drawImage(img, 0, 0); };
            img.src = imageUrl;
        }
    </script>