// 连接断开后修改标识
  this.isConnect = false
  // 连接错误 需要重连
  this.reConnect()
  }
},

**全部代码如下：**

**问题一、**


**报错信息如下：socketReport.vue?8285:51 Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.**





![](https://img-blog.csdnimg.cn/img_convert/d0aba763f8f9f501cf2a44b35c4fff6a.png)



要明白这个问题产生的原因，就需要了解websocket的几个状态。通常在实例化一个websocket对象之后，客户端就会与服务器进行连接。但是连接的状态是不确定的，于是用readyState属性来进行标识。它有四个值，分别对应不同的状态：

CONNECTING：值为0，表示正在连接；
OPEN：值为1，表示连接成功，可以通信了；
CLOSING：值为2，表示连接正在关闭；
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

这样问题的原因就很明显了，之所以数据不能发送出去，是因为websocket还处在“CONNECTING”状态下，连接还没有成功。


**解决办法**


只要在函数中添加对状态的判断，在状态为OPEN时，执行send方法即可。方法一代码如下

this.init()
if (this.webstock.readyState===1) {
this.webstock.send()
}

**问题二、vue项目中监听电脑网络的状态，突然断开网络或者关机**


写法一、

data() {
return {
network: true, //默认有网
        }
}

mounted() {
window.addEventListener(“online”, () => {
console.log(“网络已连接:”)
this.network = true
})
// 检测断网
window.addEventListener(“offline”, () => {
console.log(“已断网:”)
this.network = false
if (this.webstock !== null) {
this.webstock.close()
}
})
}

**控制台打印的结果：**


**断开网络的情况**





![](https://img-blog.csdnimg.cn/img_convert/1a9f1dc91a8136ab980f6700b3eba306.png)



**再次连接网络：**





![](https://img-blog.csdnimg.cn/img_convert/ec9dc806090f1470577c2047bca1ec6e.png)





### 最后

推荐一些系统学习的途径和方法。  

![路线图](https://img-blog.csdnimg.cn/img_convert/abffda3a0cfe5b9baa70f132ab55f248.png)

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

HTML 和 CSS：

![html5知识](https://img-blog.csdnimg.cn/img_convert/2ee0d943c2e65e1bf84360c1c8a40cf6.png)

![css基础知识](https://img-blog.csdnimg.cn/img_convert/f660a2fef40322a6e2c45716d4a97e02.png)