发布于 由admin

PHP 驱动的工业自动化报表系统：利用全栈架构实现传感器实时采集与动态图表展示

咳咳，各位工友，各位还在被 Java 的 Spring Boot 疯狂 IoC 注入折磨的“码农”，还有那些还在用 jQuery 写全屏弹窗的“老法师”，大家晚上好。

今天我们不谈那些虚头巴脑的理论，不谈那些“分布式系统的高可用架构”，我们只谈最实在的——工业自动化。

想象一下，你站在一条现代化的流水线旁。这里没有血肉之躯，只有钢铁、电缆和闪烁的指示灯。机器在运转，温度在变化，压力在波动。你的任务不是去拧螺丝，而是坐在空调房里，盯着屏幕，当温度超过 90 度时，能立刻按下“急停”按钮。或者更酷一点，让系统自动切断电源，保住工厂。

要实现这个，你需要一个系统。一个能像心脏一样跳动的系统。

而这个系统的血液，就是 PHP。

别笑。我知道你们脑子里现在的弹幕是：“PHP？那个只做网页跳转的脚本语言？那是 2010 年的事情了！”

错！大错特错。

今天的讲座，我们将用 PHP 全栈 的姿势，手把手教你搭建一个工业级的数据采集与实时监控系统。我们将用到 WebSocket 做长连接，用 Redis 做消息队列，用 Canvas 做动态图表。我们将抛弃那些臃肿的框架，直接用原生 PHP 的肌肉力量去跳舞。

准备好了吗？我们要开始给机器注入灵魂了。

第一部分：架构设计——别把大象装进冰箱

首先，我们来聊聊这个系统长什么样。在这个全栈架构中，PHP 不再是一个单纯的输出 HTML 的家伙，它变身了。

想象一下我们的工厂有三个车间：

  1. 采集车间（后端）：负责像间谍一样潜伏在传感器旁边，把数据偷出来（读取）。
  2. 传输车间（通信层）：负责把偷来的数据通过高速公路（WebSocket）运送给终端。
  3. 展示车间（前端）：负责把这些冷冰冰的数字变成热乎乎的折线图，让操作员看得热血沸腾。

我们要用 PHP (CLI模式) + Swoole/Workerman 来做核心引擎。为什么？因为传统的 PHP 是请求-响应式的，就像你去食堂打饭，打完饭你必须走人，不能留在食堂里等着下一盘菜。但在工业监控中，传感器是每秒在跳动的，传统的 PHP 响应一次后就睡大觉，数据就断了。

我们需要的是 事件驱动 和 长连接。

第二部分：数据采集——与传感器“窃窃私语”

在工业世界里，传感器就像是一个个性格孤僻的哑巴。有的通过串口（RS232/485）说话，有的通过以太网说话，还有的像装了导航一样通过 MQTT 说话。

为了演示方便，我们假设有一个传感器，它通过串口发送温度数据，格式是一串乱码。我们要写一个 PHP 脚本来“破解”它。

注意，这里不要用什么 SSH 连接，直接在 PHP 里操作串口最直接，但也最容易被误操作烧了设备。我们先来写一个模拟器，让代码跑起来，然后再谈硬件。

<?php
// sensor_emulator.php
// 这是一个伪装成传感器的 PHP 脚本，它会假装自己在生产数据

class SensorEmulator {
    private $temperature = 25.0;
    private $vibration = 0.0;

    public function __construct() {
        echo "Sensor: System initialized. Waiting for commands...n";
    }

    public function readData() {
        // 模拟环境波动
        $this->temperature += (rand(-5, 5) / 10); 
        $this->vibration += (rand(-1, 1) * 0.01);

        // 限制范围，别让温度变成绝对零度或者核反应堆
        if ($this->temperature > 90) $this->temperature = 90;
        if ($this->temperature < 0) $this->temperature = 0;

        // 构造假数据包
        $packet = [
            'timestamp' => time(),
            'sensor_id' => 'SENSOR-A-01',
            'value' => $this->temperature,
            'status' => 'NORMAL',
            'checksum' => md5($this->temperature) // 假装有个校验和
        ];

        return $packet;
    }
}

// 启动模拟循环
$sensor = new SensorEmulator();
while (true) {
    $data = $sensor->readData();
    echo json_encode($data) . "n";
    usleep(500000); // 半秒发一次，模拟 2Hz 采集频率
}

看到没？这就是原始数据。在真实的工业场景里，这串 JSON 可能是从 /dev/ttyUSB0 读出来的原始字节流，需要用 json_decode 或者二进制解析。但在这里，我们要的是逻辑。

