如何将坐标从 node.js 服务器发送到 Leaflet.js 客户端答案

【问题标题】：How to send coordinates from node.js server to leaflet.js client如何将坐标从 node.js 服务器发送到 Leaflet.js 客户端
【发布时间】：2019-01-03 02:50:42
【问题描述】：

我正在尝试将坐标从 node.js 和 socket.io 服务器 (index.js) 发送到 client.html。在 HTML 客户端中，Leaflet 将读取坐标。问题是，在client.html中无法读取坐标变量或NaN

我尝试了一个简单的直接变量初始化，并按照 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)

【问题讨论】：

标签： node.js socket.io leaflet

【解决方案1】：

在 socket.io 中，ping 和 pong 是保留事件，shouldn't be used in your app。您的浏览器在 pong 事件中收到的不是您所期望的：

ms (Number) 自 ping 数据包以来经过的毫秒数（即：延迟）。

这就是为什么 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'});
});

【讨论】：