业务场景是实现随意连接,关闭多个传感器,考虑到各个互不影响,并且传感器数据并发很高,这里采用标题的方式进行封装组件。实现效果达到父组件只负责传入要连接的传感器数组,子组件完成连接并展示图表。
socket_worker.js:
var reconnect_count = 1;
var socket = null;
const socketWork = `
function createWebsocket(url,id){
socket = new WebSocket(url);
socket.onopen = function(event) {
if (socket == null) return;
socket.send("SensorCommonId"+":"+id);
postMessage({
code: "open" ,
message :"连接中..."
});
}
socket.onclose = function(event) {
postMessage({
code: "close",
message :"连接关闭"
});
}
socket.onmessage = function(event) {
postMessage({
code: "onmessage" ,
message :"获取数据成功",
data:event.data
});
}
socket.onerror = function(event) {
socket = null;
if(reconnect_count <= 3){
if (event.target.readyState == 3) {
//断线重连
setTimeout(function () {
createWebsocket(event.target.url,id);
reconnect_count += 1
postMessage({
code:"reconnect",
message:"第" + reconnect_count + "次重新连接"
});
}, 1000);
}
}else{
postMessage({
code:"error",
message:"连接失败"
});
}
}
}
onmessage = function (e) {
let data = e.data;
createWebsocket(data.params.url,data.params.id)
};
`;
export {
socketWork
}
调用worker
initWorker(){
var blob = new Blob([socketWork]);
this.myWorker = new Worker(window.URL.createObjectURL(blob));
this.myWorker.onmessage = (e)=> {
if(e.data.code != 'onmessage'){
this.myChart.showLoading({
text: e.data.message,
color: '#c23531',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.8)'
})
}else{
this.myChart.hideLoading();
this.initDatas(JSON.parse(e.data.data));
//到这一步已经拿到数据了,剩下的交给你了,大兄弟,记得在beforeDestroy中释放worker
}
};
this.myWorker.postMessage({
code:"init",
params:{
url:websocketUrl,
id:this.params.SensorCommonId
}
});
},
结尾:其实worker还是挺适合做这种轮询动作或者需要大数据计算的活,大兄弟可以多试试,解锁新姿势
来张图吧,显得我很真诚。