sbnumber(){
for (let i = 0; i < 18; i++) {
this.sbnumlist.push(Math.round(Math.random()*10))
}
let aa= this.sbnumlist.toString()
this.sbnumlist=aa.replace(/,/g, "") //生成一個(gè)隨機(jī)數(shù)根據(jù)后端要求來(lái)定
var _this = this
var tt;
var wsurl =this.websock+this.sbnumlist //聲明一個(gè)websocket的連接 拼接隨機(jī)數(shù)(此處為websocket的地址)
var lockReconnect = false;//避免重復(fù)連接
if ('WebSocket' in window) {
_this.ws = new WebSocket(wsurl) // 創(chuàng)建websocket連接
init(); // 執(zhí)行方法
} else {
alert('您的瀏覽器不支持 WebSocket!')
}
function createWebSocket() {
try {
_this.ws = new WebSocket(wsurl);
init();
} catch(e) {
console.log('catch');
reconnect(wsurl);
}
}
function init() {
_this.ws.onopen = function() {
Heartbeat.start();
_this.ws.send('發(fā)送數(shù)據(jù)')
}
_this.ws.onmessage = function(evt) {
console.log(evt) // 收到后端返回的數(shù)據(jù)(主要執(zhí)行代碼的地方)
Heartbeat.start(); // 執(zhí)行心跳
}
_this.ws.onclose = function() { // 關(guān)閉 websocket
reconnect(wsurl);
}
_this.ws.onerror = function() { // websocket執(zhí)行錯(cuò)誤
reconnect(wsurl);
}
}
function reconnect(url) {
if(lockReconnect) {
return;
};
lockReconnect = true; // 沒(méi)連接上會(huì)一直重連,設(shè)置延遲避免請(qǐng)求過(guò)多
tt && clearTimeout(tt);
tt = setTimeout(function () {
createWebSocket(wsurl);
lockReconnect = false;
}, 3000);
}
var Heartbeat= {
timeout: 60000,
timeoutObj: null,
serverTimeout: null,
start: function(){
var self = this;
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeout&& clearTimeout(this.serverTimeout);
this.timeoutObj = setTimeout(function(){
//這里發(fā)送一個(gè)心跳,后端收到后,返回一個(gè)心跳消息,
_this.ws.send("1234");
self.serverTimeout = setTimeout(function() {
_this.ws.close();
}, self.timeout);
}, this.timeout)
}
}
},
離開(kāi)頁(yè)面退出websocket
destroyed(){ // 調(diào)用vue 銷毀事件
let _this=this
_this.ws.close();
},
具體需求根據(jù)具體要求來(lái)定,新手上路多多關(guān)照,如有什么需要優(yōu)化的地方還請(qǐng)各位大神多多關(guān)照。