WebSocket+php实现tail -f 命令的web版本实时输出日志的增量 web监控log日志

最新推荐文章于 2024-03-14 17:34:26 发布

__DEBUG__

最新推荐文章于 2024-03-14 17:34:26 发布

阅读量2k

点赞数

分类专栏： php js 文章标签： web socket Workerman WebSocket

本文链接：https://blog.csdn.net/u014017080/article/details/85325240

版权

php 同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

实现方式是：php的Workerman框架+js的WebSocket

PHP：

workerman 官网地址，可以通过 composer 安装：

{
    "require": {
        "walkor/workerman": "^3.5"
    }
}

JS：

socket WebSocket

<script src='//cdn.bootcss.com/socket.io/1.3.7/socket.io.js'></script>

设计架构：

后端：通过workerman开启socket，监控会话，发现会话以后，读取当前日志的文件大小并把指针移到文件最后面，开始监控文件变化。

每秒钟刷新20次然后跳出，有变化返回给前端。（这里如果不跳出会造成进程阻塞，不要在会话时写死循环！！！）

前端：每秒钟一次的心跳策略，获取信息。

======ws_start.php========

<?php
require_once './vendor/autoload.php';
use Workerman\Worker;
define("MAX_SHOW", 8192);
// 注意：这里与上个例子不同，使用的是websocket协议
$ws_worker = new Worker("websocket://0.0.0.0:2000");

// 启动4个进程对外提供服务
$ws_worker->count = 4;

// 当收到客户端发来的数据后返回hello $data给客户端
$ws_worker->onMessage = function($connection, $data)
{
if($data == "tom")
$connection->send("联接成功。输入密码。。\n");
// 当收到客户端发来的数据后返回hello $data给客户端
if($data == "4748"){
 // $connection->send("验证成功，开启log查询。。\n");
//  $connection->send($t);
$file_name      = "/log/".date("Y-m-d",time()) .".log";//log文件地址

$file_size      = filesize($file_name);
$file_size_new  = 0;
$add_size       = 0;
$ignore_size    = 0;
$fp = fopen($file_name, "r");
fseek($fp, $file_size);
$num = 0;
while(1){
$num++;
    clearstatcache();
    $file_size_new  = filesize($file_name);
    $add_size       = $file_size_new - $file_size;
    if($add_size > 0){
        if($add_size > MAX_SHOW){
            $ignore_size    = $add_size - MAX_SHOW;
            $add_size       = MAX_SHOW;
            fseek($fp, $file_size + $ignore_size);
        }
      //  fwrite(
        //    STDOUT,
$connection->send(fread($fp, $add_size));
      //  );  
        $file_size  = $file_size_new;
    }
    usleep(50000);
if($num>20) break;
}

fclose($fp);


}

};


// 运行worker
Worker::runAll();

=========index.html=========

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template">
    <meta name="author" content="GeeksLabs">
    <meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal">

   <title>test</title>

    <!-- Bootstrap CSS -->    
    <!-- bootstrap theme -->
    <!--external css-->
    <!-- font icon -->
    <!-- Custom styles -->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

  <body style="background-color:oldlace" >
    <p class="text-404">等待任务..</p>
<input value='' id='v' type="text">
<button type="button" onclick=a() >Click Me!</button>
<br/>
    <textarea readonly  id="txt" style="width: 324px; height: 635px;background: black none repeat scroll 0% 0%; color: rgb(153, 153, 153);" ></textarea>
  </div>
  
  </body>
</html>



<script src='//cdn.bootcss.com/socket.io/1.3.7/socket.io.js'></script>
<script>
ws = new WebSocket("ws://xxx.xxxx.xxx:2000");//访问域名或者ip
ws.onopen = function() {
    ws.send('tom');
};
ws.onmessage = function(e) {
oTest = document.getElementById("txt");

oTest.innerHTML = oTest.innerHTML + e.data;
   // alert("get :" + e.data);
};

window.setInterval(a,1000);//每秒钟的心跳

function a(){
r = document.getElementById("v");
ws.send(v.value);
}
</script>