瀏覽器動態顯示服務器日誌信息集成工具實踐

時間 2019-11-11

原文原文鏈接

這個任務能夠徹底只有一句命令行就搞定：css

tail -f -n 500 /smapp/servers/tomcat/apache-tomcat-7.0.72/logs/catalina.out

然而實際上咱們的系統是一個超級分佈式的系統，單是內網測試環境涉及的服務器達到20+這個量級，因而單是找某一個服務器的地址也成了一個工做負擔html

咱們運維採用了設置一個跳板機來處理這個事兒前端

登陸跳板機——>SSH 登陸到指定服務器jquery

中間還得再輸一次帳號、密碼,記服務器名稱，記host也是個頭疼的工做，這是我製做這樣一個工具的緣由之一nginx

另一點，Xshell 仍是 WinSCP 都無法對日誌信息隨心所欲，我在測試調度功能時日誌書寫很快很快，看了一上午的調度日誌，眼睛也痛了。痛定思痛，思前想後還得本身寫個工具。web

下面言歸正傳，說一說總體的實現：shell

1.後端部分apache

找到想要打印日誌的服務器，在這個服務器上運行一個websocket進程供前端請求，而這個websocket執行服務器上的一個shell腳本，這個腳本打印我想要的日誌後端

下載一個websocketd 程序到 /usr/local/websocketd 目錄，這個程序不須要編譯，能夠直接運行瀏覽器

建立一個cmd.sh 這個腳本完成打印咱們想要日誌的工做

#!/bin/bash
while :; do
     tail -f -n200 /smapp/servers/tomcat/apache-tomcat-7.0.72/logs/catalina.out 
done

命令行運做：

./websocketd --port=8008 --staticdir=. ./cmd.sh

這個時候輸出的就是打印日誌的內容，這裏須要注意端口不要與其餘進程衝突了

ctrl+C 退出後進程就會結束，可是實際上咱們想要這個進程一直一直在運行，全部須要優化下命令行

nohup ./websocketd --port=8008 --staticdir=. ./cmd.sh &

運行後再也不打印輸出，咱們能夠退出服務器鏈接，這個進程將會在後臺一直跑

2.前端部分

首先得有臺網頁服務器放咱們的導航頁面，我找了內網151這臺機，找到 /usr/local/nginx/conf 下面的 nginx.conf

添加一個 location

       location /download {
           autoindex on;
           alias   /var/www/html/download/;
           index  index.html index.htm;
}

把導航頁放在

/var/www/html/download/  這個路徑下

