websocket auto reconnect

manager/src/main/resources/templates/app/stat/log.html

@@ -77,7 +77,20 @@
         //ul.appendChild(li);
     }
 
-    var ws;
+    function setOnline() {
+        var span = document.getElementById("ws-status")
+        span.style = "background: green"
+        span.innerHTML = '在线'
+    }
+
+    function setOffline() {
+        var span = document.getElementById("ws-status")
+        span.style = "background: red"
+        span.innerHTML = '离线'
+    }
+
+    var connected = false
+    var ws
     function initWebSocket() {
         if ("WebSocket" in window) {
             var token = '0123456789'
@@ -87,57 +100,43 @@
             var url = "wss://devops.reghao.cn/ws/log/pull?" + params
             ws = new WebSocket(url);
             ws.onopen = function() {
-                // Web Socket 已连接上，使用 send() 方法发送数据
-                console.log("连接已建立...");
+                connected = true
                 setOnline()
+                // Web Socket 已连接上，使用 send() 方法发送数据
+                console.log("websocket connected...");
             };
             ws.onclose = function() {
-                console.log("连接已关闭...");
+                connected = false
                 setOffline()
+                console.log("websocket connection closed...");
+                reconnect()
             };
             ws.onerror = function () {
-                console.log("连接错误...");
+                connected = false
                 setOffline()
+                console.log("websocket connection error...");
+                reconnect()
             };
             ws.onmessage = function (evt) {
-                console.log('on message')
-                var payload = JSON.parse(evt.data)
-                var app = '<span style="color: yellowgreen">' +  payload.app + ' ' + '</span>'
-                var host = '<span style="color: green">' +  payload.host + ' ' + '</span>'
-                var timestamp = payload.timestamp
-                var thread = payload.thread
-                var level
-                if (payload.level === 'INFO') {
-                    level = '<span style="color: green">' +  payload.level + ' ' + '</span>'
-                } else if (payload.level === 'ERROR') {
-                    level = '<span style="color: red">' +  payload.level + ' ' + '</span>'
-                } else {
-                    level = '<span style="color: yellow">' +  payload.level + ' ' + '</span>'
-                }
-
-                var logger = '<span style="color: wheat">' +  payload.logger + ' ' + '</span>'
-                var message = '<span style="color: white">' +  payload.message + ' ' + '</span>'
-
-                var text = app + ' ' +  host + ' ' + timestamp + ' ' + thread + ' ' + level + ' ' + logger + ' ' + message
-                add(text)
+                var event = JSON.parse(evt.data)
+                var eventType = event.event
+                var title = new Date().getTime()
+                add1(title, event.payload)
+                //document.getElementById("myTextarea").value = evt.data
             }
         } else {
             // 浏览器不支持 WebSocket
             alert("您的浏览器不支持 WebSocket!");
         }
     }
-    initWebSocket()
-
-    function setOnline() {
-        var span = document.getElementById("ws-status")
-        span.style = "background: green"
-        span.innerHTML = '在线'
-    }
+    function reconnect() {
+        if (connected) return
 
-    function setOffline() {
-        var span = document.getElementById("ws-status")
-        span.style = "background: red"
-        span.innerHTML = '离线'
+        setTimeout(function () {
+            console.log('websocket reconnecting...')
+            initWebSocket()
+        }, 5000)
     }
+    initWebSocket()
 </script>
 </html>

manager/src/main/resources/templates/home/index.html

@@ -211,19 +211,26 @@
         ul.prepend(li);
     }
 
-    var ws;
+    var connected = false
+    var ws
     function initWebSocket() {
         if ("WebSocket" in window) {
-            ws = new WebSocket("wss://devops.reghao.cn/ws/message");
+            var url = "wss://devops.reghao.cn/ws/message"
+            ws = new WebSocket(url);
             ws.onopen = function() {
+                connected = true
                 // Web Socket 已连接上，使用 send() 方法发送数据
-                console.log("连接已建立...");
+                console.log("websocket connected...");
             };
             ws.onclose = function() {
-                console.log("连接已关闭...");
+                connected = false
+                console.log("websocket connection closed...");
+                reconnect()
             };
             ws.onerror = function () {
-                console.log("连接错误...");
+                connected = false
+                console.log("websocket connection error...");
+                //reconnect()
             };
             ws.onmessage = function (evt) {
                 var event = JSON.parse(evt.data)
@@ -237,6 +244,14 @@
             alert("您的浏览器不支持 WebSocket!");
         }
     }
+    function reconnect() {
+        if (connected) return
+
+        setTimeout(function () {
+            console.log('websocket reconnecting...')
+            initWebSocket()
+        }, 5000)
+    }
     initWebSocket()
 </script>
 </body>