业务场景是实现随意连接，关闭多个传感器，考虑到各个互不影响，并且传感器数据并发很高，这里采用标题的方式进行封装组件。实现效果达到父组件只负责传入要连接的传感器数组，子组件完成连接并展示图表。
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还是挺适合做这种轮询动作或者需要大数据计算的活，大兄弟可以多试试，解锁新姿势
来张图吧，显得我很真诚。
?