From 808bc47a2dc594cd594e847fe6f94316bbfa3fe6 Mon Sep 17 00:00:00 2001
From: SHICHAO <17568097882@163.com>
Date: Sat, 26 Aug 2023 14:56:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85socket?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                          | 162 ++++++++++++++++++++-------
 src/utils/index.js                   |  21 +++-
 src/views/home/widget/callcenter.vue |  34 +-----
 src/views/home/widget/fireclues.vue  |  49 ++------
 src/views/home/widget/reportlist.vue |  43 ++-----
 5 files changed, 163 insertions(+), 146 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f7914f3..bd200f6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,93 +5,175 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import {setToken} from "./utils/auth";
+import { mapGetters } from "vuex";
+import { WS_URL } from "./utils/websocketApi";
 export default {
-  name: 'App',
+  name: "App",
   computed: {
-    ...mapGetters([
-      'oidcIsAuthenticated'
-    ])
+    ...mapGetters(["oidcIsAuthenticated"]),
   },
-  provide(){
+  data() {
     return {
-      reload: this.reload
-    }
+      isRouterAlive: true,
+      // socket参数
+      socket: null,
+      timeout: 10 * 1000, // 45秒一次心跳
+      timeoutObj: null, // 心跳心跳倒计时
+      serverTimeoutObj: null, // 心跳倒计时
+      timeoutnum: null, // 断开 重连倒计时
+      lockReconnect: false, // 防止
+      websocket: null,
+    };
   },
-  data(){
-    return {
-      isRouterAlive: true
-    }
+  mounted() {
+    this.initWebSocket();
   },
   methods: {
-    
-    reload(){
-      this.isRouterAlive = false
-      this.$nextTick(function(){
-        this.isRouterAlive = true
-      })
+    initWebSocket() {
+      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
+      let wsUrl = WS_URL;
+      this.websocket = new WebSocket(wsUrl);
+      this.websocket.onopen = this.websocketonopen;
+      this.websocket.onerror = this.websocketonerror;
+      this.websocket.onmessage = this.setOnmessageMessage;
+      this.websocket.onclose = this.websocketclose;
+      // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+      // window.onbeforeunload = that.onbeforeunload
     },
-  }
-}
+    start() {
+      console.log("start");
+      //清除延时器
+      this.timeoutObj && clearTimeout(this.timeoutObj);
+      this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
+      this.timeoutObj = setTimeout(() => {
+        if (this.websocket && this.websocket.readyState == 1) {
+          //发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数
+          this.websocket.send("heartBath");
+        } else {
+          this.reconnect();
+        }
+        //定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接
+        this.serverTimeoutObj = setTimeout(() => {
+          this.websocket.close();
+        }, this.timeout);
+      }, this.timeout);
+    },
+    reset() {
+      // 重置心跳
+      // 清除时间
+      clearTimeout(this.timeoutObj);
+      clearTimeout(this.serverTimeoutObj);
+      // 重启心跳
+      this.start();
+    },
+    // 重新连接
+    reconnect() {
+      if (this.lockReconnect) return;
+      this.lockReconnect = true;
+      //没连接上会一直重连，设置延迟避免请求过多
+      this.timeoutnum && clearTimeout(this.timeoutnum);
+      this.timeoutnum = setTimeout(() => {
+        this.initWebSocket();
+        this.lockReconnect = false;
+      }, 5000);
+    },
+    async setOnmessageMessage(event) {
+      console.log(event.data, "获得消息");
+      this.reset();
+      // 自定义全局监听事件
+      window.dispatchEvent(
+        new CustomEvent("onmessageWS", {
+          detail: {
+            data: event.data,
+          },
+        })
+      );
+    },
+    websocketonopen() {
+      //开启心跳
+      this.start();
+      console.log(
+        "WebSocket连接成功!!!" + new Date() + "----" + this.websocket.readyState
+      );
+    },
+    websocketonerror(e) {
+      console.log("WebSocket连接发生错误" + e + ",重启socket");
+      this.initWebSocket();
+    },
+    websocketclose(e) {
+      this.websocket.close();
+      clearTimeout(this.timeoutObj);
+      clearTimeout(this.serverTimeoutObj);
+      console.log("WebSocket连接关闭,重启socket");
+      this.initWebSocket();
+    },
+    websocketsend(messsage) {
+      that.websocket.send(messsage);
+    },
+    closeWebSocket() {
+      // 关闭websocket
+      that.websocket.close();
+    },
+  },
+};
 </script>
 <style>
