双流规划建设管理局网站企业在线培训系统

---

前言

websocket，实现与后端通讯，使用心跳机制，断联自动恢复。

---

一、websocket和心跳是什么？

1. WebSocket
   WebSocket 是一种网络通信协议，允许客户端和服务器之间进行全双工通信（即双方可以同时发送和接收数据）。它通过一次 HTTP 握手建立连接，之后保持长连接，适合实时性要求高的场景。

2. 心跳机制（Heartbeat）
   心跳机制是一种用于检测连接是否存活的机制。客户端和服务器通过定期发送小型数据包（称为“心跳包”）来确认对方是否在线。
   实现方式：
   客户端和服务器约定一个时间间隔（如 30 秒）。
   客户端定期向服务器发送心跳包（通常是一个小型数据包，如 ping）。
   服务器收到心跳包后回复一个响应包（如 pong）。
   如果一方在指定时间内未收到心跳包或响应包，则认为连接已断开。

二、使用步骤

1.

代码如下（示例）：

  created() {const self = this; // 在这里保存组件实例的引用this.join();clearInterval(this.setIntervalId);this.setIntervalId=setInterval(()=>{// 使用 setTimeout 来创建延迟this.heartbeatTest();},3000)},

		//开始链结join() {const wsuri = this.url;//url地址wss://127.0.0.1:1234/websocket/messageconst self = this;this.ws = new WebSocket(wsuri);this.ws.onopen = function (event) {self.text_state = self.text_state + "已经打开连接!" + "\n";clearTimeout(this.heartSetTimeOutId)};this.ws.onmessage = function (event) {self.waitingResponse = true;self.text_content = event.data;self.message = event.data;if (self.text_content == "ok"){self.sendHandle("停机维护")}};this.ws.onclose = (event) => {// 处理连接关闭事件，例如重新连接或执行其他操作if (this.reConnectNum < 10){this.heartSetTimeOutId = setTimeout(() => {this.join();this.reConnectNum++;}, 20000); // 根据需要调整延迟的持续时间（以毫秒为单位）}};this.ws.onerror = (error) => {console.error('WebSocket error: ', error);// 处理WebSocket错误事件};},

    exit() {if (this.ws) {clearInterval(this.setIntervalId);this.ws = null;}},heartbeatTest(){if (this.ws.readyState !== WebSocket.CLOSED){this.sendMessage = "heartCheck";this.ws.send(this.sendMessage);}},close() {const self = this;if (this.ws && this.ws.OPEN){this.ws.onclose = function (event) {self.text_state = self.text_state + "已经关闭连接!" + "\n";};}},

2.监听变化

watch:{text_content:{deep:true,handler(n,o){if (n.indexOf('opera') >-1){let json = JSON.parse(n);this.noticeShowFlag = json.maintainStatus;this.noticeShowMsg = "";if (this.noticeShowFlag){this.noticeShowMsg = json.expirseTime+"操作！！";}}}}},

3.关闭

  beforeDestroy() {//页面销毁时关闭长连接this.close();this.exit();},

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。