邯郸建公司网站价格,福田公司总部,阿里云建设网站,wordpress网站的优化先建一个websocket.js放在项目中#xff0c;内容如下#xff1a;
var websock null;
let rec; //断线重连后#xff0c;延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码
let isConnect false; //连接标识 避免重复连接
let checkMsg heartbeat; /…先建一个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/webSocketsocketApi.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); //接收后端推送过来的数据
