背景
????有時候我們想看到非常新的數(shù)據(jù)，數(shù)據(jù)更新間隔很短,就考慮websocket來進行請求數(shù)據(jù)疮蹦，減少輪訓減輕前端以及后端服務(wù)器壓力。
相關(guān)技術(shù)
Websocket介紹
????WebSocket是一種在單個TCP連接上進行全雙工通信的協(xié)議茸炒。WebSocket通信協(xié)議于2011年被IETF定為標準RFC 6455愕乎，并由RFC7936補充規(guī)范。WebSocket API也被W3C定為標準壁公。
????WebSocket使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單感论，允許服務(wù)端主動向客戶端推送數(shù)據(jù)。在WebSocket API中紊册，瀏覽器和服務(wù)器只需要完成一次握手比肄，兩者之間就直接可以創(chuàng)建持久性的連接，并進行雙向數(shù)據(jù)傳輸囊陡。
Socket.IO介紹
????Socket.IO 是一個可以在瀏覽器與服務(wù)器之間實現(xiàn)實時芳绩、雙向、基于事件的通信的工具庫撞反。 Socket.IO 能夠在任何平臺妥色、瀏覽器或設(shè)備上運行，可靠性和速度同樣出色遏片。
代碼實現(xiàn)
Websocket后端代碼
????websocket后端代碼嘹害，創(chuàng)建服務(wù)撮竿，監(jiān)聽固定的端口，監(jiān)聽連接和掉線笔呀、客戶端發(fā)送數(shù)據(jù)幢踏，定時發(fā)送隨機經(jīng)緯度數(shù)據(jù)到前端。
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
}
// 服務(wù)端監(jiān)聽連接狀態(tài)：io的connection事件表示客戶端與服務(wù)端成功建立連接凿可，它接收一個回調(diào)函數(shù)惑折，回調(diào)函數(shù)會接收一個socket參數(shù)。
io.on('connection', (socket)=>{
console.log(socket.id+'客戶端進入')
// 注冊to-server事件枯跑，接收客戶端向服務(wù)端發(fā)送的數(shù)據(jù)
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創(chuàng)建map示例惨驶，新建圖層設(shè)置樣式。
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 >OpenStreetMap</a> contributors, © <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監(jiān)聽數(shù)據(jù)是否有值敛助，當有值后設(shè)置到圖層里顯示粗卜。
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連接后臺，監(jiān)聽連接和斷開事件纳击、以及服務(wù)端向客戶端發(fā)送數(shù)據(jù)续扔。
let socket = io('http://127.0.0.1:3000');
// 注冊connect事件，監(jiān)聽和服務(wù)是否建立了連接
socket.on('connect', function () {
console.log(socket.id);
})
// 注冊disconnect事件焕数，監(jiān)聽和服務(wù)是否斷開連接
socket.on('disconnect', function () {
console.log('客戶端和服務(wù)端斷開連接了');
})
// 注冊to-client事件纱昧，監(jiān)聽服務(wù)端向客戶端傳送的數(shù)據(jù)
socket.on('to-client', function (data) {
da.data=JSON.parse(data)
})
效果展示
參考資料:
https://socketio.bootcss.com
https://baike.baidu.com/item/WebSocket/1953845
