背景
????有時候我們想看到非常新的數據，數據更新間隔很短,就考慮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 >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監聽數據是否有值，當有值后設置到圖層里顯示。
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
