WebSocket，即使在触发 onopen 事件后，仍处于 CONNECTING 状态

Question

即使在 onconnect 之后尝试，WebSocket 发送方法也会引发异常。并非总是如此，但很多时候我在控制台中看到记录的异常。

这是打字稿代码：-

  open() {
    if ('WebSocket' in window) {
      this.ws = new WebSocket(ApiUrls.Socket(''));
      this.ws.onopen = () => {
        const authentication = {
          msgType : 'Authenticate',
          data : {
            token : localStorage.getItem('authToken')
          }
        }
        this.ws.send(JSON.stringify(authentication));
      };

      this.ws.onmessage = (evt) => {
        // console.log(evt);
        this.parseMessage(evt.data);
      };

      this.ws.onclose = () => {
        this.connected = false;
        // console.log('retrying connection with server');
        if (localStorage.getItem('authToken')) {
          this.reconnectTimeout = setTimeout(this.open.bind(this), 1000);
        }
      };
    } else {
      alert('WebSocket NOT supported by your Browser!');
    }
  }

控制台中的异常：-

ERROR DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.
    at WebSocket.ws.onopen [as __zone_symbol__ON_PROPERTYopen] (http://localhost:4200/main.bundle.js:5586:26)
    at WebSocket.wrapFn (http://localhost:4200/polyfills.bundle.js:3711:39)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2970:31)
    at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:87677:33)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2969:36)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.bundle.js:2737:47)
    at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.bundle.js:3044:34)
    at invokeTask (http://localhost:4200/polyfills.bundle.js:4085:14)
    at WebSocket.globalZoneAwareCallback (http://localhost:4200/polyfills.bundle.js:4111:17)

它太冗长了，但令人担忧的消息是，ERROR DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state. at WebSocket.ws.onopen [as __zone_symbol__ON_PROPERTYopen]。

Answer 1

当 open 方法被调用两次时，就会中断。在这种情况下，ws 属性将被仍处于连接状态的新 Websocket 覆盖。然后，在 onopen 处理程序（异步）中使用了错误的 WebSocket。

const local_websocket = new WebSocket(ApiUrls.Socket(''));
this.ws = local_websocket;
this.ws.onopen = () => {
    const authentication = {
        msgType : 'Authenticate',
        data : {
            token : localStorage.getItem('authToken')
        }
    }
    local_websocket.send(JSON.stringify(authentication));
};