小学的门户网站建设,全球电子商务网站排名,动完网站设计网站,网站优化多少钱websocket轮询每隔5秒给服务端send一次信息#xff0c;主要功能点如下#xff1a;socket 采用了定时器 setInterval#xff08;#xff09; 需要清除定时器否则会报错监听了突然关闭浏览器窗口#xff0c;destroyed里面直接监听 window.removeEventListener(beforeu…websocket轮询每隔5秒给服务端send一次信息主要功能点如下socket 采用了定时器 setInterval 需要清除定时器否则会报错监听了突然关闭浏览器窗口destroyed里面直接监听 window.removeEventListener(beforeunload, e this.beforeunloadHandler(e)) 然后调用this.webstock.close()关闭socket的长链接。WebSocket连接发生错误的时候连接错误 需要重连this.reConnect()尝试重新连接,本次重连次数大于6次就不连接了放弃连接。先上效果图一 、功能点一清除定时器clearInterval(this.timer) // 清除定时器二、功能点二监听了突然关闭浏览器窗口 mounted() {window.addEventListener(beforeunload, e this.beforeunloadHandler(e))window.addEventListener(unload, e this.unloadHandler(e))}, beforeunloadHandler() {this._beforeUnload_time new Date().getTime();},unloadHandler(e) {this._gap_time new Date().getTime() - this._beforeUnload_time;// debugger// 关闭或刷新窗口都保存数据到后台// 判断窗口是关闭还是刷新if (this._gap_time 5) {// 关闭连接this.webstock.close()} } destroyed() {this.$destroy()clearInterval(this.timer) // 清除定时器// 页面销毁时关闭长连接// if (this.webstock ! null) {// this.webstock.close()// } window.removeEventListener(beforeunload, e this.beforeunloadHandler(e))window.removeEventListener(unload, e this.unloadHandler(e))}三、功能点三WebSocket连接发生错误的时候连接错误 需要重连websocketonerror(e) {console.log(WebSocket连接发生错误)// 连接断开后修改标识this.isConnect false// 连接错误 需要重连this.reConnect()}},全部代码如下template
/templatescript
export default {data() {return {timer: 5000,webstock: , // webSocket使用isConnect: false, // webSocket连接标识 避免重复连接reConnectNum: 1, // 断开后重新连接的次数 免得后台挂了,前端一直重连_beforeUnload_time: null,_gap_time: null}},methods: {/*webSocket start*/initWebSocket() {let userId this.$store.state.user.userIdif (userId ! null userId ! ) {// WebSocket与普通的请求所用协议有所不同ws等同于httpwss等同于https// 本地环境// let wsServer // ${// location.protocol https ? wss : ws// }://localhost:9106/接口前缀/websocket/ userId;// 线上环境let wsServer ws://172.16.0.54:8102/api/webSocket/ userIdconsole.log(wsServer:, wsServer)this.webstock new WebSocket(wsServer)this.webstock.onopen this.websocketonopenthis.webstock.onerror this.websocketonerrorthis.webstock.onmessage this.websocketonmessagethis.webstock.onclose this.websocketclose}},websocketonopen() {console.log(WebSocket连接成功) // 连接建立后修改标识this.isConnect trueconst timeoutInfoId 420507657544310784clearInterval(this.timer) // 清除定时器const that thissetInterval(() {if (window.location.pathname /standardTemplate) {that.webstock.send(timeoutInfoId)}}, this.timer)},websocketonerror(e) {console.log(WebSocket连接发生错误)// 连接断开后修改标识this.isConnect false// 连接错误 需要重连// this.reConnect()if (window.location.pathname /standardTemplate) {this.reConnect()}},// 接收后端推送过来的消息websocketonmessage(e) {console.log(message消息:, e.data)// if (e ! null) {// let str JSON.parse(e.data)// }},websocketclose(e) {console.log(webSocket连接关闭)// 连接断开后修改标识this.isConnect falsethis.webstock if (window.location.pathname /standardTemplate) {this.reConnect()}},// 重新连接reConnect() {console.log(尝试重新连接,本次重连次数: this.reConnectNum)if (this.reConnectNum 6) {return false}// 如果已经连上就不再重试了if (this.isConnect) returnthis.initWebSocket()this.reConnectNum this.reConnectNum 1},/*webSocket end*/beforeunloadHandler() {this._beforeUnload_time new Date().getTime();},unloadHandler(e) {this._gap_time new Date().getTime() - this._beforeUnload_time;// debugger// 关闭或刷新窗口都保存数据到后台// 判断窗口是关闭还是刷新if (this._gap_time 5) {// 关闭连接this.webstock.close()} }},created() {this.reConnectNum 1this.initWebSocket()},mounted() {window.addEventListener(beforeunload, e this.beforeunloadHandler(e))window.addEventListener(unload, e this.unloadHandler(e))},destroyed() {this.$destroy()clearInterval(this.timer) // 清除定时器// 页面销毁时关闭长连接// if (this.webstock ! null) {// this.webstock.close()// } window.removeEventListener(beforeunload, e this.beforeunloadHandler(e))window.removeEventListener(unload, e this.unloadHandler(e))}
}
/script
问题一、报错信息如下socketReport.vue?8285:51 Uncaught DOMException: Failed to execute send on WebSocket: Still in CONNECTING state.要明白这个问题产生的原因就需要了解websocket的几个状态。通常在实例化一个websocket对象之后客户端就会与服务器进行连接。但是连接的状态是不确定的于是用readyState属性来进行标识。它有四个值分别对应不同的状态CONNECTING值为0表示正在连接
OPEN值为1表示连接成功可以通信了
CLOSING值为2表示连接正在关闭
CLOSED值为3表示连接已经关闭或者打开连接失败。这样问题的原因就很明显了之所以数据不能发送出去是因为websocket还处在“CONNECTING”状态下连接还没有成功。解决办法只要在函数中添加对状态的判断在状态为OPEN时执行send方法即可。方法一代码如下this.init()
if (this.webstock.readyState1) {this.webstock.send()
}问题二、vue项目中监听电脑网络的状态突然断开网络或者关机写法一、 data() {return {network: true, //默认有网}
}mounted() {window.addEventListener(online, () {console.log(网络已连接:)this.network true})// 检测断网window.addEventListener(offline, () {console.log(已断网:)this.network falseif (this.webstock ! null) {this.webstock.close()} })
}控制台打印的结果断开网络的情况再次连接网络写法二、data() {return {onLine: navigator.onLine,}
} mounted() {console.log(this.onLine:, this.onLine)window.addEventListener(beforeunload, e this.beforeunloadHandler(e))window.addEventListener(unload, e this.unloadHandler(e))} beforeDestroy(){window.removeEventListener(online, this.updateOnlineStatus);window.removeEventListener(offline, this.updateOnlineStatus);}, // 检测断网updateOnlineStatus(e) {const { type } e// this.onLine type onlineif (type online) {// 网络已连接console.log(网络已连接:)this.$emit(fatherMethod)if (window.location.pathname /newReport || window.location.pathname /c3analysis) {if (!this.unLock){this.reConnect()}}} else if (type offline) {// 已断网console.log(已断网:)if (this.webstock ! null) {this.webstock.close()} }},
