先建一个websocket.js放在项目中，内容如下：
var websock = null;
let rec; //断线重连后，延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码
let isConnect = false; //连接标识 避免重复连接
let checkMsg = "heartbeat"; //心跳发送/返回的信息 服务器和客户端收到的信息内容如果如下 就识别为心跳信息 不要做业务处理
let globalSendCallback=()=>{};
let globalGetCallback=()=>{};let createWebSocket = () => {try {initWebSocket(); //初始化websocket连接} catch (e) {console.log("尝试创建连接失败");reConnect(); //如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接}
};//定义重连函数
let reConnect = () => {console.log("尝试重新连接");if (isConnect) return; //如果已经连上就不在重连了rec && clearTimeout(rec);rec = setTimeout(function () { // 延迟5秒重连 避免过多次过频繁请求重连createWebSocket();}, 5000);
};
//设置关闭连接
let closeWebSocket = () => {websock.close();
};
//心跳设置
var heartCheck = {timeout: 20000, //每段时间发送一次心跳包 这里设置为20stimeoutObj: null, //延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）start: function () {this.timeoutObj = setTimeout(function () {if (isConnect) websock.send(checkMsg);}, this.timeout);},reset: function () {clearTimeout(this.timeoutObj);this.start();}
};// 初始化websocket
function initWebSocket() {// ws地址 -->这里是你的请求路径var ws = "ws://10.30.2.31:8087/websocket/";websock = new WebSocket(ws)websock.onmessage = function (e) {websocketonmessage(e)}websock.onclose = function (e) {websocketclose(e)}websock.onopen = function () {websocketOpen()heartCheck.start();console.log("连接状态：", websock.readyState);}// 连接发生错误的回调方法websock.onerror = function () {console.log('WebSocket连接发生错误')isConnect = false; //连接断开修改标识reConnect(); //连接错误 需要重连}
}// 实际调用的方法
function sendSock(agentData, callback) {console.log(globalSendCallback)globalSendCallback = callbackif (websock.readyState === websock.OPEN) {// 若是ws开启状态websocketsend(agentData)} else if (websock.readyState === websock.CONNECTING) {// 若是 正在开启状态，则等待1s后重新调用setTimeout(function () {sendSock(agentData, callback)}, 1000)} else {// 若未开启 ，则等待1s后重新调用setTimeout(function () {sendSock(agentData, callback)}, 1000)}
}function getSock(callback) {console.log(globalGetCallback)globalGetCallback = callback
}
// 数据接收
function websocketonmessage(e) {console.log(e)let O_o = JSON.parse(decodeUnicode(e.data))// console.log(O_o)if (!O_o) {// if (O_o != '连接成功') {heartCheck.reset();} else {// if (O_o.msg == "open success") {// sessionStorage.setItem("wid", O_o.wid);// } else {// console.log(globalGetCallback)globalGetCallback(O_o);//注释记得解开// }}// globalCallback(JSON.parse(e.data))function decodeUnicode(str) {str = str.replace(/\\/g, "%");//转换中文str = unescape(str);//将其他受影响的转换回原来str = str.replace(/%/g, "\\");//对网址的链接进行处理str = str.replace(/\\/g, "");return str;}
}// 数据发送
function websocketsend(agentData) {console.log(JSON.stringify(agentData))websock.send(JSON.stringify(agentData))
}// 关闭
function websocketclose(e) {console.log(e)isConnect = false; //断开后修改标识 console.log('连接关闭 (' + e.code + ')')// 显示确认对话框// const confirmation = window.confirm('WebSocket连接已关闭，是否重新连接？');// if (confirmation) {// // 用户点击了确认按钮，执行重新连接操作// createWebSocket();// }// openAlert({ content: value, title:'提示', status: 'error' })// 从本地存储中获取日志数据，如果没有则默认为空数组// const logs = localStorage.getItem('logs');// const currentTime = new Date().toLocaleString();// const newLog = `${currentTime} `+'连接关闭 (' + e.code + ')';// logs.value.unshift(newLog); // 将新的日志消息添加到数组最前面// localStorage.setItem('logs', JSON.stringify(logs.value)); // 保存到本地
}// 创建 websocket 连接
function websocketOpen(e) {console.log('连接成功')}initWebSocket()// 将方法暴露出去
export {sendSock,getSock,createWebSocket,closeWebSocket
}
2，在组件中引用
// WebSocket封装方法
import * as socketApi from '@/directives/webSocket'socketApi.sendSock({ cmd: "startReport" }); //发送指令，指令是跟后端人员协定的
let getConfigResult = (data)=>{// let res = '{"type": "MatData","log": "","id": "1234452312312","value": "22222222"}'console.log(data);let res = JSON.parse(data);}
socketApi.getSock(getConfigResult); //接收后端推送过来的数据
)
