# Web-Monitor
**Repository Path**: YeLee_CN/Web-Monitor
## Basic Information
- **Project Name**: Web-Monitor
- **Description**: No description available
- **Primary Language**: PHP
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-29
- **Last Updated**: 2021-07-07
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Web Monitor
**Web Monitor**是一款前后端分离的服务端监控工具
## 开始前先叨几句
之前买了台树莓派，刚开始还折腾得挺得劲的，后来太忙了，就扔在角落吃灰了。
最近，在树莓派上搭建了个开发环境，有时候设备会无缘无故出现各种问题，便想着装个软件监控设备状态，于是便想到了**PI Dashboard**。玩了一段时间之后，发现这东西还挺有趣的，看了他的源码之后，便萌生了一个自己造轮子的想法，**Web Monitor**便是这样诞生的。
## 前后端分离的想法
前面我们说到，**Web Monitor**是一款前后端分离的服务端监控工具，为什么这样说呢？
* 后端用PHP读取服务器状态，并生成JSON信息
* 前端用React负责页面的渲染工作
* 组件用ANT Design和ANTD Charts来展示数据
## 后端到底干了什么？
> **后端工作流程**：
> 1. 前端向**api.php**发送请求
> 2. **key.php**验证k参数有效性
> 3. **sysinfo.php**根据POST过来的v参数返回JSON
**Web Monitor**后端包含3个文件*api.php*、*key.php*、*sysinfo.php*，都放在api目录下面了，***PHP建议采用7.0以上版本***。
* **api.php**提供前端访问接口，数据需前端通过POST请求，浏览器不可访问，错误码通过JSON方式返回。
> 1. 参数v：一个JSON格式的数组，可请求的参数可参见**sysinfo.php**的说明
> 2. 参数k：系统的验证用的Token，用于**key.php**的验证
* **key.php**提供一个前端认证的Token，防止设备外部访问，*(由于这部分算法问题，我暂时将这部分代码注释了)*
* **sysinfo.php**提供一个服务端的访问接口，目前可访问以下设备信息：
> 1. ***now*** 设备当前时间
> 2. ***uptime*** 设备开机时间，来源于 */proc/uptime*
> 3. ***user*** 当前用户名
> 4. ***hostname*** 当前设备名
> 5. ***ip*** 当前设备的IP地址
> 6. ***port*** 当前访问的Web端口
> 7. ***memory*** 设备内存信息，来源于 */proc/meminfo*
> 8. ***disk*** 存储设备信息，来源于 */proc/mounts*
> 9. ***cpu*** CPU设备信息，来源于 */proc/cpuinfo*
> 10. ***stat*** 系统和内核的统计信息，来源于 */proc/stat*
> 11. ***loadavg*** CPU负载状态，来源于 */proc/loadavg*
> 12. ***net*** 网络设备统计信息，来源于 */proc/net/dev*
> 13. ***temp*** 设备温度信息，来源于 */sys/class/thermal/thermal_zone*
> 14. ***cpufreq*** CPU核心频率，来源于 */sys/devices/system/cpu/cpu*
## 前端到底干了什么？
> 前端工作流程：
> 1. **index.js**入口初始化
> 2. **Locales/AppRoot.jsx**初始化语言环境
> 3. **Locales/locales.jsx**引入翻译环境文件
> 4. **Components/main.jsx**载入主框架，从服务器获取JSON
> 5. **Components/main.jsx**调用定时器，每1s更新状态信息
根目录下的**package.json**是项目依赖文件，在npm工作时需要从此获取更新包。**public**下面一些系统运行时的静态文件，**favicon.ico**是一个树莓派的图标文件。
前端的源代码都放在src目录下面了，下面我将依次进行说明这些文件是干嘛用的。
> * **index.js** 程序的主入口
> * **setupProxy.js** 解决开发环境下跨域访问的，在部署正式环境时建议删除。
> * **Locales/AppRoot.jsx** 程序根节点代码，主要用来进行Locales初始化
> * **Locales/locales.jsx** **react-intl**通过它来获取Locales
> * **Locales/xx_XX.jsx** Locales文件
> * **Components/main.jsx** 主框架代码，负责从服务器获取信息，并载入子组件
> * **Components/base.jsx** 基础信息组件，主要展示数组base里面的静态信息
> * **Components/cpu.jsx** CPU信息组件，由于精力问题，目前仅展示CPU负载均衡信息，后续有时间再更新
> * **Components/memory.jsx** 内存信息组件，展示内存空间和交换空间信息
> * **Components/network.jsx** 网络信息组件，展示当前网络状态
> * **Components/disk.jsx** 存储设备组件，展示当前存储设备信息
> * **Components/common.js** 一个通用的组件，主要负责将存储格式转换为更易读的格式
> * **Components/App.css** CSS样式文件
### 一些技术细节
前端代码**Components/main.jsx**的base里面的now、uptime、user、hostname、port、ip等信息仅初始化时获取，memory、cpu、stat、loadavg、net、cpufreq每秒更新，disk、temp每10秒更新一次，并不存在频繁访问资源的问题。
在正式布署之前，建议在**Components/main.jsx**的箭头函数**getData**里面修改axios进行POST的路径，以免出现404错误。
由于开发环境存在跨域问题，所以我加了**http-proxy-middleware**中间件，不过正式环境下建议删除**setupProxy.js**，以免出现问题。
## 怎么安装？
1. 将api目录下面的3个php文件拷贝到相应目录
2. 终端进入项目当前目录，运行**npm install**，安装React的依赖文件
3. 按照上文一些技术细节所提的内容，进行修改
4. 将build生成的代码拷贝到服务端上，即可通过浏览器访问