前端增加websocket推送，

Wenbo/WEB监控前端接口20240303.doc

@@ -19,12 +19,28 @@
        "systemLanguage": "系统语言",
        “1：中文;2：英文；3：俄语；4：意大利语。”
            " webSocket ": "ws://127.0.0.1:8089/websocket/ "
-       websocket格式：地址只需要修改ip和端口
+       系统返回的websocketurl格式：地址只需要修改ip和端口
        }
 
 
+    Websocket 推送数据返回格式：
+    {
+        "data": [         //data数据内容以数组的形式返回
+            {
 
 
+            }
+        ],
+        "message": "提示信息",
+        "socketIdx": "PDU-WebSocket",     //websocketid用于交互使用
+        "success": true,
+        "type": "overallStatusMonitoring"
+//“type：overallStatusMonitoring/ channelStatusMonitoring/
+sensorStatusMonitoring   总体状态监控/通道状态监控/传感器状态监控
+暂时只做此三个类型的socket实时推送”
+    }
+    [pic]
+    [pic]
      • 通过IP访问PDU内部web服务，界面提供登录用户名、密码输入及登录按钮；
        登录接口：  login
        参数：{"username":"admin","password":"admin123","uuid":"549b62b486dd4

Wenbo/web/src/layout/components/Navbar.vue

@@ -44,13 +44,14 @@ import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
 import RuoYiGit from '@/components/RuoYi/Git'
 import RuoYiDoc from '@/components/RuoYi/Doc'
-
+import WebsocketHeartbeatJs from '@/utils/WebsocketJs.js'
+import { systemConfiguration } from "@/api/pdu/pduServer";
 export default {
   data() {
     return {
       logoName: "",
-      dateTime:""
-
+      dateTime:"",
+      websocketHeartbeatJs: undefined, // websocket实例 -- 业务相关
     }
   },
   components: {
@@ -64,6 +65,7 @@ export default {
     RuoYiDoc
   },
   created() {
+    this.systemConfiguration();
     this.logoName= this.$store.state.user.logoName;
   this.dataRefreh()
   },
@@ -93,6 +95,95 @@ export default {
 
   },
   methods: {
+    // 获取系统配置
+    systemConfiguration(){
+        systemConfiguration({}).then(response => {
+          if(response.data!=null && response.data.webSocket!=null && response.data.webSocket!=''){
+            var data=response.data;
+            var webSocket=data.webSocket;
+
+            this.initWebsocket(webSocket);
+          }
+
+        });
+    },
+    // 判断字符串是否为json字符串
+    isJSON(str) {
+      if (typeof str == 'string') {
+        try {
+          var obj = JSON.parse(str)
+          if (typeof obj == 'object' && obj) {
+            return true
+          } else {
+            return false
+          }
+        } catch (e) {
+          return false
+        }
+      }
+      console.log('It is not a string!')
+    },
+// 初始化websocket
+    initWebsocket(url) {
+      let that = this
+      // let params = that.remoteAddrOperatornameBorse();
+      that.websocketHeartbeatJs = new WebsocketHeartbeatJs({
+        url: url + 'PDU-WebSocket',
+        pingTimeout: 30000,
+        pongTimeout: 20000,
+        reconnectTimeout: 2000,
+        pingMsg: 'heartbeat',
+        disableHeartbeat: true,
+      })
+
+      // Connection opened
+      that.websocketHeartbeatJs.onopen = function () {
+        that.websocketHeartbeatJs.send('first send message: hello server')
+        // console.log('websocket初始化成功！！并发送了消息first send message: hello server')
+      }
+
+      // 监听服务端的消息
+      that.websocketHeartbeatJs.onmessage = function (e) {
+        // 后台告知前端关闭websocket连接
+        if (e.type == 'close') that.websocketHeartbeatJs.close()
+
+        let result = e.data
+        let isJsonStr = that.isJSON(result) // 判断该字符串是否为json字符串
+        if (isJsonStr) {
+          result = JSON.parse(result)
+        } else {
+          return false
+        }
+        //总体状态监控推送
+        if (result.type === 'overallStatusMonitoring') {
+          //if (result.success) that.$bus.$emit('ATTENDANCE_ANALYSE', result)
+          if (result.success) that.$bus.$emit('OVERALL_STATUS_MONITORING', result)
+          return false
+        }
+
+        //通道状态监控
+        if (result.type === 'channelStatusMonitoring') {
+          that.$bus.$emit('CHANNEL_STATUS_MONITORING', result)
+          return false
+        }
+
+        //传感器状态监控
+        if (result.type === 'sensorStatusMonitoring') {
+          that.$bus.$emit('SENSOR_STATUS_MONITORING', result)
+          return false
+        }
+
+
+      }
+
+      // websocket重连
+      that.websocketHeartbeatJs.onreconnect = function () {
+        // eslint-disable-next-line no-console
+        console.log('WebsocketForBusinessData reconnecting...')
+        // eslint-disable-next-line no-console
+        console.log('tips: if you network closing, please open network, reconnect will success')
+      }
+    },
     dataRefreh(){
       // 计时器为空，操作
       setInterval(() => {
@@ -117,11 +208,14 @@ export default {
         type: 'warning'
       }).then(() => {
         this.$store.dispatch('LogOut').then(() => {
+          this.websocketHeartbeatJs && this.websocketHeartbeatJs.close() //关闭websocket连接
           location.href = '/index';
         })
+
       }).catch(() => {});
     }
-  }
+  },
+
 }
 </script>
 

Wenbo/web/src/main.js

@@ -50,7 +50,8 @@ Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
-
+// 挂载事件总线
+Vue.prototype.$bus = new Vue()
 // 全局组件挂载
 Vue.component('DictTag', DictTag)
 Vue.component('Pagination', Pagination)

Wenbo/web/src/views/index.vue

@@ -242,12 +242,36 @@
 
       };
     },
