背景
有时候我们想看到非常新的数据，数据更新间隔很短,就考虑websocket来进行请求数据，减少轮训减轻前端以及后端服务器压力。
相关技术
Websocket介绍
WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
Socket.IO介绍
Socket.IO 是一个可以在浏览器与服务器之间实现实时、双向、基于事件的通信的工具库。 Socket.IO 能够在任何平台、浏览器或设备上运行，可靠性和速度同样出色。
代码实现
Websocket后端代码
websocket后端代码，创建服务，监听固定的端口，监听连接和掉线、客户端发送数据，定时发送随机经纬度数据到前端。
let httpServer = require('http').Server();
let io = require('socket.io')(httpServer,{ cors: true });
httpServer.listen(3000);
function getGpsPositions() {
const [xmin, ymin, xmax, ymax] = [108.5,18, 111.5, 20]
let data = []
for (let i = 0; i < 10; i++) {
let lon=randomNum(xmin, xmax)
let lat=randomNum(ymin, ymax)
data.push(
[lon, lat]
)
}
return JSON.stringify(data)
}
function randomNum(min, max){
return Math.random() * (max - min) + min
}
// 服务端监听连接状态：io的connection事件表示客户端与服务端成功建立连接，它接收一个回调函数，回调函数会接收一个socket参数。
io.on('connection', (socket)=>{
console.log(socket.id+'客户端进入')
// 注册to-server事件，接收客户端向服务端发送的数据
socket.on('to-server', (data) => {
console.log('客户端： ' + data)
})
let i=0;
setInterval(function(){
socket.emit('to-client', getGpsPositions())
i=i+1
}, 500);
// 检测一个客户端断开连接
socket.on('disconnect', () => {
console.log(socket.id+'客户端离开')
})
});
地图代码
maptalks创建map示例，新建图层设置样式。
let map = new maptalks.Map('map', {
center: [108, 19],
zoom: 14,
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains: ['a','b','c','d'],
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
})
});
let layer = new maptalks.PointLayer('point');;
const groupLayer = new maptalks.GroupGLLayer('group', [layer]);
groupLayer.addTo(map);
const style={symbol: {
markerType: 'ellipse',
markerFill: '#5b94eb',
markerFillOpacity: 1,
markerLineWidth: 0,
markerLineColor: '#5b94eb',
markerWidth: 10,
markerHeight: 10
}}
layer.setStyle(style)
Proxy监听数据是否有值，当有值后设置到图层里显示。
let da={}
da = new Proxy(da, {
get(target, key) {
let result = target[key];
return result;
},
set(target, key, value) {
target[key] = value;
let markers = [];
layer.clear()
value.forEach(i=>{
// console.log(i)
let coord=i;
let pnt=new maptalks.Marker(coord)
markers .push(pnt)
})
layer.addGeometry(markers);
markers=null
i=i+1
console.log(new Date(),i)
return target
},
deleteProperty: function(target, prop) {
delete target[prop]
return target;
//
}
})
Websocket代码
socket.io连接后台，监听连接和断开事件、以及服务端向客户端发送数据。
let socket = io('http://127.0.0.1:3000');
// 注册connect事件，监听和服务是否建立了连接
socket.on('connect', function () {
console.log(socket.id);
})
// 注册disconnect事件，监听和服务是否断开连接
socket.on('disconnect', function () {
console.log('客户端和服务端断开连接了');
})
// 注册to-client事件，监听服务端向客户端传送的数据
socket.on('to-client', function (data) {
da.data=JSON.parse(data)
})
效果展示
a3310ec2421e4198902ee626f458c78b_tplv-k3u1fbpfcp-watermark.png
ab84e2876f6b4cfd8c7b109160214424_tplv-k3u1fbpfcp-watermark.gif
参考资料:
https://socketio.bootcss.com
https://baike.baidu.com/item/WebSocket/1953845
