TailForPHP
/
index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>CatchU-tail</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        textarea.form-control {
            height: 30rem;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="input-group">
                <span class="input-group-addon">文件路径</span>
                <input type="text" id="inputFilePath" class="form-control" placeholder="文件路径" aria-describedby="sizing-addon2">
            </div>
        </div>
        <div class="col-xs-6">
            <button type="button" id="listenButton" class="btn btn-success">
                开始监听
            </button>
        </div>
    </div>
    <h6>Console</h6>
    <textarea class="form-control" id="console"></textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function () {
        var $console = $("#console");
        var $listenButton = $("#listenButton");
        var $inputFilePath = $("#inputFilePath");
        // 监听状态
        var listenType = false;
        // 滚动条是否跟随日志滚动
        var autoScroll = true;
        // 文件地址
        var filePath = $inputFilePath.val();
        // 文件指针位置
        var offset = 0;

        $.stopListen = function () {
            listenType = !listenType;
            $listenButton.removeClass("btn-danger");
            $listenButton.addClass("btn-success");
            $listenButton.text("开始监听");
        };

        $.startListen = function() {
            listenType = !listenType;
            $listenButton.removeClass("btn-success");
            $listenButton.addClass("btn-danger");
            $listenButton.text("停止监听");
            $.getList();
        };

        $.getList = function () {
            $.ajax({
                url: "tail.php",
                async: false,
                dataType: "json",
                type: "GET",
                data: {
                    filePath: filePath,
                    offset: offset
                },
                success: function (data) {
                    if (data.code === 200) {
                        var logText = $console.val();
                        $(data.data.logArr).each(function (index, element) {
                            // $("#show").text(e);
                            logText += element;
                        });
                        offset = data.data.offset;
                        $console.val(logText);
                        if (autoScroll) {
                            var scrollTop = $console[0].scrollHeight;
                            $console.scrollTop(scrollTop);
                        }
                        if (listenType)
                            setTimeout("$.getList()", 1000);
                    } else {
                        $.stopListen();
                        alert(data.msg);
                    }
                },
                error: function (e) {
                    $.stopListen();
                    console.log(e);
                }
            });
        };

        // 监听按钮
        $listenButton.on('click', function () {
            if (listenType) {
                $.stopListen();
            } else {
                $.startListen();
            }
        });

        // 文件路径更改监听
        $inputFilePath.on('change', function () {
            filePath = $(this).val();
            offset = 0;
        });

        // 监测滚动条是否在底部
        $console.scroll(function (e) {
            // 人为滚动离开底部后关闭自动跟随滚动，滚动到底部后开启自动滚动
            autoScroll = this.scrollHeight - this.scrollTop === this.clientHeight;
        });
    });
</script>
</body>
</html>