PHP自制Log日志文件查看器 - 读取log文件最后100行 - JS自动倒计时刷新页面

本文链接：https://blog.csdn.net/qq285744011/article/details/124839812

本文介绍了一个使用PHP读取本地log文件并展示最后100行内容的实现，同时前端通过JavaScript进行6秒自动刷新。当浏览器标签页未在活动状态时，倒计时暂停。此方案适用于实时监控日志动态，且具备节能特性。

摘要由CSDN通过智能技术生成

效果图

倒计时自动刷新 + 浏览器标签页不在读时自动暂停读秒

核心步骤

PHP读取本地log文件最后一百行内容，展示在前端
前端倒计时6秒自动刷新本页面

实现步骤

php读log文件最后100行内容

<?php
namespace app\controller;

use app\BaseController;
use think\facade\View;

class Index extends BaseController
{
    
    /**
     * 取文件最后$n行
     * https://www.yisu.com/zixun/606574.html
     * 
     * @param string $filename 文件路径
     * @param int $n 最后几行
     * @return mixed false表示有错误，成功则返回字符串
     */
    public function FileLastLines($filename,$n){
        if(!$fp=fopen($filename,'r')){
            echo "打开文件失败，请检查文件路径是否正确，路径和文件名不要包含中文";
            return false;
        }
        $pos=-2;
        $eof="";
        $str="";
        $linesArr = array();

        while($n>0){
            while($eof!="\n"){
                if(!fseek($fp,$pos,SEEK_END)){
                    $eof=fgetc($fp);
                    $pos--;
                } else {
                    break;
                }
            }
            // $str.=fgets($fp);
            $linesArr[] = fgets($fp);
            $eof="";
            $n--;
        }

        
        $linesArr = array_reverse($linesArr);
        foreach ($linesArr as $one) {
            $str .= $one;
        }
        return $str;
    }
    
    
    public function log_shower()
    {
        $file = '/www/wwwlog/xxxxxxxx.log';
        $content = $this->FileLastLines($file, 100);
        View::assign('content', $content);
        return view();
    }


}

页面模板（HTML+JS展示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv="refresh" content="6">  -->
    <title>LogShower - Rudon</title>
    <meta name="author" content="Rudon">
    <meta name="description" content="https://rudon.blog.csdn.net/">
</head>

<body style="background-color: black; color: white;">
    
    <!-- 读秒 -->
    <div style="position: fixed; bottom: 30px; right: 30px;font-size: 30px; font-weight: bold;" id="tt"></div>

    <div style="padding: 30px; font-size: 14px;">
        <!-- pre自动换行 -->
        <pre style='font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;'>{$content}</pre>
    </div>


    <!-- 通过#bottom直接自动跳转到页面最底部 -->
    <div style="height: 150px;"></div><div id="bottom">&emsp;</div>
    

    <script>
        
        // 全局变量
        window.t = 7; // 7秒后自动刷新
        window.is_pause = false;   // 是否继续读秒

        
        // js 怎样判断用户是否在浏览当前页面？
        // https://zhidao.baidu.com/question/541794991.html
        var hiddenProperty = 'hidden' in document ? 'hidden' :    
            'webkitHidden' in document ? 'webkitHidden' :    
            'mozHidden' in document ? 'mozHidden' :    
            null;
        var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
        var onVisibilityChange = function(){
            if (!document[hiddenProperty]) {
                console.log('页面激活');
                window.is_pause = false;

                // js 修改meta标签 属性
                // https://blog.csdn.net/be_strong_web/article/details/118414243
                // document.querySelector('meta[name="refresh"]').setAttribute("content", "10");

            }else{
                console.log('页面非激活')
                window.is_pause = true;
            }
        }
        // 添加网页状态监视器 - 浏览器中网页在读 - 失去焦点的状态
        document.addEventListener(visibilityChangeEvent, onVisibilityChange);


        // 开始倒计时
        showTime();


        // 倒计时
        function showTime () {
            console.log('showTime()');

            if(window.t <= 0){
                document.getElementById('tt').innerHTML = ' >>>> Refresh';
                window.location.reload();

            } else {
                document.getElementById('tt').innerHTML = window.t;
            }
            
            if(!window.is_pause){
                window.t = window.t - 1;
            }

            setTimeout(()=>{
                showTime();
            }, 1000);
        }

        
        // JS解析url查询参数的简单代码
        // https://www.jb51.net/article/120452.htm
        function GetQueryString (name) { 
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
            var r = window.location.search.substr(1).match(reg); 
            if (r != null) return unescape(r[2]); return null; 
        }


    </script>


<style>
    pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            padding: 15px;
            border: 1px dashed gray;
            border-radius: 10px;
            text-align: left;
            margin: 20px 0;
        }
</style>

</body>
</html>