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, "") //生成一个随机数根据后端要求来定
var _this = this
var tt;
var wsurl =this.websock+this.sbnumlist //声明一个websocket的连接 拼接随机数(此处为websocket的地址)
var lockReconnect = false;//避免重复连接
if ('WebSocket' in window) {
_this.ws = new WebSocket(wsurl) // 创建websocket连接
init(); // 执行方法
} 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('发送数据')
}
_this.ws.onmessage = function(evt) {
console.log(evt) // 收到后端返回的数据(主要执行代码的地方)
Heartbeat.start(); // 执行心跳
}
_this.ws.onclose = function() { // 关闭 websocket
reconnect(wsurl);
}
_this.ws.onerror = function() { // websocket执行错误
reconnect(wsurl);
}
}
function reconnect(url) {
if(lockReconnect) {
return;
};
lockReconnect = true; // 没连接上会一直重连,设置延迟避免请求过多
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(){
//这里发送一个心跳,后端收到后,返回一个心跳消息,
_this.ws.send("1234");
self.serverTimeout = setTimeout(function() {
_this.ws.close();
}, self.timeout);
}, this.timeout)
}
}
},
离开页面退出websocket
destroyed(){ // 调用vue 销毁事件
let _this=this
_this.ws.close();
},
具体需求根据具体要求来定,新手上路多多关照,如有什么需要优化的地方还请各位大神多多关照。