1 WebSocket简介

WebSocket是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

前后端通信请看以下内容：
使用WebSocket实现服务端和客户端的通信:https://blog.csdn.net/ZGL_cyy/article/details/117845647
WebSocket网页聊天室:https://blog.csdn.net/ZGL_cyy/article/details/118438572
WebSocket区分不同客户端方法:https://blog.csdn.net/ZGL_cyy/article/details/122838063

2 WebSocket事件与方法

2.1 创建WebSocket实例

    var socketObj;if ("WebSocket" in window) {socketObj = new WebSocket(webSocketLink);} else if ("MozWebSocket" in window) {socketObj = new MozWebSocket(webSocketLink);}

2.2 WebSocket 事件

2.3 WebSocket 方法

方法.png

3 WebSocket的心跳重连机制

3.1 问题

（1）websocket在连接后，如果长时间服务端和客户端不发消息，服务端会把websocket给断开。
（2）存在网络忽然断开的情况，这时服务器端并没有触发onclose的事件。服务器会继续向客户端发送多余的信息，这些数据会丢失。

3.2 心跳重连机制

为了解决上面的问题，就需要⼀种机制来检测客户端和服务端是否处于正常的连接状态。因此就有了websocket的心跳机制。

⼼跳机制是客户端每隔⼀段时间会向服务端发送⼀个数据包，告诉服务端自己还活着，同时客户端会根据服务端是否会回传⼀个数据包来确定服务端是否还活着。
如果客户端没有收到回复，表示websocket断开连接或者网络出现问题，就需要重连。

4 实际使用

详细代码如下：

