先建一個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); //接收后端推送過來的數據