在vue中实现使用webscoket进行心跳检测机制

<script>data() {// 心跳--startheartCheck: null,lockReconnect: false, //避免ws重连ws: null,wsUrl: null,// 心跳--end},mounted() {_this.heartCheck = {timeout: 1000, //1分钟发一次心跳timeoutObj: null,serverTimeoutObj: null,reset: function () {clearTimeout(this.timeoutObj)clearTimeout(this.serverTimeoutObj)return this},start: function () {var self = thisthis.timeoutObj = setTimeout(() => {//这里发送一个心跳，后端收到后，返回一个心跳消息，//onmessage拿到返回的心跳就说明连接正常_this.ws.send('ping')// console.log("ping")self.serverTimeoutObj = setTimeout(() => {//如果超过一定时间还没重置，说明后端主动断开了_this.ws.close() //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次}, self.timeout)}, this.timeout)},}if (!window.WebSocket) {window.WebSocket = window.MozWebSocket}if (window.WebSocket) {_this.wsUrl = 'ws://192.168.3.54:6002/ws?projectSonId=' + localStorage.getItem('edrId')_this.ws = new WebSocket(_this.wsUrl) //接口地址_this.createWebSocket(_this.ws, _this.wsUrl)} else {alert('您的浏览器不支持WebSocket协议！')}},methods:{// 创建wscreateWebSocket(ws, url) {try {this.initEventHandle(ws, url)} catch (e) {if (!window.WebSocket) {window.WebSocket = window.MozWebSocket}if (window.WebSocket) {_this.wsUrl = 'ws://122.14.196.211:8899/ws?projectSonId=' + localStorage.getItem('edrId')_this.ws = new WebSocket(_this.wsUrl) //接口地址_this.createWebSocket(_this.ws, _this.wsUrl)} else {alert('您的浏览器不支持WebSocket协议！')}}},// 监听initEventHandle(ws, wsUrl) {let _this = thisws.onclose = function () {if (!window.WebSocket) {window.WebSocket = window.MozWebSocket}if (window.WebSocket) {_this.wsUrl = 'ws://122.14.196.211:8899/ws?projectSonId=' + localStorage.getItem('edrId')_this.ws = new WebSocket(_this.wsUrl) //接口地址_this.createWebSocket(_this.ws, _this.wsUrl)} else {alert('您的浏览器不支持WebSocket协议！')}console.log('llws连接关闭!' + new Date().toLocaleString())}ws.onerror = function () {console.log('llws连接错误!')}ws.onmessage = function (event) {//如果获取到消息，心跳检测重置_this.heartCheck.reset().start() //拿到任何消息都说明当前连接是正常的console.log('llws收到消息啦:' + event.data)// console.log(event.data)console.log(event.data)}ws.onopen = function () {_this.heartCheck.reset().start() //心跳检测重置console.log('llws连接成功!')}},}
<script/>

在vue中实现使用webscoket进行心跳检测机制相关推荐

vue websocket 建立连接并添加心跳检测机制
图片: 代码: 新建一个文件夹,里面有两个文件组件1: index.js import Bus from './bus.js'var websocketConnectdCount = 0export ...
netty 中的心跳检测机制
为什么要心跳检测机制当服务端接收到客户端的连接以后,与客户端建立 NioSocketChannel 数据传输的双工通道,但是如果连接建立以后,客户端一直不给服务端发送消息,这种情况下是占用了资源,属 ...
netty的编解码、粘包拆包问题、心跳检测机制原理
文章目录 1. 编码解码器 2. 编解码序列化机制的性能优化 3. Netty粘包拆包 4. Netty心跳检测机制 5. Netty断线自动重连实现 1. 编码解码器当你通过netty发送或者接受 ...
Netty空闲心跳检测机制
概述 Netty提供了一个读写空闲心跳检测机制的Handler,用于检测读空闲.写空闲.读写空闲. 如果服务端在一定时间内没有执行读请求,就会触发读空闲事件,一定时间内没有执行写请求,就会触发写空闲事 ...
Netty -Netty心跳检测机制案例,Netty通过WebSocket编程实现服务器和客户端长链接
Netty心跳检测机制案例案例要求编写一个Netty心跳检测机制案例,当服务器超过3秒没有读时,就提示读空闲当服务器超过5秒没有写操作时,提示写空闲服务器超过7秒没有读或者写操作时,就提示读写 ...
Netty学习（七）：心跳检测机制
一.什么是心跳检测机制所谓心跳, 即在 TCP 长连接中, 客户端和服务器之间定期发送的一种特殊的数据包, 通知对方自己还在线, 以确保 TCP 连接的有效性. 心跳机制主要是客户端和服务端长时间连 ...
Netty(八) Netty心跳检测机制
1.什么是长链接和短链接在HTTP/1.0中默认使用短连接.也就是说,客户端和服务器每进行一次HTTP操作,就建立一次连接,任务结束就中断连接.当客户端浏览器访问的某个HTML或其他类型的Web页中 ...
Netty心跳检测机制
一.Netty心跳检测机制心跳:即在 TCP 长连接中,客户端和服务器之间定期发送的一种特殊的数据包,通知对方自己还在线,以确保 TCP 连接的有效性. 在 Netty 中,实现心跳机制的关键是 I ...
Netty教程07：心跳检测机制
需求:编写一个 Netty心跳检测机制案例, 当服务器超过3秒没有读时,就提示读空闲当服务器超过5秒没有写操作时,就提示写空闲实现当服务器超过7秒没有读或者写操作时,就提示读写空闲 Server ...

在vue中实现使用webscoket进行心跳检测机制

在vue中实现使用webscoket进行心跳检测机制相关推荐

最新文章

热门文章