在工业自动化领域，我们往往面临一个两难的选择：底层控制需要C++的极致性能与硬件交互能力，而上层交互又渴望Web技术的灵活与跨平台特性。

本文将带你从零开始，不依赖任何庞大的前端框架（如Vue/React）或复杂的构建工具，仅用 C++17 和原生 HTML/JS/CSS，构建一个轻量级、高性能的工业机器人控制系统。

1. 为什么选择这种架构？

传统的工业软件往往使用 Qt 或 MFC 开发桌面客户端。虽然稳定，但开发效率低，且难以实现现代化的 UI 效果。

我们采用 C++ 后端 + WebSocket + 原生 Web 前端 的架构，具有以下核心优势：

1. 性能与控制力的完美平衡：后端保留 C++ 对实时性要求高的运动控制算法、硬件驱动接口的控制能力。
2. UI 开发的极致灵活：利用 Web 技术（HTML5/CSS3）可以轻松实现酷炫的仪表盘、状态监控图表，且天生支持远程访问。
3. 零依赖、轻量级：前端无需 npm install，无需打包编译，一个浏览器即可运行。适合嵌入式设备内部直接托管网页。
4. 清晰的职责边界：
5. 后端：只负责“干活”（运动控制、状态监测）。
6. 前端：只负责“画图”（显示状态、发送指令）。
7. 协议：通过 JSON 消息解耦，任何一方的修改不会轻易破坏另一方。

2. 系统核心架构设计

我们的系统由三个核心部分组成：

graph TD    User[操作员] -->|点击/各关节滑块| WebUI[Web前端\n(Vanilla JS + CSS)]    WebUI -->|WebSocket JSON指令| Server[C++ WebSocket服务器]    Server -->|解析指令| Controller[机器人控制器\n(模拟物理引擎)]    Controller -->|状态更新 5Hz| Server    Server -->|广播JSON状态| WebUI    WebUI -->|DOM更新| User

通信协议设计

为了保证前后端解耦，我们定义了一套简洁的 JSON 通信协议：

前端 -> 后端 (控制指令):

// 移动关节{ "command": "set_joint", "joint": 0, "angle": 45.5 }// 紧急停止{ "command": "emergency_stop" }

后端 -> 前端 (状态广播):

// 周期性推送 (200ms){    "joints": [0.0, 45.5, 0.0, 0.0, 0.0, 0.0],    "emergency_stop": false,    "temperature": 42.5}

3. 核心实现：C++ 后端

后端我们使用 WebSocket++ 作为通信库，JsonCpp 处理数据序列化，C++17 标准保证代码的现代与高效。

3.1 机器人控制器 (RobotController)

这是系统的“大脑”，负责维护机器人的物理状态。在真实场景中，这里会调用运动控制卡提供的 API。

// src/RobotController.hstruct RobotState {    std::vector joints; // 6轴角度    bool isEmergencyStopped;    double temperature;};class RobotController {    // ... 互斥锁保护状态安全 ...    void update(); // 模拟物理环境变化（如温度波动）    void setJointAngle(int joint, double angle);};

3.2 WebSocket 服务器

服务器负责监听 9002 端口，处理连接，并运行一个独立的线程用于周期性广播状态。

// src/main.cppvoid on_message(Server* s, websocketpp::connection_hdl hdl, message_ptr msg) {    // 1. 解析 JSON    Json::Value root;    reader.parse(msg->get_payload(), root);    std::string cmd = root["command"].asString();    // 2. 路由指令    if (cmd == "set_joint") {        robot.setJointAngle(root["joint"].asInt(), root["angle"].asDouble());    }    // ...}void broadcast_status() {    while(true) {        // 5Hz 频率推送状态        std::this_thread::sleep_for(std::chrono::milliseconds(200));                // 序列化当前状态        Json::Value root;        // ... 填充数据 ...                // 广播给所有连接的客户端        server.send(hdl, writer.write(root), ...);    }}

4. 核心实现：纯原生前端 (Vanilla JS)

不需要 Vue，不需要 React，浏览器的原生能力已经足够强大。

4.1 界面布局 (HTML/CSS)

我们使用 Flexbox 和 Grid 布局快速搭建一个工业风的控制面板。

<!-- ui/index.html -->
    
        温度监控        
-- °C
    
    <!-- JS 动态生成6个关节的滑块 -->

4.2 实时通信逻辑

JavaScript 的 WebSocket API 非常简单直观。

// 连接后端const ws = new WebSocket('ws://localhost:9002');ws.onmessage = (event) => {    const data = JSON.parse(event.data);        // 1. 更新温度显示    document.getElementById('temperature').innerText = data.temperature.toFixed(1) + ' °C';    // 2. 更新急停状态样式    if (data.emergency_stop) {        document.body.classList.add('alarm-state');    }};// 发送控制指令function updateJoint(jointIndex, angle) {    ws.send(JSON.stringify({        command: 'set_joint',        joint: jointIndex,        angle: parseFloat(angle)    }));}

5. 项目运行与总结

编译运行

由于使用了 CMake,编译非常简单:

mkdir build && cd buildcmake ..make./robot_server

然后双击打开 ui/index.html,你就能看到一个实时跳动的工业控制面板。当你拖动滑块时,指令瞬间到达 C++ 后端,后端更新模拟后的物理状态,并立即反馈给前端。

运行效果

下图展示了最终的Web控制界面,包含:

• 实时连接状态指示
• 系统状态、温度和电机状态监控
• 6个关节的实时角度控制滑块
• 紧急停止和重置系统按钮

界面设计简洁现代,采用工业风格配色,绿色表示正常运行状态,红色用于紧急停止按钮,蓝色用于常规操作。所有状态数据以5Hz频率实时更新,确保操作员能够及时掌握机器人状态。

总结

这套架构展示了 Web 技术在工业领域的强大生命力。通过 WebSocket 这座桥梁，我们将 C++ 的硬实力与 Web 的软实力结合，构建了一个无需安装、跨平台、高性能的现代化工业控制系统。

对于想要深入了解工业互联网、嵌入式 Web 开发的工程师来说，这是一个绝佳的入门实践。