use ReconnectingWebSocket

nginx-ui-frontend/package.json

@@ -12,6 +12,7 @@
         "axios": "^0.21.1",
         "chart.js": "^2.9.4",
         "core-js": "^3.9.0",
+        "reconnecting-websocket": "^4.4.0",
         "vue": "^2.6.11",
         "vue-chartjs": "^3.5.1",
         "vue-itextarea": "^1.0.9",

nginx-ui-frontend/src/lib/http/index.js

@@ -35,8 +35,13 @@ http.interceptors.response.use(
         return Promise.resolve(response.data)
     },
     async error => {
-        if (error.response.status === 403) {
-            await store.dispatch('logout')
+        switch (error.response.status) {
+            case 401:
+            case 403:
+                // 无权访问时，直接登出
+                await store.dispatch('logout')
+                location.reload()
+                break
         }
         return Promise.reject(error.response.data)
     }

nginx-ui-frontend/src/views/DashBoard.vue

@@ -43,6 +43,7 @@
 
 <script>
 import LineChart from "@/components/Chart/LineChart"
+import ReconnectingWebSocket from 'reconnecting-websocket'
 
 export default {
     name: "DashBoard",
@@ -111,11 +112,10 @@ export default {
         }
     },
     created() {
-        this.websocket = new WebSocket(this.getWebSocketRoot() + "/analytic?token="
+        this.websocket = new ReconnectingWebSocket(this.getWebSocketRoot() + "/analytic?token="
             + btoa(this.$store.state.user.token))
         this.websocket.onmessage = this.wsOnMessage
         this.websocket.onopen = this.wsOpen
-        this.websocket.onerror = this.wsOnError
     },
     destroyed() {
         window.clearInterval(window.InitSetInterval)
@@ -125,18 +125,13 @@ export default {
         wsOpen() {
             window.InitSetInterval = setInterval(() => {
                 this.websocket.send("ping")
-            }, 1000)
-        },
-        wsOnError() {
-            this.websocket = new WebSocket(this.getWebSocketRoot() + "/analytic?token="
-                + btoa(this.$store.state.user.token))
+            }, 2000)
         },
         wsOnMessage(m) {
             const r = JSON.parse(m.data)
-            console.log(r)
+            // console.log(r)
             this.cpu = r.cpu_system + r.cpu_user
             const time = new Date()
-            //this.cpu_analytic.labels.push(time)
             this.cpu_analytic.datasets[0].data
                 .push({x: time, y: r.cpu_user})
             this.cpu_analytic.datasets[1].data

nginx-ui-frontend/version.json

@@ -1 +1 @@
-{"version":"0.1.0","build_id":22}
+{"version":"0.1.0","build_id":25}

nginx-ui-frontend/yarn.lock

@@ -7073,6 +7073,11 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+reconnecting-websocket@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/reconnecting-websocket/-/reconnecting-websocket-4.4.0.tgz#3b0e5b96ef119e78a03135865b8bb0af1b948783"
+  integrity sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng==
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.npm.taobao.org/regenerate-unicode-properties/download/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"