vue websocket 建立连接并添加心跳检测机制

图片：

代码：
新建一个文件夹，里面有两个文件

组件1：
index.js

import Bus from './bus.js'var websocketConnectdCount = 0export function newWebsocket() {var websocket = null// 判断当前环境是否支持Websocketif (window.WebSocket) {if (!websocket) {const ws = 'ws://172.16.24.23:58080/webSocket'websocket = new WebSocket(ws)} else {console.log('not support websocket')}// 连接成功建立得回调方法websocket.onopen = function(e) {heartCheck.reset().start() // 成功建立连接后，重置心跳检测websocket.send('socket heart') // 连接成功将消息传给服务端console.log('connected successfully')}// 连接发生错误 会继续尝试发生新得连接 5次websocket.onerror = function() {console.log('onerror连接发生错误')websocketConnectdCount++if (websocketConnectdCount <= 5) {newWebsocket()}}// 连接到消息得回调方法websocket.onmessage = function(e) {console.log('接受到消息了', e)var message = eif (message) {Bus.$emit('message', message)}heartCheck.reset().start() // 如果获取到消息，说明连接是正常的，重置心跳检测}// 接受到服务端关闭连接时的回调方法websocket.onclose = function() {console.log('onclose断开连接')}// 监听窗口事件 窗口关闭 主动断开连接window.onbeforeunload = function() {websocket.close()}// 心跳检测, 每隔一段时间检测连接状态，如果处于连接中，// 就向server端主动发送消息，来重置server端与客户端的最大连接时间，如果已经断开了，发起重连。var heartCheck = {timeout: 300000, // 5分钟发一次心跳，比server端设置的连接时间稍微小一点，在接近断开的情况下以通信的方式去重置连接时间。timeoutObj: null,serverTimeoutObj: null,reset: function() {clearTimeout(this.timeoutObj)clearTimeout(this.serverTimeoutObj)return this},start: function() {this.serverTimeoutObj = setInterval(function() {if (websocket.readyState === 1) {console.log('连接状态，发送消息保持连接')websocket.send('socket heart') // 连接成功将消息传给服务端heartCheck.reset().start() // 如果获得消息 说明连接正常 重置心跳检测} else {console.log('断开连接， 尝试重连')newWebsocket()}}, this.timeout)}}}
}

组件2：
bus.js

import Vue from 'vue'
export default new Vue()

页面引入：

<script>import Bus from '@/socket/bus'import { newWebsocket } from '@/socket/index'
</script>

created () {newWebsocket()Bus.$on('message', res => {this.getSock(res)})},

methods: {getSock(msg) {if (msg.data !== '服务器连接成功！') {let data = msg.datadata = JSON.parse(data)console.log(data, 'socketData')  // data就是服务端发来的消息}}
}

vue websocket 建立连接并添加心跳检测机制相关推荐

在vue中实现使用webscoket进行心跳检测机制
<script>data() {// 心跳--startheartCheck: null,lockReconnect: false, //避免ws重连ws: null,wsUrl: nul ...
Android通过WebSocket建立一个长连接（带心跳检测）从服务器端接收消息
最近公司要做一款内部使用的工具类app,方便销售部门打电话(其实就是在后台有好多用户数据,之前销售部门同事拨打电话,需要自己从销售后台查看用户手机号等信息,然后自己拿自己手机拨号,然后打出去.现在想实 ...
Netty -Netty心跳检测机制案例,Netty通过WebSocket编程实现服务器和客户端长链接
Netty心跳检测机制案例案例要求编写一个Netty心跳检测机制案例,当服务器超过3秒没有读时,就提示读空闲当服务器超过5秒没有写操作时,提示写空闲服务器超过7秒没有读或者写操作时,就提示读写 ...
netty的编解码、粘包拆包问题、心跳检测机制原理
文章目录 1. 编码解码器 2. 编解码序列化机制的性能优化 3. Netty粘包拆包 4. Netty心跳检测机制 5. Netty断线自动重连实现 1. 编码解码器当你通过netty发送或者接受 ...
Netty学习（七）：心跳检测机制
一.什么是心跳检测机制所谓心跳, 即在 TCP 长连接中, 客户端和服务器之间定期发送的一种特殊的数据包, 通知对方自己还在线, 以确保 TCP 连接的有效性. 心跳机制主要是客户端和服务端长时间连 ...
Netty(八) Netty心跳检测机制
1.什么是长链接和短链接在HTTP/1.0中默认使用短连接.也就是说,客户端和服务器每进行一次HTTP操作,就建立一次连接,任务结束就中断连接.当客户端浏览器访问的某个HTML或其他类型的Web页中 ...
netty 中的心跳检测机制
为什么要心跳检测机制当服务端接收到客户端的连接以后,与客户端建立 NioSocketChannel 数据传输的双工通道,但是如果连接建立以后,客户端一直不给服务端发送消息,这种情况下是占用了资源,属 ...
Netty 心跳检测机制
心跳检测机制目的:就是用于检测检测通信对方是否还"在线",如果已经断开,就要释放资源或者尝试重连. 大概的实现原理就是:在服务器和客户端之间一定时间内没有数据交互时, 即处 ...
Netty空闲心跳检测机制
概述 Netty提供了一个读写空闲心跳检测机制的Handler,用于检测读空闲.写空闲.读写空闲. 如果服务端在一定时间内没有执行读请求,就会触发读空闲事件,一定时间内没有执行写请求,就会触发写空闲事 ...

vue websocket 建立连接并添加心跳检测机制

vue websocket 建立连接并添加心跳检测机制相关推荐

最新文章

热门文章