+    mounted() {
+      //监听websocket消息
+      this.$bus.$on('OVERALL_STATUS_MONITORING', this.onSocketMessageToOverall);
+      this.$bus.$on('CHANNEL_STATUS_MONITORING', this.onSocketMessageToChannel);
+      this.$bus.$on('SENSOR_STATUS_MONITORING', this.onSocketMessageToSensor);
+    },
     created() {
       this.usertoken= this.$store.state.user.usertoken;
-     this.dataRefreh();
+     //this.dataRefreh();
+      this.queryInfo(); // 设备信息
     },
     methods: {
-
+      //推送总体状态
+      onSocketMessageToOverall(recvMessage) {
+        if (recvMessage.success) {
+          this.queryTotalStatus();
+        }
+      },
+      //推送通道状态
+      onSocketMessageToChannel(recvMessage) {
+        if (recvMessage.success) {
+          this.queryChannelStatus();
+        }
+      },
+      //推送传感器状态
+      onSocketMessageToSensor(recvMessage) {
+        if (recvMessage.success) {
+          this.querySensorStatusMonitoring();
+        }
+      },
       //格式化培训形式
       getDity(row,type) {
         var name="";
@@ -281,7 +305,6 @@
       dataRefreh(){
         // 计时器为空，操作
         setInterval(() => {
-          this.queryInfo(); // 设备信息
         this.queryTotalStatus(); // 总状态
         this.queryChannelStatus(); // 通道状态
         this.querySensorStatusMonitoring(); //传感器

Wenbo/web/src/views/power/channelstatus/index.vue

@@ -139,12 +139,23 @@
         productChStatuss:[{"id":"0","name":"duank"},{"id":"1","name":"jt"}],
       };
     },
+    mounted() {
+      //监听websocket消息
+
+      this.$bus.$on('CHANNEL_STATUS_MONITORING', this.onSocketMessageToChannel);
+    },
     created() {
       this.usertoken= this.$store.state.user.usertoken;
-      this.dataRefreh();
-
+     // this.dataRefreh();
+      this.handleQuery();
     },
     methods: {
+      //推送通道状态
+      onSocketMessageToChannel(recvMessage) {
+        if (recvMessage.success) {
+          this.handleQuery();
+        }
+      },
       //格式化培训形式
       getDity(row,type) {
         var name="";

Wenbo/web/src/views/power/monitorall/index.vue

@@ -161,11 +161,22 @@
         },
       };
     },
+    mounted() {
+      //监听websocket消息
+      this.$bus.$on('OVERALL_STATUS_MONITORING', this.onSocketMessageToOverall);
+    },
     created() {
       this.usertoken= this.$store.state.user.usertoken;
-     this.dataRefreh();
+     //this.dataRefreh();
+      this.queryTotalStatus();
     },
     methods: {
+      //推送总体状态
+      onSocketMessageToOverall(recvMessage) {
+        if (recvMessage.success) {
+          this.queryTotalStatus();
+        }
+      },
       dataRefreh(){
         // 计时器为空，操作
         setInterval(() => {

Wenbo/web/src/views/sensor/sensorStatus/index.vue

@@ -217,10 +217,20 @@
         sensorStatusALLList:[]
       };
     },
+    mounted() {
+      //监听websocket消息
+      this.$bus.$on('SENSOR_STATUS_MONITORING', this.onSocketMessageToSensor);
+    },
     created() {
       this.querySensorStatusMonitoring(); //传感器
     },
     methods: {
+      //推送传感器状态
+      onSocketMessageToSensor(recvMessage) {
+        if (recvMessage.success) {
+          this.querySensorStatusMonitoring();
+        }
+      },
       //格式化培训形式
       getDity(row,type) {
         var name="";