vue使用websocket报错： Failed to execute ‘send‘ on ‘WebSocket‘: Still in CONNECTING state

场景：页面加载时 要初始化websocket 并且 调用后台提供的api, 根据得到的 status 来判断是否需要websocket发送消息，此时 因为响应顺序等问题会导致： Failed to execute ‘send’ on ‘WebSocket’: Still in CONNECTING state

原因在于：客户端初始化WebSocket后，立马发送消息给服务器，此时WebSocket连接仍然处于“连接中”状态，连接还没有成功 ，因此是不能发送数据的

WebSocket连接状态可以通过WebSocket实例的readyState属性来检查。这个属性会返回一个整数值，表示连接的状态。以下是readyState的可能值：

• 0：表示连接尚未建立，这是CONNECTING状态的数字形式。
• 1：表示连接已建立，可以进行通信，这是OPEN状态的数字形式。
• 2：表示连接正在进行关闭握手，这是CLOSING状态的数字形式。
• 3：表示连接已经关闭或者根本没有建立，这是CLOSED状态的数字形式。

解决方法：

// 发送数据
function sendWebSocket(data) {
  if (websocket && userStore.isConnected) { // 检查连接状态 userStore.isConnected是我本地存储的状态
    if (websocket.readyState === websocket.OPEN) {
      // 已建立成功 直接发送消息
 	  websocket.send(JSON.stringify(data));
    } else {
      // 未开启 或者 正在开启状态 等待1s后重新调用
      setTimeout(function () {
        sendWebSocket(data);
      }, 1000);
    }
  } else {
    userStore.setConnected(false)// 修改连接状态  
    reConnect(toIp)   // 重新连接
    showToast('websocket重连中...')
  }
}

本来是在 websocket.onopen 方法中直接调用发送send方法发送数据的 ，这样会出现 标题所示的错误，想过把数据存起来，等待websocket 连接成功再调用，又不清楚需要等待多久，所以采取这种方式轻松解决问题！