-.flex{
+.flex {
   display: flex;
 }
-.flex-1{
+.flex-1 {
   flex: 1;
 }
-.jc-c{
+.jc-c {
   justify-content: center;
 }
-.jc-sb{
+.jc-sb {
   justify-content: space-between;
 }
-.jc-e{
+.jc-e {
   justify-content: end;
 }
-.ai-c{
+.ai-c {
   align-items: center;
 }
-.column{
+.column {
   flex-direction: column;
 }
-.fc-w{
+.fc-w {
   color: #fff;
 }
-.max-h{
+.max-h {
   height: 100%;
 }
-.max-w{
+.max-w {
   width: 100%;
 }
 
-.fz-16{
+.fz-16 {
   font-size: 16px;
 }
-.fz-14{
+.fz-14 {
   font-size: 14px;
 }
-.fz-10{
+.fz-10 {
   font-size: 10px;
 }
-.mt-1{
+.mt-1 {
   margin-top: 10px;
 }
-.mt-2{
+.mt-2 {
   margin-top: 20px;
 }
-.mr-1{
+.mr-1 {
   margin-right: 10px;
 }
-.mr-2{
+.mr-2 {
   margin-right: 20px;
 }
-.cursor{
+.cursor {
   cursor: pointer;
 }
-.fw-b{
+.fw-b {
   font-weight: bold;
 }
 </style>
diff --git a/src/utils/index.js b/src/utils/index.js
index 18e24d7..bd69e64 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -125,4 +125,23 @@ export const diffArrFunc = (arr1, arr2) => {
         }
     }
     return diffArr
-}
\ No newline at end of file
+}
+
+// 判断的是否是JSON字符串
+export const isJson=(str)=>{
+	if (typeof str == 'string') {
+	      try {
+	        var obj = JSON.parse(str);
+			// 等于这个条件说明就是JSON字符串 会返回true
+	        if (typeof obj == 'object' && obj) {
+	          return true;
+	        } else {
+				//不是就返回false
+	          return false;
+	        }
+	      } catch (e) {
+	        return false;
+	      }
+	    }
+	    return false;
+}
diff --git a/src/views/home/widget/callcenter.vue b/src/views/home/widget/callcenter.vue
index f2ac531..f07b48b 100644
--- a/src/views/home/widget/callcenter.vue
+++ b/src/views/home/widget/callcenter.vue
@@ -66,7 +66,6 @@
 
 <script>
 import { postMethodCommon, getMethodCommon } from "@/api/common.js";
-import { WS_URL } from "../../../utils/websocketApi";
 export default {
   name: "setting",
   props: ["globalmap"],
@@ -80,7 +79,7 @@ export default {
   },
   watch: {},
   created() {
-    this.initWebSocket();
+    
     this.getListData();
 
     // 首次加载页面获取在线人数
@@ -122,36 +121,7 @@ export default {
     },
     callUser() {
       this.$emit("callUser");
-    },
-    initWebSocket() {
-      let _this = this;
-      if ("WebSocket" in window) {
-        // 打开一个 web socket
-        var ws = new WebSocket(WS_URL);
-        var heartCheck;
-        ws.onopen = function () {
-          //Web Socket 已连接上，使用 send() 方法发送数据
-          console.log("WEBSOCKET-ONLINE");
-          heartCheck = setInterval(function () {
-            ws.send("HeartBeat");
-          }, 5000);
-        };
-        ws.onmessage = function (evt) {
-          clearInterval(heartCheck);
-          heartCheck = setInterval(function () {
-            ws.send("HeartBeat");
-          }, 5000);
-        };
-        ws.onclose = function () {
-          console.log("WEBSOCKET-CLOSED");
-          clearInterval(heartCheck);
-          _this.initWebSocket();
-        };
-      } else {
-        // 浏览器不支持 WebSocket
-        alert("您的浏览器不支持 WebSocket!");
-      }
-    },
+    }
   },
 };
 </script>
diff --git a/src/views/home/widget/fireclues.vue b/src/views/home/widget/fireclues.vue
index 011ee5b..3f7d3bb 100644
--- a/src/views/home/widget/fireclues.vue
+++ b/src/views/home/widget/fireclues.vue
@@ -45,7 +45,7 @@ export default {
     this.getList();
   },
   mounted() {
-    this.initWebSocket();
+    window.addEventListener("onmessageWS", this.getSocketData);
   },
   methods: {
     getList() {
@@ -66,46 +66,15 @@ export default {
       });
     },
 
-    initWebSocket() {
+    getSocketData(res) {
       let _this = this;
-      if ("WebSocket" in window) {
-        // 打开一个 web socket
-        var ws = new WebSocket(WS_URL);
-        var heartCheck;
-        ws.onopen = function () {
-          //Web Socket 已连接上，使用 send() 方法发送数据
-          console.log("WEBSOCKET-ONLINE");
-          heartCheck = setInterval(function () {
-            ws.send("HeartBeat");
-          }, 5000);
-        };
-        ws.onmessage = function (evt) {
-          clearInterval(heartCheck);
-          heartCheck = setInterval(function () {
-            ws.send("HeartBeat");
-          }, 5000);
-          if (evt.data && evt.data !== '发生数据') {
-            let obj = JSON.parse(evt.data);
-
-            if (obj.Module) {
-              if (obj.Module == "火情信息") {
-                _this.getList();
-                _this.$emit("getlistSocket");
-              }
-            }
-          }
-        };
-        ws.onclose = function () {
-          console.log("WEBSOCKET-CLOSED");
-          clearInterval(heartCheck);
-          _this.initWebSocket();
-        };
-      } else {
-        // 浏览器不支持 WebSocket
-        this.$message({
-          type: "warning",
-          message: "您的浏览器不支持 WebSocket!",
-        });
+      if (!isJson(res.detail.data)) return;
+      let obj = JSON.parse(evt.data);
+      if (obj.Module) {
+        if (obj.Module == "火情信息") {
+          _this.getList();
+          _this.$emit("getlistSocket");
+        }
       }
     },
   },
diff --git a/src/views/home/widget/reportlist.vue b/src/views/home/widget/reportlist.vue
index 6fbe12e..07e98a8 100644
--- a/src/views/home/widget/reportlist.vue
+++ b/src/views/home/widget/reportlist.vue
@@ -79,7 +79,7 @@
 <script>
 let BASE_URL = process.env.VUE_APP_BASE_API;
 import axios from "axios";
-import { WS_URL } from "../../../utils/websocketApi";
+import { isJson } from "../../../utils/index";
 export default {
   name: "toolbox",
   props: ["globalmap", "checkList", "checkNumber", "mergeSuccessRandom"],
@@ -111,7 +111,7 @@ export default {
     window.renyuan = this.renyuan;
   },
   mounted() {
-    this.initWebSocket();
+    window.addEventListener("onmessageWS", this.getSocketData);
   },
   methods: {
     deal() {
@@ -314,38 +314,15 @@ export default {
 
       _self.graphicWinodw.flyTo();
     },
-    //  // <span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);"  class="label-tag data-value-status-0" title="物资调度" >物资调度</span>
-    initWebSocket() {
+    getSocketData(res) {
       let _this = this;
-      if ("WebSocket" in window) {
-        // 打开一个 web socket
-        var ws = new WebSocket(WS_URL);
-        ws.onopen = function () {
-          //Web Socket 已连接上，使用 send() 方法发送数据
-          console.log("WEBSOCKET-ONLINE");
-        };
-        ws.onmessage = function (evt) {
-          if (!evt.data || evt.data == '发生数据') {
-            return false;
-          }
-          let obj = JSON.parse(evt.data);
-
-          if (obj.Module) {
-            if (obj.Module == "火情信息") {
-              _this.getList();
-              _this.$emit("getlistSocket");
-            }
-          }
-        };
-        ws.onclose = function () {
-          console.log("WEBSOCKET-CLOSED");
-        };
-      } else {
-        // 浏览器不支持 WebSocket
-        this.$message({
-          type: "warning",
-          message: "您的浏览器不支持 WebSocket!",
-        });
+      if (!isJson(res.detail.data)) return;
+      let obj = JSON.parse(evt.data);
+      if (obj.Module) {
+        if (obj.Module == "火情信息") {
+          _this.getList();
+          _this.$emit("getlistSocket");
+        }
       }
     },
   },