導航頁簡陋一點，就是一些超連接，頁面以下

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"/>
        <title>日誌中心</title>
        <style type="text/css">
        .table1{
            width:100%;
            border-bottom:1px;
            background:#f3f3f3 ;
            text-align:center;
        }

        </style>
    </head>
    <body>
        <div id="test">
            <hr>
            <p style=" text-align:center;">測試環境專車日誌</p>
            <hr>
                <table class="table1" cellspacing="1" cellpadding="4" border="1">
                <tr>
                    <th>乘客端</th>
                    <th>司機端</th>
                    <th>調度</th>
                    <th>訂單</th>
                    <th>用戶中心</th>
                    <th>管理系統</th>
                </tr>
                <tr>
                    <th><a href="http://192.168.3.151:9000/download/log/log_PassengerProvider.html" target="_blank">provider</a></th>
                    <th><a href="http://192.168.3.151:9000/download/log/log_driverProvider.html" target="_blank">provider</a></th>
                    <th><a href="http://192.168.3.151:9000/download/log/log_dispatch.html" target="_blank">provider</a></th>
                    <th><a href="http://192.168.3.151:9000/download/log/log_orderProvider.html" target="_blank">provider</a></th>
                    <th><a href="http://192.168.3.151:9000/download/log/log_UserCenterProvider.html" target="_blank">provider</a></th>
                    <th></th>
                </tr>
                <tr>
                        <th><a href="http://192.168.3.151:9000/download/log/log_gwPassenger.html" target="_blank">gw</a></th>
                        <th><a href="http://192.168.3.151:9000/download/log/log_gwDriver.html" target="_blank">gw</a>   <a href="http://192.168.3.151:9000/download/log/log_code_driver.html" target="_blank">驗證碼</a></th>
                        <th><a href="http://192.168.3.151:9000/download/log/visual_dispath.html" target="_blank">調度可視化</a></th>
                        <th></th>
                        <th><a href="http://192.168.3.151:9000/download/log/log_code.html" target="_blank">驗證碼</a></th>
                        <th></th>
                </tr>
                </table>

        </div>
        <hr>
        <div id = "taxi">
            <p style=" text-align:center;">測試環境出租車日誌</p>
            <hr>
            <table class="table1" cellspacing="1" cellpadding="4" border="1">
                <tr>
                    <th>乘客端</th>
                    <th>司機端</th>
                    <th>調度</th>
                    <th>訂單</th>
                    <th>中控</th>
                    <th>管理系統</th>
                </tr>
                <tr>
                    <th><a href="http://192.168.3.151:9000/download/log/taxi_log_PassengerProvider.html" target="_blank">provider</a></th>
                    <th><a href="http://192.168.3.151:9000/download/log/taxi_log_driverProvider.html" target="_blank">provider</a></th>
                    <th><a href="http://192.168.3.151:9000/download/log/taxi_log_dispatch.html" target="_blank">provider</a></th>
                    <th><a href="http://192.168.3.151:9000/download/log/taxi_log_orderProvider.html" target="_blank">provider</a></th>
                    <th><a href="http://192.168.3.151:9000/download/log/taxi_log_centorcontrolprovider.html" target="_blank">provider</a></th>
                    <th></th>
                </tr>
                <tr>
                        <th><a href="http://192.168.3.151:9000/download/log/taxi_log_gwPassenger.html" target="_blank">gw</a></th>
                        <th><a href="http://192.168.3.151:9000/download/log/taxi_log_gwDriver.html" target="_blank">gw</a></th>
                        <th><a href="http://192.168.3.151:9000/download/log/visual_taxi_dispath.html" target="_blank">調度可視化</a></th>
                        <th></th>
                        <th><a href="http://192.168.3.151:9000/download/log/taxi_log_centorcontrolgw.html" target="_blank">gw</a></th>
                        <th></th>
                </tr>
                </table>
        </div>
    <hr>
    <div id = "Pre-release">
        <p style=" text-align:center;">預發佈專車日誌</p>
        <hr>
        <table class="table1" cellspacing="1" cellpadding="4" border="1">
            <tr>
                <th>乘客端</th>
                <th>司機端</th>
                <th>調度</th>
                <th>訂單</th>
                <th>用戶中心</th>
                <th>管理系統</th>
            </tr>
            <tr>
                <th><a href="http://192.168.3.151:9000/download/log/pre-log_PassengerProvider.html" target="_blank">provider</a></th>
                <th><a href="http://192.168.3.151:9000/download/log/pre-log_driverProvider.html" target="_blank">provider</a></th>
                <th><a href="http://192.168.3.151:9000/download/log/pre-log_dispatch.html" target="_blank">provider</a></th>
                <th><a href="http://192.168.3.151:9000/download/log/pre-log_orderProvider.html" target="_blank">provider</a></th>
                <th><a href="http://192.168.3.151:9000/download/log/pre-log_UserCenterProvider.html" target="_blank">provider</a></th>
                <th></th>
            </tr>
            <tr>
                    <th><a href="http://192.168.3.151:9000/download/log/pre-log_gwPassenger.html" target="_blank">gw</a></th>
                    <th><a href="http://192.168.3.151:9000/download/log/pre-log_gwDriver.html" target="_blank">gw</a>   <a href="http://192.168.3.151:9000/download/log/pre-log_code_driver.html" target="_blank">驗證碼</a></th>
                    <th></th>
                    <th></th>
                    <th><a href="http://192.168.3.151:9000/download/log/pre-log_code.html" target="_blank">驗證碼</a></th>
                    <th></th>
            </tr>
            </table>
    </div>
    <hr>
    <p style=" text-align:right;">技術支持請聯繫：老王</p>
    <p style=" text-align:right;">QQ:316707959</p>
    </body>
</html>

實際頁面效果

每個超連接對應着一個html頁面，這個html頁面讀取websocket的輸出信息而且顯示在網頁上，代碼以下

<!DOCTYPE html>
<html>
<head>
<title>dispatch-provider實時日誌</title>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"/>
    <style>
        body{
            background-color: #0e1012;color: #ffffff;
        }
        *{
            margin: 0; padding: 0;
        }
        #msg{
            overflow:auto; border:2px solid #303030; color:#ffffff; background-color: #2b2b2b; font-size: 15px; position: absolute; left: 8px; right: 8px; bottom: 8px; top: 40px; word-break:
break-all;
        }
        #log{
            position: fixed; top: 0; left: 0; width: 100%; height: 40px; text-align: center; margin: 4px 0 0 8px;
        }
        #log b{
            font-size: 26px;
        }
        .msgBtn1{
            padding: 5px 10px; border: none; background: red; float: right; margin: 0 16px 0 0;
        }
    </style>
