reghao
/
devops


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
							<!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">
<div class="layui-card">
    <div class="layui-card-header">
        <span><i class="fa fa-table"></i> 系统实时日志</span>
        <span id="ws-status" style="background: red">离线</span>
    </div>
    <div class="layui-card-body" style="background: black">
        <ul id="applog" class="flow-default layui-timeline" style="height: 500px;overflow: auto">
            <!--<li id="li2">
                <div class="layui-text">
                    <p>
                        1. 更新：重命名菜单类型为：目录、菜单、按钮<2. 更新：重写Shiro“记住我”系列化数据，减少cookie体积3. 新增：获取用户角色列表方法4. 修复：获取部门数据时延迟加载超时问题 5. 修复：将jq版本改为2.2.4，解决layui弹出窗口最大化问题 6. 新增：项目配置项，可直接通过yml文件配置Shiro和XSS防护忽略规则 7. 新增：ResultExceptionError和ResultExceptionSuccess异常类 8. 修复：若干页面显示问题，优化加载时提示<br>
                    </p>
                </div>
            </li>-->
        </ul>
    </div>
</div>
</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: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-manager'
            var host = 'devops.reghao.cn'
            var params = 'token=' + token + '&app=' + app + '&host=' + host;
            var url = "wss://devops.reghao.cn/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>