javascript - Node.js 应用程序未显示已连接的用户?
问题描述
晚上好。我是新来的,我希望我在正确的地方提出正确的问题!
我基本上只是想增强我在 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);
应用程序.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 © <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>
我希望这已经足够了,而且我做得对,如果我没有,我很抱歉。纠正我,我会改变它或添加我必须做的。
谢谢,问候拉里
解决方案
您需要添加此代码。然后您可以从阵列套接字显示连接的用户
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);
});
});
推荐阅读
- python - 我应该使用两个 Hashmap 来快速查找两个实体,而不是线性搜索一个 hashmap?
- android - 检查专辑封面是否存在或显示错误消息
- java - 无法单击android中菜单的CheckBox
- reporting-services - 如何跨 SSRS 中的所有列组跨越行
- c++ - C++ 插入排序混淆
- angular - 在角度库中使用路由加载多个组件
- php - PHP Jquery ajax调用不增加ajax成功中的变量值
- javascript - JavaScript:getElementById() 不工作(使用以前访问数据库的表或段落)
- python - Python模拟类实例化和访问私有成员变量
- python-3.x - 计算找零硬币的最小数量时四舍五入的问题(python)