export?default?{

data()?{

return?{

websock:?null,

over:"",

endtime:"",

starttime:""

}

},

created()?{

this.initWebSocket();

},

destroyed()?{

this.websock.close()?//離開路由之后斷開websocket連接

},

methods:?{

initWebSocket(){?//初始化weosocket

const?wsuri?=?"ws://127.0.0.1:8080";

this.websock?=?new?WebSocket(wsuri);

this.websock.onmessage?=?this.websocketonmessage;

this.websock.onopen?=?this.websocketonopen;

this.websock.onerror?=?this.websocketonerror;

this.websock.onclose?=?this.websocketclose;

},

websocketonopen(){?//連接建立之后執行send方法發送數據

let?actions?=?{"test":"12345"};

this.over?=?setInterval(()?=>?{

this.websocketsend(JSON.stringify(actions));

this.starttime?=?new?Date()

//?console.log(this.starttime,"開始")

if(this.endtime?!=?"")?{

//?console.log(this.starttime?-?this.endtime,"時間差")

if(this.starttime?-?this.endtime?>=6000)?{

this.starttime=""

this.endtime=""

clearInterval(this.over);

this.initWebSocket();

}

}

//?}

},?5000);

},

websocketonerror(){//連接建立失敗重連

this.initWebSocket();

this.starttime=""

this.endtime=""

clearInterval(this.over);

this.initWebSocket();

},

websocketonmessage(e){?//數據接收

const?redata?=?JSON.parse(e.data);

if(redata.test?==?12345)?{

this.endtime?=?new?Date()

}

},

websocketsend(Data){//數據發送

this.websock.send(Data);

},

websocketclose(e){??//關閉

console.log('斷開連接',e);

},

},

}

總結

以上是生活随笔為你收集整理的vue 心跳监控_vue websocket 加心跳的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。