使用nodejs 模拟websocket 服务端
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 9999 });
wss.on('connection', function (ws) {
console.log('client connected');
// ws.on('message', function (message) {
// console.log(message);
// ws.send(message);
//});
ws.on("message", message => {
// 这里解析数据
console.log('receive data');
// const result = JSON.parse(message);
// 是否是登陆,登陆后绑定id
if (true) {
// 这里只做一个小的场景,不是登陆就是发送信息
// 根据存储的id 是否是要 发送的对象 来单独响应
wss.clients.forEach(s => {
if (s.readyState == 1) {
s.send(message);
}
});
}
});
ws.on("close", message => {
console.log(ws.socketIdxos,"退出连接");
});
});
cmd 切换到指定的目录:执行命令:node xxx.js
使用模拟客户端进行模拟
地图部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<title>5-4添加标记练习</title>
<style>
* {
padding: 0;
margin: 0;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var array = [{
lng: 116.379391,
lat: 39.861536,
zoom: 11
}, {
lng: 114.681373,
lat: 37.983095,
zoom: 12
}, {
lng: 114.674164,
lat: 37.965131,
zoom: 14
}, {
lng: 114.679571,
lat: 37.965199,
zoom: 16
}];
var map = new AMap.Map('container', {
zoom: 10,
center: [116.379391, 39.861536]
});
map.setDefaultCursor('pointer');
var marker = new AMap.Marker({
icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
position: [114.674593, 37.979577] //114.674593,37.979577
})
map.on('click', function(e) {
map.remove([marker])
marker = new AMap.Marker({
icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
position: [e.lnglat.lng, e.lnglat.lat],
offset: new AMap.Pixel(-10, -20)
});
var lng = e.lnglat.lng;
var lat = e.lnglat.lat;
map.setZoomAndCenter(14, [lng, lat]);
map.add([marker]);
})
if ("WebSocket" in window) {
//alert("您的浏览器支持 WebSocket!");
// 初始化一个 WebSocket 对象,参数指明url
var ws = new WebSocket("ws://localhost:9999");
// WebSocket 连接时候触发
ws.onopen = function() {
//使用 send() 方法发送数据
//ws.send("客户端发送的数据");
console.log("数据发送中...");
};
// 接收服务端数据时触发
ws.onmessage = function(evt) {
var received_msg = evt.data;
//console.log(received_msg);
var data = eval('(' + received_msg + ')');
data = JSON.parse(data);
console.log(data.lng +"---"+ data.lat);
var i = 0;
array.forEach(function(v){
//sleep(3000);// 时间间隔3秒
setTimeout(function() {
console.log(i);
console.log(v);
changePoint(v);
}, (i + 1) * 1000);
// setTimeout(function (){
i++;
// }, 3000);
// console.log(v);
// changePoint(v);
});
};
//断开 web socket 连接成功触发事件
ws.onclose = function() {
// 关闭 websocket
console.log("连接已关闭...");
};
} else {
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
//参数n为休眠时间,单位为毫秒:
function sleep(n) {
var start = new Date().getTime();
// console.log('休眠前:' + start);
while (true) {
if (new Date().getTime() - start > n) {
break;
}
}
// console.log('休眠后:' + new Date().getTime());
}
// map.on('complete', function() {
// // document.getElementById('container').innerHTML = "地图图块加载完毕!当前地图中心点为:" + map.getCenter();
// array.forEach(function(v){
// sleep(3000);// 时间间隔3秒
// console.log(v);
// changePoint(v);
// });
// });
// setInterval(function(){
// changePoint();
// }, 3000);
function changePoint(point) {
map.remove([marker])
var lng = point.lng;
var lat = point.lat;
marker = new AMap.Marker({
icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
position: [lng, lat],
offset: new AMap.Pixel(-10, -20)
});
map.setZoomAndCenter(point.zoom, [lng, lat]);
map.add([marker]);
}
</script>
</body>
</html>