|
|
@@ -1,8 +1,6 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
|
|
|
- <link rel="stylesheet" th:href="@{/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
|
|
|
- <link rel="stylesheet" th:href="@{/css/xterm.css}"/>
|
|
|
</head>
|
|
|
|
|
|
<body class="timo-layout-page">
|
|
|
@@ -19,117 +17,8 @@
|
|
|
</body>
|
|
|
<script th:replace="/common/template :: script"></script>
|
|
|
<script type="text/javascript" th:src="@{/js/plugins/jquery-3.4.1.min.js}"></script>
|
|
|
+<script type="text/javascript" th:src="@{/js/wsclient.js}"></script>
|
|
|
<script type="text/javascript" th:inline="javascript">
|
|
|
- function add(text) {
|
|
|
- var p = document.createElement("p");
|
|
|
- p.innerHTML = text + '<br>'
|
|
|
-
|
|
|
- var div = document.createElement("div");
|
|
|
- div.className = 'layui-text'
|
|
|
- div.appendChild(p)
|
|
|
-
|
|
|
- var li = document.createElement("li");
|
|
|
- li.appendChild(div)
|
|
|
-
|
|
|
- var ul = document.getElementById("applog");
|
|
|
- //ul.prepend(li);
|
|
|
- ul.appendChild(li);
|
|
|
- }
|
|
|
-
|
|
|
- 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'
|
|
|
- var app = 'devops-mgr'
|
|
|
- var host = 'localhost'
|
|
|
- var params = 'token=' + token + '&app=' + app + '&host=' + host;
|
|
|
-
|
|
|
- let protocol = location.protocol
|
|
|
- let hostname = location.hostname
|
|
|
- let port = location.port
|
|
|
- let prefix;
|
|
|
- if (protocol === 'https') {
|
|
|
- if (port === 443) {
|
|
|
- prefix = 'wss://' + hostname;
|
|
|
- } else {
|
|
|
- prefix = 'wss://' + hostname + ':' + port;
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (port === 80) {
|
|
|
- prefix = 'ws://' + hostname;
|
|
|
- } else {
|
|
|
- prefix = 'ws://' + hostname + ':' + port;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- var url = prefix + '/ws/log/pull?' + params
|
|
|
- ws = new WebSocket(url);
|
|
|
- ws.onopen = function() {
|
|
|
- connected = true
|
|
|
- setOnline()
|
|
|
- // Web Socket 已连接上，使用 send() 方法发送数据
|
|
|
- console.log("websocket connected...");
|
|
|
- };
|
|
|
- ws.onclose = function() {
|
|
|
- connected = false
|
|
|
- setOffline()
|
|
|
- console.log("websocket connection closed...");
|
|
|
- reconnect()
|
|
|
- };
|
|
|
- ws.onerror = function () {
|
|
|
- connected = false
|
|
|
- setOffline()
|
|
|
- console.log("websocket connection error...");
|
|
|
- reconnect()
|
|
|
- };
|
|
|
- ws.onmessage = function (evt) {
|
|
|
- var payload = JSON.parse(evt.data)
|
|
|
- var app = '<span style="color: yellowgreen">' + payload.app + '</span>'
|
|
|
- var concat = '<span style="color: red">' + '@' + '</span>'
|
|
|
- var host = '<span style="color: yellowgreen">' + payload.host + ' ' + '</span>'
|
|
|
- var timestamp = payload.dateTimeStr
|
|
|
- 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 + concat + host + ' ' + timestamp + ' ' + thread + ' ' + level + ' ' + logger + ' ' + message + '<br>'
|
|
|
- add(text)
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 浏览器不支持 WebSocket
|
|
|
- alert("您的浏览器不支持 WebSocket!");
|
|
|
- }
|
|
|
- }
|
|
|
- function reconnect() {
|
|
|
- if (connected) return
|
|
|
-
|
|
|
- setTimeout(function () {
|
|
|
- console.log('websocket reconnecting...')
|
|
|
- initWebSocket()
|
|
|
- }, 5000)
|
|
|
- }
|
|
|
initWebSocket()
|
|
|
</script>
|
|
|
</html>
|
