websocket

148 阅读2分钟
    var websocket = null;

    function wsInit() {
        // 初始化ws
        var protocol = location.protocol === 'https:' ? 'wss://' : 'ws://';
        if ('WebSocket' in window) {
            // websocket = new WebSocket(protocol + window.location.host + "/sock/cmd.do");
            websocket = new ReconnectingWebSocket("ws://www.gzckgc.cn/socket/measure.do");
        } else if ('MozWebSocket' in window) {
            alert("此浏览器只支持MozWebSocket");
        } else {
            alert("此浏览器只支持SockJS");
        }
        websocket.onopen = function (evnt) {
            console.log("websocket.onopen");
            (websocket && websocket.readyState == WebSocket.OPEN) ? console.log("---连接成功----") : '';
        };
        websocket.onmessage = function (evnt) {
            var data = evnt.data;
            console.log(data, "onmessage");         
        };
        websocket.onerror = function (evnt) {
            websocket.close();
            console.error("ws异常");
        };
        websocket.onclose = function (evnt) {
            console.log("ws连接关闭");
            websocket.close();
        }
    }
    wsInit()

自动连接

1. websocket = new ReconnectingWebSocket("ws://www.gzckgc.cn/socket/measure.do"); //创建new ReconnectingWebSocket
2. this.open(false); //开启
   open = function (reconnectAttempt) {
    eventTarget.dispatchEvent(generateEvent('connecting')); //connecting
    ws.onopen = function (event){
      console.log("ws.onopen");
      var e = generateEvent('open');
      eventTarget.dispatchEvent(e);     //open
    }
}
3. eventTarget.addEventListener('open', function (event) { 
     console.log("self.onopen(event)");      
     self.onopen(event);          //触发自定义的open事件
   });  
4.  websocket.onopen = function (evnt) {        //监听自定义open事件
      console.log("websocket.onopen");
      (websocket && websocket.readyState == WebSocket.OPEN) ? console.log("---连接成功----") : '';
   };   

主动连接

1.  if (websocket.readyState == 1) {
       console.log('已建立连接');
     }
     else {
       console.log('重新连接');
       websocket.open(false)
     }
2. this.open(false); //开启
   open = function (reconnectAttempt) {
    eventTarget.dispatchEvent(generateEvent('connecting')); //connecting
    ws.onopen = function (event){
      console.log("ws.onopen");
      var e = generateEvent('open');
      eventTarget.dispatchEvent(e);     //open
    }
}
3. eventTarget.addEventListener('open', function (event) { 
     console.log("self.onopen(event)");      
     self.onopen(event);          //触发自定义的open事件
   });  
4.  websocket.onopen = function (evnt) {        //监听自定义open事件
      console.log("websocket.onopen");
      (websocket && websocket.readyState == WebSocket.OPEN) ? console.log("---连接成功----") : '';
   };   

主动断开连接

1. websocket.close();     //调用websocket.close();
2. this.close = function (code, reason) {
      if (typeof code == 'undefined') {
                code = 1000;
      }
      console.log(forcedClose, 111);
      forcedClose = true;
      if (ws) {
          ws.close(code, reason);          //ws.onclose
      }
   };
3. ws.onclose = function (event) {
      console.log("ws.onclose");
      ws = null;//此时销毁ws
      if (forcedClose) {
         self.readyState = WebSocket.CLOSED;
         eventTarget.dispatchEvent(generateEvent('close'));
      }
   }
 4.  eventTarget.addEventListener('close', function (event) { 
         console.log("self.onclose(event)"); 
         self.onclose(event); 
    });
 5.  websocket.onclose = function (evnt) {
       console.log("ws连接关闭");
        websocket.close();      //调用时ws已销毁if (ws)条件不成立,不在调用ws.close(code, reason);
     }

自动连接失败

//连接失败自动触发new WebSocket(self.url, protocols || []);  onerror onclose
1. websocket = new ReconnectingWebSocket("ws://www.gzckgc.cn/socket/measure.do"); //创建new ReconnectingWebSocket
2. this.open(false); //开启
   open = function (reconnectAttempt) {
      ws = new WebSocket(self.url, protocols || []);
      eventTarget.dispatchEvent(generateEvent('connecting')); //connecting
      var localWs = ws;           
      var timeout = setTimeout(function () {
          if (self.debug || ReconnectingWebSocket.debugAll) {
              console.log('ReconnectingWebSocket', 'connection-timeout', self.url);
          }
          timedOut = true;
          localWs.close();               //ws无close方法  报错 --> ws.onerror
          timedOut = false;
     }, self.timeoutInterval);
}
3. ws.onerror = function (event) {
      eventTarget.dispatchEvent(generateEvent('error'));
   };
4. eventTarget.addEventListener('error', function (event) {
       console. log("self.onerror(event)"); 
       self.onerror(event);
   });
5. websocket.onerror = function (evnt) {
       websocket.close();          //关闭连接
       console.error("ws异常");
   };
6. this.close = function (code, reason) {
       if (typeof code == 'undefined') {
           code = 1000;
        }
        console.log(forcedClose, 111);
        forcedClose = true;
        if (ws) {
           ws.close(code, reason);
         }
    };
7. ws.onclose = function (event) {
        console.log("ws.onclose");
        clearTimeout(timeout);
        ws = null;
        if (forcedClose) {
           self.readyState = WebSocket.CLOSED;
           eventTarget.dispatchEvent(generateEvent('close'));
        }     
   }
8. eventTarget.addEventListener('close', function (event) {
      console.log("self.onclose(event)"); 
      self.onclose(event); 
  })
9. websocket.onclose = function (evnt) {
            console.log("ws连接关闭");
            websocket.close();
    }
10. this.close = function (code, reason) {
       if (typeof code == 'undefined') {
            code = 1000;
        }
        console.log(forcedClose, 111);
        forcedClose = true;
        if (ws) {                      //此时ws = null
              ws.close(code, reason);
         }
    };

54034d93259c40268e6e7e213602c563_tplv-k3u1fbpfcp-zoom-in-crop-mark_3024_0_0_0.webp