1. 项目概述

该项目是基于开源操作系统 OpenEuler 开发的系统性能监控工具，包含后端服务和前端页面两部分，旨在实时展示系统的 CPU、内存、磁盘 I/O、网络流量及运行时间等关键性能数据。

2. 项目结构

2.1 后端服务

后端服务是基于 C 语言开发的小型 HTTP 服务，使用 libmicrohttpd 实现，监听本地端口 5000，提供系统性能数据的 REST API。

• 服务端口: 5000
• API 入口: /api/stats
• 数据格式: JSON

2.2 前端页面

前端页面通过 fetch API 定时调用后端提供的 REST API，解析返回的 JSON 数据，并动态更新页面内容，向用户展示系统性能信息。

3. 功能模块

3.1 后端功能

1. CPU 使用率计算
   • 从 /proc/stat 获取 CPU 时间片数据。
   • 计算用户态、系统态、空闲态的占用百分比。
2. 内存信息
   • 使用 sysinfo 函数获取总内存、空闲内存，并计算已用内存。
3. 运行时间
   • 使用 sysinfo 的 uptime 字段，解析并格式化为 天-小时-分钟-秒。
4. 磁盘 I/O 信息
   • 从 /proc/diskstats 提取读写扇区数。
5. 网络流量信息
   • 从 /proc/net/dev 提取接收和发送的字节数。
6. JSON 响应
   • 将上述信息封装为 JSON 格式，例如：

   {
     "cpu_usage": "25.34",
     "memory": {
       "total": 16384,
       "used": 4096,
       "free": 12288
     },
     "uptime": "1 days, 2 hours, 3 minutes, 4 seconds",
     "network": {
       "rx_bytes": 1048576,
       "tx_bytes": 524288
     },
     "disk_io": {
       "read_sectors": 123456,
       "write_sectors": 78910
     }
   }

7. 错误处理
   • 后端会捕捉文件读取错误、数据解析错误等，返回相应的错误消息。

3.2 前端功能

1. 页面展示
   • 提供简洁易读的仪表板，显示以下信息：
     • CPU 使用率
     • 内存总量、已用、空闲
     • 系统运行时间
     • 网络接收/发送流量
     • 磁盘 I/O 读写信息
2. 数据刷新
   • 页面首次加载时自动获取系统性能数据。
   • 每 5 秒调用一次后端 API，实时刷新页面。
3. 错误提示
   • 若后端不可用或数据解析失败，页面会显示错误信息。

4. 使用方法

4.1 部署后端

1. 编译和运行
   • 将后端 C 代码保存为 rest_server.c，然后使用以下命令编译并运行：

      gcc rest_server.c -o rest_server -lmicrohttpd
      ./rest_server

2. 服务启动
   • 服务启动后会在终端输出：

   Server running on http://localhost:5000

3. 测试 API
   • 使用 curl 或浏览器测试接口：

   curl http://127.0.0.1:5000/api/stats

4.2 部署前端

1. 创建 HTML 文件
   • 将前端 HTML 页面代码保存为 index.html。
2. 启动浏览器
   • 使用支持现代 JavaScript 的浏览器打开 index.html 文件，即可查看系统性能仪表板。

5. 示例运行截图

页面加载成功： ![[截屏2024-11-26 11.53.03.png]] 后端错误时： ![[截屏2024-11-26 11.54.21.png]]

6. 后续改进

1. 性能优化
   • 增加多线程支持，提高并发能力。
   • 针对较大规模数据流量优化磁盘 I/O 和网络读取逻辑。
2. 功能扩展
   • 添加实时图表展示（如折线图、柱状图）。
   • 支持更多性能指标，如 CPU 核心分布、磁盘空间占用、网络连接数等。
3. 安全性
   • 增加 HTTPS 支持。
   • 引入认证机制，防止未授权访问。