第三部分：数据清洗与存储——Redis 的狂欢

拿到数据不是结束，只是开始。如果这些数据直接存进 MySQL，恭喜你，你的数据库会在 3 秒钟内变成一只死猪——连接超时，CPU 100%。工业数据的特点是：量大、实时、不需要永久保存所有历史。

这里我们要用 Redis。Redis 就像一个装着 10 吨水的超大水桶，而且这水是活水，不会变味。

我们将构建一个发布/订阅 模式。

  1. 采集程序把数据扔进 Redis 的一个频道（Channel）。
  2. 我们的监控服务器订阅这个频道。
  3. 收到数据后，推送给前端。

但这还不够实时。为了演示，我们直接用 Swoole 的 Server 来处理，这可是 PHP 进化的方向，性能直接对标 C++。

<?php
// server.php
// 这是我们的核心引擎，利用 Swoole 扩展
// 确保你的环境安装了 swoole 扩展：pecl install swoole

use SwooleWebSocketServer;
use SwooleTimer;

$server = new Server("0.0.0.0", 9501, SWOOLE_PROCESS, SWOOLE_SOCK_TCP);

// 模拟一个传感器读取器（生产者）
$server->on('start', function ($server) {
    echo "Swoole WebSocket Server started at http://0.0.0.0:9501n";

    // 开启一个定时器，模拟传感器每秒产生数据
    Timer::tick(1000, function () use ($server) {
        $data = [
            'time' => date('H:i:s'),
            'temp' => rand(20, 80), // 模拟温度
            'pressure' => rand(100, 200) // 模拟压力
        ];

        // 将数据推送给所有连接的客户端
        // 在生产环境中，这里可能是从 Redis Pub/Sub 订阅过来的数据
        foreach ($server->connections as $fd) {
            $server->push($fd, json_encode($data));
        }
    });
});

// 处理 WebSocket 连接
$server->on('open', function ($server, $request) {
    echo "New connection [{$request->fd}]n";
});

// 处理前端发来的心跳
$server->on('message', function ($server, $frame) {
    // 这里可以处理前端的指令，比如“开始采集”、“停止采集”
    $server->push($frame->fd, "Server received: " . $frame->data);
});

// 连接关闭
$server->on('close', function ($server, $fd) {
    echo "Connection [{$fd}] has been closed.n";
});

$server->start();

看懂了吗？这就是 PHP 的全栈力量。这段代码既包含了服务器，又包含了业务逻辑，甚至模拟了硬件数据流。它不需要 Apache/Nginx 来转发，它自己就是服务器。

第四部分：前端可视化——让数据“动”起来

好了，后端已经在疯狂推送数据了。现在我们需要一个前端，把这些乱七八糟的数字变成一幅画。

很多新手喜欢用 alert() 来提示错误。这是大忌！在工业现场，你要么盯着图表看，要么在出故障时收到红色警报。图表要实时刷新，不能有延迟。

我们将使用 Canvas API 结合 Chart.js (或者更轻量的 ECharts)。这里为了代码可控性，我们直接写一个原生 JS 的实现，不依赖庞大的第三方库，这样你才懂原理。

