目录
[1. 前端架构](#1. 前端架构)
[2. 后端架构](#2. 后端架构)
[3. 通信流程](#3. 通信流程)
[1. 前端技术](#1. 前端技术)
[2. 后端技术](#2. 后端技术)
[3. 核心组件](#3. 核心组件)
结果清除器 (clear_factory_test_results.php)
前端监控 (factory_test_monitor.js)
数据存储 (factory_test_results.json)
[5. 为什么选这套技术？](#5. 为什么选这套技术？)
[1. 三层通信模型](#1. 三层通信模型)
[2. 完整通信流程](#2. 完整通信流程)
[3. 通信架构优势](#3. 通信架构优势)
[1. 前端界面模块](#1. 前端界面模块)
[2. 后端 API 模块](#2. 后端 API 模块)
[3. ZMQ 通信核心](#3. ZMQ 通信核心)
[4. 数据存储](#4. 数据存储)
[1. 实时监控实现](#1. 实时监控实现)
[2. ZMQ 与设备通信实现](#2. ZMQ 与设备通信实现)
[3. 状态持久化机制](#3. 状态持久化机制)
[4. 前后端交互接口设计](#4. 前后端交互接口设计)
一、前言
交互箱产厂测管理系统是一个用于实时监控和管理工业设备接口测试状态的解决方案。该系统通过ZMQ消息队列接收测试数据，将结果存储为JSON格式，并通过前端实时展示测试状态。
-
项目背景：交互箱厂测试监控需求
-
实现目标：实时监控工业设备（CAN / 485 / DI 接口）测试状态
-
技术亮点：前后端分离、实时通信、状态持久化、界面可视化
二、系统整体架构与实现机制
这是一个基于PHP+JavaScript+ZMQ技术栈的交互箱厂测试监控系统，主要用于实时监控和控制工业设备的各种接口（CAN、485、DI等）测试状态。系统采用前后端分离的架构，通过JSON数据交换和定时轮询实现实时状态更新。
1. 前端架构
HTML/CSS ：构建用户界面，采用响应式设计支持不同分辨率
JavaScript ：实现前端交互逻辑和实时监控功能
AJAX ：与后端接口进行数据交互
模块化设计 ：将功能拆分为独立模块，提高代码复用性
2. 后端架构
PHP ：处理业务逻辑和数据存储
ZMQ ：实现设备间的实时通信
JSON ：数据交换格式，用于前后端通信和状态存储
文件系统 ：使用JSON文件存储测试状态和结果
3. 通信流程
-
前端通过AJAX向后端发送命令（开始/结束测试）
-
后端通过ZMQ与测试设备通信
-
测试设备返回状态信息
-
后端将状态信息写入JSON文件
-
前端定时轮询获取最新状态并更新界面
系统定位工业设备接口自动化测试 + 实时状态监控 + 远程控制
整体流程总结前端命令下发 → 后端处理 → ZMQ 通信 → 设备返回 → 状态写入 → 前端刷新
二、技术栈选型与优势
1. 前端技术
-
HTML/CSS（响应式界面）
-
JavaScript（交互逻辑）
-
AJAX（异步请求）
-
模块化开发
2. 后端技术
-
PHP（业务逻辑 + API 接口）
-
ZMQ（高性能消息队列，设备通信）
-
JSON（数据交换格式）
-
文件存储（轻量状态持久化）
| 技术类别 | 技术栈 | 版本 | 选型理由 |
|---|---|---|---|
| 后端语言 | PHP | 7.0+ | 轻量级，适合嵌入式环境，支持ZMQ扩展 |
| 前端语言 | JavaScript | ES6+ | 原生JS，无需框架依赖，适合嵌入式设备 |
| 消息通信 | ZeroMQ (ZMQ) | 4.0+ | 轻量级消息队列，低延迟，适合实时数据传输 |
| 数据存储 | JSON文件 | - | 简单直接，适合小型应用，易于解析和查看 |
| 部署环境 | 嵌入式Linux/Windows | - | 支持多种嵌入式设备，资源占用低 |
3. 核心组件
ZMQ订阅器 (zmq_subscriber.php)
-
持续监听ZMQ消息队列
-
接收工厂测试结果数据
-
解析并存储到JSON文件
结果清除器 (clear_factory_test_results.php)
-
重置测试结果为初始状态
-
提供HTTP接口供前端调用
前端监控 (factory_test_monitor.js)
-
定期读取测试结果
-
实时更新UI显示
-
提供测试控制功能
数据存储 (factory_test_results.json)
- 存储各接口测试状态
5. 为什么选这套技术？
-
开发快、部署简单、适合工业现场
-
ZMQ 低延迟、高并发，适合设备通信
-
前后端分离便于维护与扩展
-
JSON 文件无需数据库，轻量化稳定
三、网络通信架构（重点！）
1. 三层通信模型
-
前端 ↔ 后端：AJAX + HTTP + JSON
-
后端 ↔ 设备：ZMQ 消息队列（Request/Reply 模式）
-
前端实时更新：定时轮询 + 无刷新渲染
2. 完整通信流程
-
前端发送测试命令（开始 / 停止）
-
PHP 接口接收并通过 ZMQ 下发设备
-
设备返回状态
-
后端写入 JSON 文件
-
前端轮询获取状态并实时刷新界面
3. 通信架构优势
-
解耦强、扩展方便
-
实时性高、适合工业监控
-
稳定性强、异常可追溯
四、系统模块划分与功能职责
1. 前端界面模块
-
login.php：登录验证
-
main.php：主监控界面
-
factory_test_monitor.js：实时刷新、状态展示、命令下发
2. 后端 API 模块
-
execute-command.php：执行测试命令
-
get-test-status.php：获取测试状态
-
clear_factory_test_results.php：清空结果
3. ZMQ 通信核心
-
send_zmq_request.php：ZMQ 消息发送
-
zmq_subscriber.php：ZMQ 消息订阅
4. 数据存储
-
factory_test_status.json：实时状态
-
factory_test_results.json：历史结果
界面中各模块负责的功能
├── index.php # 网站入口（重定向到登录页）
├── login.php # 登录认证页面
├── main.php # 主功能页面（包含工厂测试控制界面）
├── execute-command.php# 命令执行接口（处理ZMQ请求）
├── send_zmq_request.php# ZMQ消息发送模块
├── zmq_subscriber.php # ZMQ消息订阅模块
├── factory_test_monitor.js # 前端监控脚本
├── get-test-status.php# 状态查询接口
├── factory_test_status.json # 测试状态存储
├── factory_test_results.json # 测试结果存储
└── clear_factory_test_results.php # 测试结果清除接口
五、核心功能实现（重点技术讲解）
1. 实时监控实现
-
JS 定时 AJAX 轮询（500ms/1s）
-
无刷新更新设备状态（CAN/485/DI）
-
状态颜色区分、进度展示、告警提示
2. ZMQ 与设备通信实现
-
PHP 绑定 ZMQ
-
Req/Rep 模式通信
-
命令封装与解析
-
异步高并发支持
3. 状态持久化机制
-
JSON 文件存储结构
-
读写安全、无锁设计
-
轻量无需数据库
4. 前后端交互接口设计
-
命令下发接口
-
状态查询接口
-
结果清除接口
六、系统界面与运行效果
- 测试流程控制2
- 结果展示与日志
彩蛋\]后期代码解析敬请期待！ ## 七、项目亮点与总结 1. 前后端分离架构清晰 2. ZMQ 实现工业级低延迟通信 3. 轻量级 JSON 存储，部署简单 4. 响应式界面，支持多分辨率 5. 适用于工业测试、设备监控、自动化产线 ## 八、可扩展方向 * 加入 MySQL 存储历史数据 * 增加 WebSocket 替代轮询 * 增加权限管理、报表导出 * 多设备并发测试 * 对接云端平台