Vue封装websocket

项目中需要使用websocke，这个是我自己修修改改好多次之后用得最顺手的一版，分享一下。
这个封装需要搭配vuex使用，因为收到的数据都保存在vuex中了，真的绝绝子好用，解决了我一大堆问题。
如果需要可以搭配上心跳、websocke重连。

话说，vuex的使用也有好多坑，在踩坑的路上狂奔，下次再写vuex的

1. 封装的socket.js文件内容：

var websock = null;var global_callback = null;
 var serverPort = "80"; // webSocket连接端口
 var wsuri = "ws://" + window.location.hostname + ":" + serverPort;function createWebSocket(callback) {if (websock == null || typeof websock !== WebSocket) {initWebSocket(callback);} 
 }function initWebSocket(callback) {global_callback = callback;// 初始化websocketwebsock = new WebSocket(wsuri);websock.onmessage = function (e) {websocketonmessage(e);};websock.onclose = function (e) {websocketclose(e);};websock.onopen = function () {websocketOpen();};// 连接发生错误的回调方法websock.onerror = function () {console.log("WebSocket连接发生错误");//createWebSocket();啊，发现这样写会创建多个连接，加延时也不行};
 }// 实际调用的方法
 function sendSock(agentData ) {if (websock.readyState === websock.OPEN) {// 若是ws开启状态websocketsend(agentData);} else if (websock.readyState === websock.CONNECTING) {// 若是 正在开启状态，则等待1s后重新调用setTimeout(function () {sendSock(agentData);}, 1000);} else {// 若未开启 ，则等待1s后重新调用setTimeout(function () {sendSock(agentData);}, 1000);}
 }function closeSock() {websock.close();
 }// 数据接收
 function websocketonmessage(msg) {// console.log("收到数据："+JSON.parse(e.data));// console.log("收到数据："+msg);// global_callback(JSON.parse(msg.data));// 收到信息为Blob类型时let result = null;// debuggerif (msg.data instanceof Blob) {const reader = new FileReader();reader.readAsText(msg.data, "UTF-8");reader.onload = (e) => {result = JSON.parse(reader.result);//console.log("websocket收到", result);global_callback(result);};} else {result = JSON.parse(msg.data);//console.log("websocket收到", result);global_callback(result);}
 }// 数据发送
 function websocketsend(agentData) {console.log("发送数据：" + agentData);websock.send(agentData);
 }// 关闭
 function websocketclose(e) {console.log("connection closed (" + e.code + ")");
 }function websocketOpen(e) {console.log("连接打开");
 }export { sendSock, createWebSocket, closeSock };

封装的websocke暴露三个接口

使用方法

先看目录

1、建立连接

建立好socket.js文件之后就可以开始使用了，因为我的登录是用axios的，只有登录成功（进入主页之后才建立websocke连接），所以我把连接写在了Home.vue的文件中。

第一步：导入文件

import { sendSock, createWebSocket, closeSock } from "@/api/socket";
 

第二步：初始化时建立websocket连接

created() {this.init();......},methods: {init() {createWebSocket(this.global_callback);......},// websocket的回调函数，msg表示收到的消息global_callback(msg) {console.log("websocket的回调函数收到服务器信息：" + JSON.stringify(msg));// console.log("收到服务器信息：" + msg);switch (msg.operate) {//case "autoIndex":this.$store.dispatch("setAutoIndex", msg);break;case "allChannelSwitch":this.$store.dispatch("setAllChannelSwitch", msg);break;case "singleChannelSwitch":this.$store.dispatch("setSingleChannelSwitch", msg);break;case "sceneSelect":this.$store.dispatch("setSceneSelect", msg);break;......}},},
 

msg.operate是用于判断收到通信数据
this.$store.dispatch()是用于异步修改vuex保存的数据的函数。
界面中通信数据收到后都保存在vuex中，需要该数据的地方就从vuex中获取

2、发送数据

第一步：导入文件

import { sendSock } from "@/api/socket";
 

第二步：发送数据

 var sendData = {operate:"singleChannelSwitch",index:index+1,opera:row.button_relay};sendSock(JSON.stringify(sendData));
 

3、关闭连接

第一步：导入文件

import { closeSock} from "@/api/socket";
 

第二步：关闭连接

closeSock();