web实时打印服务器日志 | web实时日志 | 实时显示日志

本文链接：https://blog.csdn.net/weixin_36046517/article/details/120078469

引用: https://blog.csdn.net/m0_37962554/article/details/81978583

一.效果预览

20210902

二.用到的工具

WebSocketd: 服务端的命令行工具，本质上是命令行的WebSocket代理，只要在命令行可以执行的程序，都可以通过它与浏览器进行WebSocket通信。

官网地址: http://websocketd.com/
github地址：https://github.com/joewalnes/websocketd/

nc: NetCat, 一个简单、可靠的网络工具，可通过TCP或UDP协议传输读写数据

官网地址：http://netcat.sourceforge.net/
nc命令用法举例: https://www.cnblogs.com/nmap/p/6148306.html

三、实现思路

单机版

webSocketd 启动ws服务，并且搜集tail -f 命令输出的数据

客户端与服务端简历websocket通讯，实时显示 tail -f的内容

分布式

tail -f 命令，将文件的输出内容通过 nc命令写到ws所在的服务器

webSocketd 启动ws服务，并且搜集nc 传输过来的数据

客户端与服务端简历websocket通讯，实时显示 tail -f的内容

四.实现视频的步骤

下载websocketd工具

wget https://github.com/joewalnes/websocketd/releases/download/v0.3.0/websocketd-0.3.0-linux_amd64.zip

unzip websocketd-0.3.0-linux_amd64.zip

启动websocketd

注意: demo中用到的俩个端口口 8008

./websocketd  --port=8008 tail -f /tmp/test.log

创建log.html

修改29行为ws服务的ip

<!DOCTYPE html>
<html>
<head>
    <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: 13px; 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: left; margin: 4px 0 0 8px;
        }
        #log b{
            font-size: 26px;
        }
        #msgBtn{
            padding: 5px 10px; border: none; background: #777; float: right; margin: 0 16px 0 0;
        }
    </style>
</head>
<body>
    <div id="log"><span><b>实时日志</b></span><button id="msgBtn" type="button">清空</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>
        $(document).ready(function() {
            if (!window.WebSocket) {
                if (window.MozWebSocket) {
                    window.WebSocket = window.MozWebSocket;
                } else {
                    $('#msg').append("<p>你的浏览器不支持websocket</p>");
                }
            }
            var ws = new WebSocket('ws://8.136.111.26:8008/');
            ws.onopen = function(evt) {
                $('.list').append('<li>websocket连接成功</li>');
            }
            ws.onmessage = function(evt) {
                $('.list').append('<li>' + evt.data + '</li>');
                setTimeout(function(){$('#msg').scrollTop($('.list').height()-$('#msg').height());}, 100)
            }
            $("#msgBtn").click(function(){
                $(".list").html("");
            })
        });
    </script>
</body>
</html>

测试

在浏览器中打开日志浏览页面: http://{server-domain}/log.html

向 /tmp/test.log中写入内容，浏览器实时显示

echo "test123" >> /tmp/test.log

单机版完成

分布式开始

安装nc

yum install nmap-ncat

创建监听脚本

cat > cmd.sh <<'END'
#!/bin/bash
pkill -x nc
while :; do
    nc -nkl 10088
    sleep 1
done
END

chmod o+x cmd.sh

启动websocketd

此时端的目录结构

修改 websocketd启动命令

注意: demo中用到的俩个端口口 8008 和 10088要保证放行状态

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

应用服务器上执行命令，传输实时日志

tail -f /tmp/test.log | nc -n {websocket-server} 10088

测试

在浏览器中打开日志浏览页面: http://{server-domain}/log.html

应用服务器上向 /tmp/test.log中写入内容，浏览器实时显示

echo $(date "+%Y-%m-%d %H:%M:%S") | nc -n {websocket-server} 10088

关闭实时日志

pkill -x nc