<!DOCTYPE html>
<html>
<head>
    <title>工业大脑</title>
    <style>
        body { background: #1a1a1a; color: #00ff00; font-family: 'Courier New', Courier, monospace; }
        #dashboard { width: 100%; max-width: 800px; margin: 0 auto; }
        canvas { background: #000; border: 2px solid #333; }
        .status { padding: 10px; font-size: 18px; font-weight: bold; }
        .critical { color: red; animation: blink 0.5s infinite; }
        @keyframes blink { 50% { opacity: 0; } }
    </style>
</head>
<body>
    <div id="dashboard">
        <div id="status" class="status">SYSTEM NORMAL</div>
        <canvas id="chart" width="800" height="400"></canvas>
        <div id="logs">Logs: Waiting for data...</div>
    </div>

    <script>
        // 1. 初始化 Canvas 上下文
        const canvas = document.getElementById('chart');
        const ctx = canvas.getContext('2d');
        const statusDiv = document.getElementById('status');
        const logDiv = document.getElementById('logs');

        // 2. 配置数据窗口（显示最近 50 个点）
        const maxPoints = 50;
        const dataPoints = new Array(maxPoints).fill(0);
        const labels = new Array(maxPoints).fill('');

        // 3. 绘图函数
        function drawChart() {
            // 清空画布
            ctx.fillStyle = 'black';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 绘制网格线
            ctx.strokeStyle = '#333';
            ctx.lineWidth = 1;
            ctx.beginPath();
            for(let i=0; i<canvas.width; i+=40) { ctx.moveTo(i, 0); ctx.lineTo(i, canvas.height); }
            for(let i=0; i<canvas.height; i+=40) { ctx.moveTo(0, i); ctx.lineTo(canvas.width, i); }
            ctx.stroke();

            // 绘制折线
            ctx.strokeStyle = '#00ff00';
            ctx.lineWidth = 2;
            ctx.beginPath();

            // 计算比例
            const stepX = canvas.width / (maxPoints - 1);
            // 假设数据范围 0-100
            const rangeY = 100; 

            for(let i=0; i<maxPoints; i++) {
                const x = i * stepX;
                const y = canvas.height - (dataPoints[i] / rangeY * canvas.height);
                if(i===0) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
            }
            ctx.stroke();

            // 填充渐变区域
            ctx.lineTo(canvas.width, canvas.height);
            ctx.lineTo(0, canvas.height);
            ctx.closePath();
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, 'rgba(0, 255, 0, 0.2)');
            gradient.addColorStop(1, 'rgba(0, 255, 0, 0)');
            ctx.fillStyle = gradient;
            ctx.fill();
        }

        // 4. 接收数据并更新
        const ws = new WebSocket('ws://127.0.0.1:9501');

        ws.onopen = function() {
            console.log("Connected to Factory");
        };

        ws.onmessage = function(event) {
            const data = JSON.parse(event.data);

            // 更新数据数组
            dataPoints.push(data.temp);
            dataPoints.shift(); // 移除最老的数据

            // 更新日志
            logDiv.innerHTML = `Latest: Temp=${data.temp}°C, Pressure=${data.pressure}MPa`;

            // 阈值判断
            if(data.temp > 75) {
                statusDiv.innerText = "WARNING: HIGH TEMP";
                statusDiv.className = "status critical";
                // 绘制一条红线表示警告
                ctx.strokeStyle = 'red';
                ctx.beginPath();
                ctx.moveTo(0, canvas.height * 0.75);
                ctx.lineTo(canvas.width, canvas.height * 0.75);
                ctx.stroke();
            } else {
                statusDiv.innerText = "SYSTEM NORMAL";
                statusDiv.className = "status";
            }

            // 重绘
            drawChart();
        };

        ws.onclose = function() {
            statusDiv.innerText = "CONNECTION LOST";
        };
    </script>
</body>
</html>

看到这里，你应该明白逻辑了：

  1. PHP 的 Swoole Server 就像一个不知疲倦的工人，每隔 1 秒生成一个数据包。
  2. 它通过 WebSocket 把这个包塞进管道。
  3. 前端的 JS 每次收到包，就把数组里的最后一个数踢出去，推一个新的进去。
  4. Canvas 画布被擦掉，重绘，就像播放 GIF 动画一样。

第五部分：进阶玩法——队列与多线程

如果是几千个传感器怎么办？刚才那个单循环遍历所有连接的 foreach ($server->connections...) 会累死 CPU。

我们需要优化。这里要引入 Laravel Queues 或者 Swoole Tables。

想象一下，我们现在有 1000 个传感器连接。

  • 方案 A (轮询)：每个连接单独开一个定时器。1000 个定时器？PHP 垃圾回收器会哭晕在厕所。
  • 方案 B (事件驱动)：当数据到达时，触发事件，事件处理器再分发。

我们来看看如何用 SwooleTable 这种数据结构来存储连接状态和少量缓存数据。

// server_advanced.php
// 使用 Table 提高内存访问速度

$server = new SwooleWebSocketServer("0.0.0.1", 9501);

// 创建一个内存表，存储所有连接的传感器 ID 和最后心跳时间
$table = new SwooleTable(1024);
$table->column('fd', SwooleTable::TYPE_INT);
$table->column('last_heartbeat', SwooleTable::TYPE_INT);
$table->create();

// 启动服务器
$server->on('start', function ($server) use ($table) {
    echo "Server started. Table size: {$table->size()}n";
});

// 连接建立
$server->on('open', function ($server, $request) use ($table) {
    $table->set($request->fd, [
        'fd' => $request->fd,
        'last_heartbeat' => time()
    ]);
    echo "New connection: {$request->fd}n";
});

// 收到消息（心跳包或数据）
$server->on('message', function ($server, $frame) use ($table) {
    $fd = $frame->fd;

    // 更新心跳时间
    $table->set($fd, ['last_heartbeat' => time()]);

    // 业务逻辑处理...
    $msg = json_decode($frame->data, true);

    // 模拟计算复杂逻辑
    $processedData = [
        'original' => $msg,
        'processed' => strtoupper($msg) . ' [ENCRYPTED]'
    ];

    // 发回给客户端
    $server->push($frame->fd, json_encode($processedData));
});

// 连接关闭
$server->on('close', function ($server, $fd) use ($table) {
    $table->del($fd);
    echo "Connection closed: {$fd}n";
});

// 后台定时任务：清理僵尸连接（心跳超时的）
SwooleTimer::tick(5000, function () use ($server, $table) {
    $now = time();
    foreach ($table as $row) {
        // 如果超过 10 秒没收到心跳
        if ($now - $row['last_heartbeat'] > 10) {
            $server->close($row['fd']);
            echo "Closed zombie connection: {$row['fd']}n";
        }
    }
});

$server->start();

这段代码引入了 心跳机制。在工业网络中，断网是常事。客户端必须每隔几秒发个“我活着”的消息。如果服务器 10 秒内没收到，就当它死机了，直接断开连接，释放资源。

第六部分：错误处理与容错——工业现场的生存法则

工业系统是不能崩溃的。如果服务挂了，工厂可能会停产。

我们需要 Supervisor。它是 Unix/Linux 世界的守护神，专门用来监控你的 PHP 进程。如果 php server.php 崩溃了，Supervisor 会立刻检测到，然后像僵尸复活一样，重新启动它。

# supervisord.conf
[program:swoole_server]
command=/usr/bin/php /path/to/server.php
autostart=true
autorestart=true
user=www-data
redirect_stderr=true
stdout_logfile=/var/log/swoole.log

而且，数据不能丢。虽然我们用 WebSocket 做实时展示，但为了保险，我们可以把关键数据（比如温度超过 80 度的时刻）异步写入 MySQL 或日志文件。

// 异步日志记录的伪代码
$server->on('message', function ($server, $frame) {
    // ... 处理数据 ...

    // 同步写数据库太慢，会阻塞 WebSocket 推送
    // 所以我们把这个任务扔给后台进程或者异步任务队列
    // 这里为了演示，直接用 file_put_contents
    file_put_contents('sensor_logs.txt', json_encode($data) . "n", FILE_APPEND);

    // 继续处理 WebSocket 推送...
});

第七部分：性能调优——追求极致

当你的工厂有 10 万个传感器时，PHP 能扛得住吗？

答案是：能，但要优化。

  1. 内存管理：PHP 有垃圾回收器（GC），但在高并发下，GC 会频繁触发暂停程序。我们要尽量复用变量，减少对象创建。
  2. 序列化：传输数据时，尽量用 swoole_serialize 或者 msgpack。JSON 是人类可读的，但它是格式转换最慢的。
  3. 协程：Swoole 4.0+ 引入了协程。这意味着你可以用同步的代码风格（就像写 Synchronous PHP）写出高并发的性能。
// 协程示例
use SwooleCoroutine;

// 假设我们需要从 3 个不同的数据库读取当前传感器状态
Corun(function() {
    $results = [];

    // 启动 3 个协程并发查询
    $c1 = Co::create(function() use (&$results) {
        $results[] = mysqli_query($link1, "SELECT * FROM sensor1");
    });

    $c2 = Co::create(function() use (&$results) {
        $results[] = mysqli_query($link2, "SELECT * FROM sensor2");
    });

    $c3 = Co::create(function() use (&$results) {
        $results[] = mysqli_query($link3, "SELECT * FROM sensor3");
    });

    // 等待所有协程完成
    Co::join([$c1, $c2, $c3]);

    // 处理结果...
});

这就叫“并发 I/O”，但你写的代码却是“同步阻塞”的。这就是 PHP 高性能架构的精髓。

结尾：不仅是代码，是控制权

各位，当我们把这段代码写完，部署在 Linux 服务器上，并通过内网穿透或 VPN 连接到工厂 PLC 时，我们就在这个钢铁丛林中建立了一个数字大脑。

PHP 不再是那个简单的脚本语言。在这个全栈架构下，它掌控着流量的阀门，它解读着传感器的语言，它用最简单的语法构建了最复杂的工业系统。

不要瞧不起任何语言。Python 擅长实验，Java 擅长企业级，C++ 擅底层。而 PHP，在 Swoole 这样的协程引擎加持下，能像 C 一样快，像 Python 一样灵活，像 Java 一样健壮。

下次当你看到车间里闪烁的指示灯时，想想，那每一个闪烁，背后都有我们的 PHP 代码在奔跑。是不是感觉稍微有点帅？

好了，代码已经给你们了，服务器端起起来，浏览器端开起来。别把工厂烧了。下课！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注