webworker+websocket实现独立多个连接，断线重连

业务场景是实现随意连接，关闭多个传感器，考虑到各个互不影响，并且传感器数据并发很高，这里采用标题的方式进行封装组件。实现效果达到父组件只负责传入要连接的传感器数组，子组件完成连接并展示图表。

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还是挺适合做这种轮询动作或者需要大数据计算的活，大兄弟可以多试试，解锁新姿势

来张图吧，显得我很真诚。