Как отправить координаты с сервера node.js клиенту leaflet.js

Question

Я пытаюсь отправить координату с сервера node.js и socket.io (index.js) на client.html. В HTML-клиенте координата будет прочитана Leaflet. Проблема в том, что координата не может быть прочитана или NaN в client.html

Я попробовал простое прямое инициирование переменной и следую инструкциям на страницах Socket.IO

Сервер (index.js)

var e = require('express')();
var http = require('http').Server(e);
var sio = require('socket.io')(http);

http.listen(3000);

e.get('/', function(req, res) {
    res.sendFile(__dirname + '/public/client.html');
});

sio.on('connection', function(socket) {
    socket.on('ping', function(msg) {
    socket.emit('pong',  {lat:parseFloat(35+Math.random()),lon:parseFloat(-106+Math.random())});
    });
});

Клиент (client.html)

var socket = io.connect('http://localhost:3000');
    socket.on('pong', function(msg) {
        console.log("Nilai msg : "+msg);
        L.marker([parseFloat(msg.lat),parseFloat(msg.lon)]).addTo(map).bindPopup("("+msg.lat+","+msg.lon+")").openPopup();



var map = L.map('map', {
    center: [35.10418, -106.62987],
    zoom: 9
});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

map.on("click", function(){
socket.emit('ping', {msg: 'Hello'});

});

Я ожидаю, что карта покажет маркер с соответствующей координатой, но фактический результат будет Error: Invalid LatLng object: (NaN, NaN)

Answer 1

В файле socket.io ping и pong являются зарезервированными событиями, и не должно использоваться в вашем приложении . То, что ваш браузер получает на pong событии, совсем не то, что вы ожидаете:

мс (Число) Количество мс, прошедших с момента отправки пакета (т. Е. Задержка).

и поэтому msg.lat и msg.lon не определены и не могут быть проанализированы.

Измените имена событий на что-то другое, скажем fromserver и frombrowser, и вам будет хорошо идти:

Серверная сторона:

io.on('connection', function(socket){
    socket.on('frombrowser', function(msg){
        var o = {lat:parseFloat(35+Math.random()),lon:parseFloat(-106+Math.random())};
        socket.emit('fromserver', o);
    });
});

Клиентская сторона:

socket.on('fromserver', function(msg) {
    console.log(msg);
    console.log([parseFloat(msg.lat), parseFloat(msg.lon)]);
});

map.on("click", function(){
    socket.emit('frombrowser', {msg: 'Hello'});
});