<template><div></div>
</template>
<script>
export default {data() {return {// websocket相关socketObj: "", // websocket实例对象//心跳检测heartCheck: {vueThis: this, // vue实例timeout: 10000, // 超时时间timeoutObj: null, // 计时器对象——向后端发送心跳检测serverTimeoutObj: null, // 计时器对象——等待后端心跳检测的回复// 心跳检测重置reset: function () {clearTimeout(this.timeoutObj);clearTimeout(this.serverTimeoutObj);return this;},// 心跳检测启动start: function () {this.timeoutObj && clearTimeout(this.timeoutObj);this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);this.timeoutObj = setTimeout(() => {// 这里向后端发送一个心跳检测，后端收到后，会返回一个心跳回复this.vueThis.socketObj.send("HeartBeat");console.log("发送心跳检测");this.serverTimeoutObj = setTimeout(() => {// 如果超过一定时间还没重置计时器，说明websocket与后端断开了console.log("未收到心跳检测回复");// 关闭WebSocketthis.vueThis.socketObj.close();}, this.timeout);}, this.timeout);},},socketReconnectTimer: null, // 计时器对象——重连socketReconnectLock: false, // WebSocket重连的锁socketLeaveFlag: false, // 离开标记（解决 退出登录再登录 时出现的 多次相同推送 问题，出现的本质是多次建立了WebSocket连接）};},created() {console.log("离开标记", this.socketLeaveFlag);},mounted() {// websocket启动this.createWebSocket();},destroyed() {// 离开标记this.socketLeaveFlag = true;// 关闭WebSocketthis.socketObj.close();},methods: {// websocket启动createWebSocket() {let webSocketLink = "wss://uat.sssyin.cn/ws-reservation"; // webSocket地址// console.log(webSocketLink);try {if ("WebSocket" in window) {this.socketObj = new WebSocket(webSocketLink);} else if ("MozWebSocket" in window) {this.socketObj = new MozWebSocket(webSocketLink);}// websocket事件绑定this.socketEventBind();} catch (e) {console.log("catch" + e);// websocket重连this.socketReconnect();}},// websocket事件绑定socketEventBind() {// 连接成功建立的回调this.socketObj.onopen = this.onopenCallback;// 连接发生错误的回调this.socketObj.onerror = this.onerrorCallback;// 连接关闭的回调this.socketObj.onclose = this.oncloseCallback;// 向后端发送数据的回调this.socketObj.onsend = this.onsendCallback;// 接收到消息的回调this.socketObj.onmessage = this.getMessageCallback;//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。window.onbeforeunload = () => {this.socketObj.close();};},// websocket重连socketReconnect() {if (this.socketReconnectLock) {return;}this.socketReconnectLock = true;this.socketReconnectTimer && clearTimeout(this.socketReconnectTimer);this.socketReconnectTimer = setTimeout(() => {console.log("WebSocket:重连中...");this.socketReconnectLock = false;// websocket启动this.createWebSocket();}, 4000);},// 连接成功建立的回调onopenCallback: function (event) {console.log("WebSocket:已连接");// 心跳检测重置this.heartCheck.reset().start();},// 连接发生错误的回调onerrorCallback: function (event) {console.log("WebSocket:发生错误");// websocket重连this.socketReconnect();},// 连接关闭的回调oncloseCallback: function (event) {console.log("WebSocket:已关闭");// 心跳检测重置this.heartCheck.reset();if (!this.socketLeaveFlag) {// 没有离开——重连// websocket重连this.socketReconnect();}},// 向后端发送数据的回调onsendCallback: function () {console.log("WebSocket:发送信息给后端");},// 接收到消息的回调getMessageCallback: function (msg) {// console.log(msg);console.log(msg.data);if (msg.data.indexOf("HeartBeat") > -1) {// 心跳回复——心跳检测重置// 收到心跳检测回复就说明连接正常console.log("收到心跳检测回复");// 心跳检测重置this.heartCheck.reset().start();} else {// 普通推送——正常处理console.log("收到推送消息");let data = JSON.parse(msg.data);// 相关处理console.log(data);}},},
};
</script>

WebSocket心跳机制相关推荐

vue 心跳监控_【笔记】vue中websocket心跳机制
data () { return { ws: null,//建立的连接 lockReconnect: false,//是否真正建立连接 timeout: 28*1000,//30秒一次心跳 timeo ...
websocket 心跳机制
WebSocket 是一种在客户端和服务器之间创建持久连接的技术.为了保持连接的稳定性,就需要通过发送心跳消息来维持 WebSocket 连接. 1.创建一个webscoket基本的使用 // 创建 ...
【websocket前后端交互】vue-springboot实现websocket前后端交互链接，websocket心跳重连，包含前后端代码，复制即可用【详细解释版本】
前言: 还是老规矩,一步步的教大家如何建立前后端的 websocket 链接,并能完成互相传送数据的简单功能.由于网上找了半天发现很多帖子都是东一句西一句的,要不就是写的没什么注释和解释,导致我这个前 ...
【Web通信】WebSocket详解：WebSocket是什么？如何使用WebSocket？在Vue中封装WebSocket(心跳监测)。nginx配置websocket。
一.WebSocket相关定义 1. WebSocket定义 WebSocket 是一种基于TCP的全双工通信协议,它提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法.数据可以作为" ...
websocket心跳链接代码_WebSocket原理与实践(五)--心跳及重连机制
在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件.这样会有:服务器会继续向客户端发送多余的链接,并且这些数据还会丢失.所以就需要 ...
springboot心跳检测_springboot websocket 实时刷新添加心跳机制（亲测可用版）
思路在我之前的一篇文章当中写到了websocket的实时刷新,但是有个问题没有解决,就是长时间没有数据的时候,这个连接就会自动断开,然后再次进行连接的话,需要再次进行连接.如果加入心跳机制的话,10 ...
java 心跳断网重连_工作笔记5 - websocket心跳重连机制
心跳重连缘由在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的?onclos ...
socket服务器断开消息,详解JS WebSocket断开原因和心跳机制
1.断开原因 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来. ws.onclose = function (e) { console.log('websocket ...
Websocket心跳检测、重连机制
前言为了获取实时数据,前端需要和后端保持通信,HTTP 协议只能是客户端向服务器发出请求,服务器返回查询结果.这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦.我们只能使 ...

WebSocket心跳机制

目录