浏览器动态显示服务器日志信息集成工具实践

其他 2019-10-24 09:33:43 阅读次数: 0

这个任务可以完全只有一句命令行就搞定：

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

然而 实际上我们的系统是一个超级分布式的系统，单是内网测试环境涉及的服务器达到20+这个量级，于是单是找某一个服务器的地址也成了一个工作负担

我们运维采用了设置一个跳板机来处理这个事儿

登录跳板机——>SSH 登录到指定服务器

中间还得再输一次账号、密码,记服务器名称，记host也是个头疼的工作，这是我制作这样一个工具的原因之一

另外一点，Xshell 还是  WinSCP 都没法对日志信息为所欲为，我在测试调度功能时日志书写很快很快，看了一上午的调度日志，眼睛也痛了。痛定思痛，思前想后还得自己写个工具。

下面言归正传，说一说整体的实现：

1.后端部分

找到想要打印日志的服务器 ，在这个服务器上运行一个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返回的信息后，我可以对信息进行各种各样我们想要的操作，过滤无用信息，标注重要信息，可以说是进退自如、为所欲为
这里我还加入了关键字的高亮监控，需要高亮显示的信息保存在本里缓存里，关闭、刷新浏览器也不会清除到这个内容，这个功能在日志书写较快，而关键信息稍纵即逝的场景里非常实用

猜你喜欢

转载自www.cnblogs.com/laowang-tester/p/11720120.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022