前言
最近做了一個數(shù)據(jù)大屏的項目，使用了websocket來實現(xiàn)數(shù)據(jù)實時更新的需求，簡單記錄分享一下。
什么是websocket？
1、WebSocket協(xié)議是基于TCP的一種新的網(wǎng)絡(luò)協(xié)議，允許服務(wù)端主動向客戶端推送數(shù)據(jù)，實現(xiàn)全雙工通信。
2、在WebSocket API中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進行雙向數(shù)據(jù)傳輸。
1、封裝websocket代碼
websocket的請求地址是以‘ws:// ’或 ‘wss:// ’開頭的。
// websocket實例
let wsObj = null;
// ws連接地址
let wsUrl = null;
// let userId = null;
// 是否執(zhí)行重連 true/不執(zhí)行 ； false/執(zhí)行
let lockReconnect = false;
// 重連定時器
let wsCreateHandler = null;
// 連接成功，執(zhí)行回調(diào)函數(shù)
let messageCallback = null;
// 連接失敗，執(zhí)行回調(diào)函數(shù)
let errorCallback = null;
// 發(fā)送給后臺的數(shù)據(jù)
let sendDatas = {};
/**
* 發(fā)起websocket請求函數(shù)
* @param {string} url ws連接地址
* @param {Object} agentData 傳給后臺的參數(shù)
* @param {function} successCallback 接收到ws數(shù)據(jù)，對數(shù)據(jù)進行處理的回調(diào)函數(shù)
* @param {function} errCallback ws連接錯誤的回調(diào)函數(shù)
*/
export const connectWebsocket = (
url,
agentData,
successCallback,
errCallback
) => {
wsUrl = url;
createWebSoket();
messageCallback = successCallback;
errorCallback = errCallback;
sendDatas = agentData;
console.log(sendDatas);
};
// 手動關(guān)閉websocket （這里手動關(guān)閉會執(zhí)行onclose事件）
export const closeWebsocket = () => {
if (wsObj) {
writeToScreen("手動關(guān)閉websocket");
wsObj.close(); // 關(guān)閉websocket
// wsObj.onclose() // 關(guān)閉websocket(如果上面的關(guān)閉不生效就加上這一條)
// 關(guān)閉重連
lockReconnect = true;
wsCreateHandler && clearTimeout(wsCreateHandler);
// 關(guān)閉心跳檢查
heartCheck.stop();
}
};
// 創(chuàng)建ws函數(shù)
const createWebSoket = () => {
if (typeof WebSocket === "undefined") {
writeToScreen("您的瀏覽器不支持WebSocket，無法獲取數(shù)據(jù)");
return false;
}
// wsUrl = "ws://" + host + "/websoket" + userId;
// your_params：你要傳給后端的參數(shù)
try {
wsObj = new WebSocket(wsUrl, your_params);
initWsEventHandle();
} catch (e) {
writeToScreen("連接異常，開始重連");
reconnect();
}
};
const initWsEventHandle = () => {
try {
// 連接成功
wsObj.onopen = (event) => {
console.log("連接成功");
onWsOpen(event);
heartCheck.start();
};
// 監(jiān)聽服務(wù)器端返回的信息
wsObj.onmessage = (event) => {
console.log("監(jiān)聽服務(wù)器端返回的信息");
onWsMessage(event);
heartCheck.start();
};
wsObj.onclose = (event) => {
writeToScreen("onclose執(zhí)行關(guān)閉事件");
onWsClose(event);
};
wsObj.onerror = (event) => {
writeToScreen("onerror執(zhí)行error事件，開始重連");
onWsError(event);
reconnect();
};
} catch (err) {
writeToScreen("綁定事件沒有成功，開始重連");
reconnect();
}
};
const onWsOpen = (event) => {
writeToScreen("CONNECT");
// // 客戶端與服務(wù)器端通信
// wsObj.send('我發(fā)送消息給服務(wù)端');
// 添加狀態(tài)判斷，當為OPEN時，發(fā)送消息
if (wsObj.readyState === wsObj.OPEN) {
// wsObj.OPEN = 1
// 發(fā)給后端的數(shù)據(jù)需要字符串化
wsObj.send(JSON.stringify(sendDatas));
}
if (wsObj.readyState === wsObj.CLOSED) {
// wsObj.CLOSED = 3
writeToScreen("wsObj.readyState=3, ws連接異常，開始重連");
reconnect();
errorCallback();
}
};
const onWsMessage = (event) => {
const jsonStr = event.data;
writeToScreen("onWsMessage接收到服務(wù)器的數(shù)據(jù): ", jsonStr);
messageCallback(jsonStr);
};
const onWsClose = (event) => {
writeToScreen("DISCONNECT");
// e.code === 1000 表示正常關(guān)閉。 無論為何目的而創(chuàng)建, 該鏈接都已成功完成任務(wù)。
// e.code !== 1000 表示非正常關(guān)閉。
console.log("onclose event: ", event);
if (event && event.code !== 1000) {
writeToScreen("非正常關(guān)閉");
errorCallback();
// 如果不是手動關(guān)閉，這里的重連會執(zhí)行；如果調(diào)用了手動關(guān)閉函數(shù)，這里重連不會執(zhí)行
reconnect();
}
};
const onWsError = (event) => {
writeToScreen("onWsError: ", event.data);
errorCallback();
};
const writeToScreen = (massage) => {
console.log(massage);
};
// 重連函數(shù)
const reconnect = () => {
if (lockReconnect) {
return;
}
writeToScreen("3秒后重連");
lockReconnect = true;
// 沒連接上會一直重連，設(shè)置延遲避免請求過多
wsCreateHandler && clearTimeout(wsCreateHandler);
wsCreateHandler = setTimeout(() => {
writeToScreen("重連..." + wsUrl);
createWebSoket();
lockReconnect = false;
writeToScreen("重連完成");
}, 3000);
};
// 從瀏覽器地址中獲取對應(yīng)參數(shù)
const GetQueryString = (name) => {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
// 獲取url中 ? 符后的字符串并正則匹配
let r = window.location.search.substr(1).match(reg);
let context = "";
r && (context = r[2]);
reg = null;
r = null;
return context;
};
// 心跳檢查（看看websocket是否還在正常連接中）
let heartCheck = {
timeout: 15000,
timeoutObj: null,
serverTimeoutObj: null,
// 重啟
reset() {
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
this.start();
},
// 停止
stop() {
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
},
// 開啟定時器
start() {
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
// 15s之內(nèi)如果沒有收到后臺的消息，則認為是連接斷開了，需要重連
this.timeoutObj = setTimeout(() => {
writeToScreen("心跳檢查，發(fā)送ping到后臺");
try {
const sendData = { active: "heart" };
wsObj.send(JSON.stringify(sendData));
} catch (err) {
writeToScreen("發(fā)送ping異常");
}
console.log("內(nèi)嵌定時器this.serverTimeoutObj: ", this.serverTimeoutObj);
// 內(nèi)嵌定時器
this.serverTimeoutObj = setTimeout(() => {
writeToScreen("沒有收到后臺的數(shù)據(jù)，重新連接");
reconnect();
}, this.timeout);
}, this.timeout);
},
};
2、頁面使用：
先引入：
import { connectWebsocket, closeWebsocket } from "@/utils/websocket.js";
這是一個數(shù)據(jù)大屏的項目因為只有一個頁面，我就把建立鏈接的方法放在了首頁的mounted里面，你們可以放到main.js。文章來源：http://www.zghlxwxcb.cn/news/detail-741211.html
mounted() {
connectWebsocket(
// 地址
"ws://后端提供的地址",
// 傳遞給后臺的數(shù)據(jù)
{},
// 成功拿到后臺返回的數(shù)據(jù)的回調(diào)函數(shù)
(res) => {
let datas = JSON.parse(res);
let result = datas.data.data;
console.log(result,'返回結(jié)果，拿到之后該干啥干啥吧！')
},
// websocket連接失敗的回調(diào)函數(shù)
() => {
console.log("失敗的回調(diào)函數(shù)");
}
);
},
http://t.csdn.cn/fiAsF文章來源地址http://www.zghlxwxcb.cn/news/detail-741211.html
到了這里，關(guān)于vue封裝和使用websocket的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
