Question

晚上好。我是新来的人，希望我在正确的地方问正确的问题！

我基本上只是想增强我在github https://github.com/voronianski/realtime-geolocation-demo

上找到的功能

我让它运行了很多更改，并且现在可以清晰地显示地图，我认为旧代码真的过时了。一切正常，但应该显示其他已连接的用户，但不显示。我无法在运行plesk的云服务器上运行它时进行任何调试。

我将包含我的代码，该代码与地图上显示的其他代码似乎运行良好。谁能帮我解决这个问题。是因为它确实是旧代码，而新版本的东西运行不一样吗？好了，这是我的代码，如果能得到帮助，谢谢。

我的server.js

var http = require('http');
var Static = require('node-static');
var app = http.createServer(handler);
var io = require('socket.io').listen(app);
var port = 8080;

var files = new Static.Server('./public');

function handler (request, response) {
    request.on('end', function() {
        files.serve(request, response);
    }).resume();
}

// delete to see more logs from sockets


io.sockets.on('connection', function (socket) {

    socket.on('send:coords', function (data) {
        socket.broadcast.emit('load:coords', data);
    });
});

// start app on specified port
app.listen(port);
console.log('Your server goes on localhost:' + port);

Application.js

$(function() {
    // generate unique user id
    var userId = Math.random().toString(16).substring(2,15);
    var socket = io.connect('/');
    var map;

    var info = $('#infobox');
    var doc = $(document);

    // custom marker's icon styles
    var tinyIcon = L.Icon.extend({
        options: {
            shadowUrl: '../assets/marker-shadow.png',
            iconSize: [25, 39],
            iconAnchor:   [12, 36],
            shadowSize: [41, 41],
            shadowAnchor: [12, 38],
            popupAnchor: [0, -30]
        }
    });
    var redIcon = new tinyIcon({ iconUrl: '../assets/marker-red.png' });
    var yellowIcon = new tinyIcon({ iconUrl: '../assets/marker-yellow.png' });

    var sentData = {};

    var connects = {};
    var markers = {};
    var active = false;

    socket.on('load:coords', function(data) {
        if (!(data.id in connects)) {
            setMarker(data);
        }

        connects[data.id] = data;
        connects[data.id].updated = $.now();
    });

    // check whether browser supports geolocation api
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(positionSuccess, positionError, { enableHighAccuracy: true });
    } else {
        $('.map').text('Your browser is out of fashion, there\'s no geolocation!');
    }

    function positionSuccess(position) {
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        var acr = position.coords.accuracy;

        // mark user's position
        var userMarker = L.marker([lat, lng], {
            icon: redIcon
        });
        // uncomment for static debug
        // userMarker = L.marker([51.45, 30.050], { icon: redIcon });

        // load leaflet map

    var map = L.map('map').fitWorld();

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(map);
        userMarker.addTo(map);
        userMarker.bindPopup('<p>You are there! Your ID is ' + userId + '</p>').openPopup();

        var emit = $.now();
        // send coords on when user is active
        doc.on('mousemove', function() {
            active = true;

            sentData = {
                id: userId,
                active: active,
                coords: [{
                    lat: lat,
                    lng: lng,
                    acr: acr
                }]
            };

            if ($.now() - emit > 30) {
                socket.emit('send:coords', sentData);
                emit = $.now();
            }
        });
    }

    doc.bind('mouseup mouseleave', function() {
        active = false;
    });

    // showing markers for connections
    function setMarker(data) {
        for (var i = 0; i < data.coords.length; i++) {
            var marker = L.marker([data.coords[i].lat, data.coords[i].lng], { icon: yellowIcon }).addTo(map);
            marker.bindPopup('<p>One more external user is here!</p>');
            markers[data.id] = marker;
        }
    }

    // handle geolocation api errors
    function positionError(error) {
        var errors = {
            1: 'Authorization fails', // permission denied
            2: 'Can\'t detect your location', //position unavailable
            3: 'Connection timeout' // timeout
        };
        showError('Error:' + errors[error.code]);
    }

    function showError(msg) {
        info.addClass('error').text(msg);

        doc.click(function() {
            info.removeClass('error');
        });
    }

    // delete inactive users every 15 sec
    setInterval(function() {
        for (var ident in connects){
            if ($.now() - connects[ident].updated > 15000) {
                delete connects[ident];
                map.removeLayer(markers[ident]);
            }
        }
    }, 15000);
});

而index.html是

<!DOCTYPE html>
<html>
<head>

    <title>Mobile tutorial - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>


    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #map {
            width: 600px;
            height: 400px;
        }
    </style>

    <style>body { padding: 0; margin: 0; } #map { height: 100%; width: 100vw; }</style>
</head>
<body>

<div id='map'></div>



    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script src="/socket.io/socket.io.js"></script>
    <script src="./js/application.js"></script>


</body>
</html>

我希望这足够了，并且我已经做对了，如果还没有，我很抱歉。纠正我，我将对其进行更改或添加我必须要做的。

谢谢，拉里（Larry）

Answer 1

您需要添加此代码。然后，您可以显示来自阵列插槽的已连接用户

const sockets = [];
io.sockets.on('connection', onConnection.bind(this));

function onConnection(socket) {
  socket.on('send:coords', function (data) {
     socket.broadcast.emit('load:coords', data);
  }); 
  sockets.push(socket);
}

然后删除此代码：

io.sockets.on('connection', function (socket) {

    socket.on('send:coords', function (data) {
        socket.broadcast.emit('load:coords', data);
    });
});

Answer 2

当我从var map = L.map（'map'）。fitWorld（）;中删除var时，它就可以正常工作了

但是添加新用户似乎有点慢？我知道删除它们但不添加它们存在延迟。有什么建议么？谢谢

Node.js应用程序未显示连接的用户？

2 个答案: