Vue中使用WebSocket(含心跳)

vue

data(){

return{

websock: null, //建立的连接

lockReconnect: false, //是否真正建立连接

timeout: 20 * 1000, //20秒一次心跳

timeoutObj: null, //心跳心跳倒计时

serverTimeoutObj: null, //心跳倒计时

timeoutnum: null //断开 重连倒计时

}

}

created() {

// //页面刚进入时开启长连接

this.initWebSocket();

},

destroyed() {

//页面销毁时关闭长连接

this.websocketclose();

},

methods: {

initWebSocket() {

//建立连接

//初始化weosocket

const wsuri = "ws://localhost:9998/echo";

//建立连接

this.websock = new WebSocket(wsuri);

//连接成功

this.websock.onopen = this.websocketonopen;

//连接错误

this.websock.onerror = this.websocketonerror;

//接收信息

this.websock.onmessage = this.websocketonmessage;

//连接关闭

this.websock.onclose = this.websocketclose;

},

reconnect() {

//重新连接

var that = this;

if (that.lockReconnect) {

return;

}

that.lockReconnect = true;

//没连接上会一直重连,设置延迟避免请求过多

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() {

//这里发送一个心跳,后端收到后,返回一个心跳消息

if (self.websock.readyState == 1) {

//如果连接正常

self.websock.send("heartbeat");

} else {

//否则重连

self.reconnect();

}

self.serverTimeoutObj = setTimeout(function() {

//超时关闭

self.websock.close();

}, self.timeout);

}, self.timeout);

},

websocketonopen() {

//连接成功事件

this.websocketsend('发送数据');

//提示成功

console.log("连接成功", 3);

//开启心跳

this.start();

},

websocketonerror(e) {

//连接失败事件

//错误

console.log("WebSocket连接发生错误");

//重连

this.reconnect();

},

websocketclose(e) {

//连接关闭事件

//提示关闭

console.log("连接已关闭");

//重连

this.reconnect();

},

websocketonmessage(event) {

//接收服务器推送的信息

//打印收到服务器的内容

console.log("收到服务器信息",event.data);

let data=event.data

//收到服务器信息,心跳重置

this.reset();

},

websocketsend(msg) {

//向服务器发送信息

this.websock.send(msg);

}

}

转载自:https://www.jianshu.com/p/3ad8afd6d252

以上是 Vue中使用WebSocket(含心跳) 的全部内容, 来源链接: utcz.com/z/380464.html

回到顶部