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