vue-页面使用websocket建立连接用于测试

前言

• websocket双向通讯在项目中经常使用，但一般都是封装成第三方包，登录，退出建立连接。

• 这样使用是合理，但不便于测试，其实在.vue页面通过new方式可以直接使用websocket。

• 在页面实例加载完成之后连接websocket，在组件销毁时候断开websocket连接。

• 注意具体情况要跟后端对接，比如唯一值（比如token），是不是一对一发，还是一对多发（链表）。

细节-websocket方法拆解

• 通过new WebSocket来获取websocket实例，在页面实例加载完毕建立连接

• 实例.onopen（地址）- 在页面实例加载完毕建立连接

• 实例.onclose - 在页面销毁之前销毁websocket实例

• 实例.onmessage（数据）- 后端使用send发送给前端时候就会触发这个函数方法（带参数）

• 实例.onerror - 在websocket断开连接，连接错误时就会触发这个函数方法

• 实例.send（数据）- 向后端发送数据-后端同样用onmessage接收到数据

• send方法发送数组对象数据时，需要转成字符串形式（ JSON.stringify(数据)）。

代码如下

​

​

---

总结：

经过这一趟流程下来相信你也对 vue-页面使用websocket建立连接用于测试 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