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

Posted 2022-07-31 Rudon滨海渔村

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了PHP自制Log日志文件查看器 - 读取log文件最后100行 - JS自动倒计时刷新页面相关的知识，希望对你有一定的参考价值。

效果图

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

核心步骤

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>

最后访问
https://xxxxx.com/index/log_shower/#bottom