</head>
<body>
    <div id="log"><span><b>測試環境dispatch-provider實時日誌</b></span>
        <button id="msgBtn" class="msgBtn1" type="button" >清空</button>
        <button id="msgBtn_pause" class="msgBtn1" type="button" onclick="msgBtn_pause_click()">暫停</button>
        <button id="startBtn" class="msgBtn1" type="button" 
        style="float: left" onclick="start_click()" >啓動</button>
        <button id="shutdownBtn" class="msgBtn1" type="button" 
        style="float: left" onclick="shutdown_click()" >關閉</button>
        <button id="msgBtn_check_y" class="msgBtn1"
         style="background:yellow;color:red" type="button" onclick="msgBtn_check_y_click()">高亮監控:黃</button>
        <button id="msgBtn_check_b" class="msgBtn1"
         style="background: blue;color:white" type="button" onclick="msgBtn_check_b_click()">高亮監控:藍</button>
    </div>
    <div id="msg">
        <ul class="list"></ul>
    </div>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>           
     var sw = 0; 
     var check_str_y =  localStorage.y;
     var check_str_back_y =null;
     var check_str_b = localStorage.b;
     var check_str_back_b =null;
     var but_pause = document.getElementById("msgBtn_pause");
        $(document).ready(function() {

            if (!window.WebSocket) {
                if (window.MozWebSocket) {
                    window.WebSocket = window.MozWebSocket;
                } else {
                    $('#msg').append("<p>你的瀏覽器不支持websocket</p>");
                }
            }
            var ws = new WebSocket('ws://10.28.17.190:8008/websocket/');
            ws.onopen = function(evt) {
                $('.list').append('<li>鏈接成功,開始讀取日誌內容</li>');
            }
            ws.onmessage = function(evt) {
				if(evt.data.indexOf("ERROR") != -1 || evt.data.indexOf("Exception") != -1)
                {
                    $('.list').append('<li style="color: yellow;background-color:red;font-size: 18px ">' + evt.data + '</li>');
                }
                else
                {
				if(evt.data.indexOf("at") != 1)
					{
                        if(evt.data.indexOf(check_str_y) != -1||evt.data.indexOf(check_str_b) != -1)
                        {
                            if(evt.data.indexOf(check_str_y) != -1)
                                {
                                $('.list').append('<li style="color: red;background-color:yellow;font-size: 18px ">' + evt.data + '</li>');
                                }
                            if(evt.data.indexOf(check_str_b) != -1)
                                {
                                    $('.list').append('<li style="color: white;background-color:blue;font-size: 18px ">' + evt.data + '</li>');
                                }
                        }
                        else
                        {
                            $('.list').append('<li>' + evt.data + '</li>');
                        }
					}
                }
                if(sw==0)
                {
                setTimeout(function(){
                    $('#msg').scrollTop($('.list').height()-$('#msg').height());
                }, 
                100)
                }
            }
            $("#msgBtn").click(function(){
                $(".list").html("");
            })
           
        });
        function msgBtn_pause_click(){
            if(but_pause.innerText =="暫停")
            {
                but_pause.innerText ="繼續";
                but_pause.style = "background:green";
                sw = 1;
            }
            else
            {
                but_pause.innerText ="暫停";
                but_pause.style = "background:red";
                sw = 0;
            }
           }
           function msgBtn_check_b_click(){
               check_str_back_b =check_str_b;
               check_str_b = prompt("請輸入須要高亮顯示的文本行關鍵字：",check_str_b);
               if(check_str_b == null)
               {
                check_str_b = check_str_back_b;
               }
                localStorage.setItem('b',check_str_b);
           }
           function msgBtn_check_y_click(){
               check_str_back_y =check_str_y;
               check_str_y = prompt("請輸入須要高亮顯示的文本行關鍵字：",check_str_y);
               if(check_str_y == null)
               {
                check_str_y = check_str_back_y;
               } 
               localStorage.setItem('y',check_str_y);
           } 
           function start_click(){
            var ws2 = new WebSocket('ws://10.28.17.190:8019/websocket/');
           }
           function shutdown_click(){
            var ws3 = new WebSocket('ws://10.28.17.190:8029/websocket/');
           }         
    </script>
</body>
</html>

　　實際效果以下：

在讀取到websocket返回的信息後，我能夠對信息進行各類各樣咱們想要的操做，過濾無用信息，標註重要信息，能夠說是進退自如、隨心所欲這裏我還加入了關鍵字的高亮監控，須要高亮顯示的信息保存在本里緩存裏，關閉、刷新瀏覽器也不會清除到這個內容，這個功能在日誌書寫較快，而關鍵信息稍縱即逝的場景裏很是實用