data(){
? ? return{
? ??websock: null, //建立的連接
? ? ? ? ? ? lockReconnect: false, //是否真正建立連接
? ? ? ? ? ? timeout: 20 * 1000, //20秒一次心跳
? ? ? ? ? ? timeoutObj: null, //心跳心跳倒計(jì)時
? ? ? ? ? ? serverTimeoutObj: null, //心跳倒計(jì)時
? ? ? ? ? ? timeoutnum: null //斷開 重連倒計(jì)時
}
?}
mounted(){
? ? ? ? this.initWebSocket();
}
destroyed() {
? ? ? ? ? //頁面銷毀時關(guān)閉長連接
? ? ? ? ? this.websocketclose();
? ? ? ? },
initWebSocket() {
? ? ? ? ? //建立連接
? ? ? ? ? //初始化weosocket
? ? ? ? ? const wsuri = `地址`;
? ? ? ? ? //建立連接
? ? ? ? ? this.websock = new WebSocket(wsuri);
? ? ? ? ? //連接成功
? ? ? ? ? this.websock.onopen = this.websocketonopen;
? ? ? ? ? //連接錯誤
? ? ? ? ? this.websock.onerror = this.websocketonerror;
? ? ? ? ? //接收信息
? ? ? ? ? this.websock.onmessage = this.websocketonmessage;
? ? ? ? ? //連接關(guān)閉
? ? ? ? ? this.websock.onclose = this.websocketclose;
? ? ? ? },
? ? ? ? reconnect() {
? ? ? ? ? //重新連接
? ? ? ? ? var that = this;
? ? ? ? ? if (that.lockReconnect) {
? ? ? ? ? ? return;
? ? ? ? ? }
? ? ? ? ? that.lockReconnect = true;
? ? ? ? ? //沒連接上會一直重連，設(shè)置延遲避免請求過多
? ? ? ? ? that.timeoutnum && clearTimeout(that.timeoutnum);
? ? ? ? ? that.timeoutnum = setTimeout(function() {
? ? ? ? ? ? //新連接
? ? ? ? ? ? that.initWebSocket();
? ? ? ? ? ? that.lockReconnect = false;
? ? ? ? ? }, 5000);
? ? ? ? },
? ? ? ? reset() {
? ? ? ? ? //重置心跳
? ? ? ? ? var that = this;
? ? ? ? ? //清除時間
? ? ? ? ? clearTimeout(that.timeoutObj);
? ? ? ? ? clearTimeout(that.serverTimeoutObj);
? ? ? ? ? //重啟心跳
? ? ? ? ? that.start();
? ? ? ? },
? ? ? ? start() {
? ? ? ? ? //開啟心跳
? ? ? ? ? var self = this;
? ? ? ? ? self.timeoutObj && clearTimeout(self.timeoutObj);
? ? ? ? ? self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
? ? ? ? ? self.timeoutObj = setTimeout(function() {
? ? ? ? ? ? //這里發(fā)送一個心跳，后端收到后，返回一個心跳消息
? ? ? ? ? ? if (self.websock.readyState == 1) {
? ? ? ? ? ? ? //如果連接正常
? ? ? ? ? ? ? self.websock.send("heartbeat");
? ? ? ? ? ? } else {
? ? ? ? ? ? ? //否則重連
? ? ? ? ? ? ? self.reconnect();
? ? ? ? ? ? }
? ? ? ? ? ? self.serverTimeoutObj = setTimeout(function() {
? ? ? ? ? ? ? //超時關(guān)閉
? ? ? ? ? ? ? self.websock.close();
? ? ? ? ? ? }, self.timeout);
? ? ? ? ? }, self.timeout);
? ? ? ? },
? ? ? ? websocketonopen() {
? ? ? ? ? //連接成功事件
? ? ? ? ? this.websocketsend('發(fā)送數(shù)據(jù)');
? ? ? ? ? //提示成功
? ? ? ? ? // console.log("連接成功", 3);
? ? ? ? ? //開啟心跳
? ? ? ? ? this.start();
? ? ? ? },
? ? ? ? websocketonerror(e) {
? ? ? ? ? //連接失敗事件
? ? ? ? ? //錯誤
? ? ? ? ? console.log("WebSocket連接發(fā)生錯誤");
? ? ? ? ? //重連
? ? ? ? ? this.reconnect();
? ? ? ? },
? ? ? ? websocketclose(e) {
? ? ? ? ? //連接關(guān)閉事件
? ? ? ? ? //提示關(guān)閉
? ? ? ? ? // console.log("連接已關(guān)閉");
? ? ? ? ? //重連
? ? ? ? ? this.reconnect();
? ? ? ? },
? ? ? ? websocketonmessage(event) {
? ? ? ? ? //接收服務(wù)器推送的信息
? ? ? ? ? //打印收到服務(wù)器的內(nèi)容
? ? ? ? ? console.log("收到服務(wù)器信息",event.data);
? ? ? ? ? let datas = JSON.parse(event.data)
? ? ? ? ? //收到服務(wù)器信息，心跳重置
? ? ? ? ? this.reset();
? ? ? ? },
? ? ? ? websocketsend(msg) {
? ? ? ? ? //向服務(wù)器發(fā)送信息
? ? ? ? ? this.websock.send(msg);
? ? ? ? },
