1.0.1

package.json

@@ -13,7 +13,8 @@
     "ant-design-vue": "^3.2.13",
     "axios": "^1.1.3",
     "vue": "^3.2.41",
-    "vue-router": "4"
+    "vue-router": "4",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@types/node": "^18.11.9",

public/menu.json

@@ -6,6 +6,12 @@
       "title": "主页",
       "path": "/home"
     },
+    {
+      "key": "2",
+      "icon": "AppleOutlined",
+      "title": "系统日志",
+      "path": "/syslog"
+    },
     {
       "key": "2",
       "icon": "AppleOutlined",

src/router/index.ts

@@ -7,6 +7,7 @@ import Task from '/@/view/task/index.vue'
 import Login from '/@/view/login/login.vue'
 import Main from "/@/view/main.vue";
 import PingConfig from "/@/view/config/index.vue";
+import Syslog from "/@/view/syslog/index.vue";
 
 const routes: Array<RouteRecordRaw> = [
 
@@ -32,6 +33,11 @@ const routes: Array<RouteRecordRaw> = [
                 name: 'home',
                 component: Home
             },
+            {
+                path: '/syslog',
+                name: 'syslog',
+                component: Syslog
+            },
             {
                 path:'/node',
                 name: 'node',

src/view/node/index.vue

@@ -283,6 +283,7 @@ export default defineComponent({
         data.urlStatus = node_list.data.nodeList[dataKey].Node.urlStatus
         data.nodeMs = node_list.data.nodeList[dataKey].Node.nodeMs
         data.urlRet = node_list.data.nodeList[dataKey].Node.urlRet
+        data.urlCount = node_list.data.nodeList[dataKey].Node.urlCount
         data.isNotice = node_list.data.nodeList[dataKey].Node.isNotice
         if (node_list.data.nodeList[dataKey].NodeConfig != null)
         {

src/view/syslog/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div style="margin-top: 10px">
+    <a-textarea v-model:value="msg" :disabled="true"  style="height: 500px" />
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, onMounted, reactive, toRefs} from "vue";
+
+export default defineComponent({
+  setup(){
+
+    const status = reactive({
+      websocket : undefined,
+      msg: "",
+    })
+
+    const heartCheck = {
+      timeout: 360000, // 5分钟发一次心跳，比server端设置的连接时间稍微小一点，在接近断开的情况下以通信的方式去重置连接时间。
+      timeoutObj: null,
+      serverTimeoutObj: null,
+      reset: function () {
+        clearTimeout(this.timeoutObj)
+        clearTimeout(this.serverTimeoutObj)
+        return this
+      },
+      start: function () {
+        this.serverTimeoutObj = setInterval(function () {
+          if (status.websocket.readyState === 1) {
+            console.log('连接状态，发送消息保持连接')
+            status.websocket.send('{"e":"ping","d":""}}') // 连接成功将消息传给服务端
+            heartCheck.reset().start() // 如果获得消息 说明连接正常 重置心跳检测
+          } else {
+            console.log('断开连接， 尝试重连')
+            newWebsocket()
+          }
+        }, this.timeout)
+      }
+    }
+    const newWebsocket = ()=> {
+      status.websocket = new WebSocket("ws://api.163jsd.xyz/api/v1/ws/socket");
+      status.websocket.onopen = function() {
+        // webSocket 已连接上，使用 send() 方法发送数据
+        status.websocket.send("发送数据");
+        console.log("数据发送中...");
+      };
+
+      status.websocket.onmessage = function (evt) {
+        // 接收到的数据
+        let data = JSON.parse(evt.data)
+        if (data.e == "sys_log"){
+          status.msg = data.d["msg"];
+        } else if(data.e === "ping"){
+          status.msg = data.e;
+        } else if(data.e === "connected"){
+          status.msg = data.d["ID"];
+        }
+      };
+
+      status.websocket.onerror = function () {
+        // 连接报错
+        console.log('连接报错...');
+      }
+
+      status.websocket.onclose = function() {
+        // 关闭 webSocket
+        console.log("连接已关闭...");
+      };
+   
+    }
+
+    onMounted(()=>{
+      heartCheck.reset().start()
+      newWebsocket()
+    })
+
+    return {
+      ...toRefs(status)
+    }
+  }
+})
+
+
+</script>
+
+<style  scoped>
+
+</style>

src/websocket/storeInterface.ts

@@ -0,0 +1,4 @@
+export interface stateInt {
+    data: Object
+    webSocket: WebSocket
+}

src/websocket/websocket.ts

@@ -0,0 +1,61 @@
+
+import {stateInt} from "/@/websocket/storeInterface";
+import {createStore} from "vuex";
+
+
+const state: stateInt = {
+    //推送消息
+    data: {},
+    webSocket: null,
+}
+//api.163jsd.xyz
+
+export default createStore({
+    state,
+    mutations: {
+        //websocket初始化
+        initWebsocket(state) {
+            state.webSocket = new WebSocket(
+                // 此处填写你要连接的ws地址
+                'ws://api/api/v1/ws/socket'
+            )
+            //建立连接
+            state.webSocket.onopen = function () {
+                /*
+                 * 连接成功
+                 * */
+                console.log('通讯开始')
+                // 发送心跳防止ws协议自动断联
+                setInterval(() => {
+                    state.webSocket.send('1')
+                }, 1000 * 60)
+            }
+            //接收服务端消息
+            state.webSocket.onmessage = function (e) {
+                /*
+                 * 收到消息时回调函数
+                 * */
+                console.log('收到的数据：', e.data)
+                // 如果数据对象为字符串，可转换为对象格式
+                let data = JSON.parse(e.data)
+                state.data = e.data
+                console.log(data)
+            }
+            state.webSocket.onerror = function () {
+                /*
+                 * 通讯异常
+                 * */
+                console.log('通讯异常')
+            }
+            state.webSocket.close = function () {
+                /*
+                 * 关闭连接时回调函数
+                 * */
+                console.log('连接已断开')
+            }
+        },
+    },
+    actions: {
+    },
+    modules: {},
+})

vite.config.ts

@@ -38,6 +38,7 @@ export default defineConfig({
       '/api': {
         target: 'http://127.0.0.1:8080',	//实际请求地址
         changeOrigin: true,
+        ws: true,
         rewrite: (path) => path.replace(/^\/api/, '')
       },
     }