基于Web的智能设备监控管理平台设计研究

谭俊伟，谭瑞鑫，黄红桥，陈明

(1.冷水滩区财政局，湖南永州 425000；2.国网湖南电力有限公司，湖南长沙 410000)

0 引言

随着中国国产化芯片及操作系统的进一步推进，越来越多的国产物联网设备出现在了当下，给未来国内物联网发展带来了无限可能。而随着这些嵌入式设备的不断增多，如何对其进行有效的集中化的监控与管理成为摆在时代面前的一大难题。例如在国网湖南电力公司永州分公司，有许多电表计量的嵌入式设备及为无人机提供算力平台的算力服务器需要远程控制及维护，但因缺乏有效的监控与管理平台，这往往成为职工们比较头疼的问题。这是由于现如今普通电脑一般使用的为Windows 操作系统及X86 或X64平台，与嵌入式设备及提供算力的服务器一样既跨越了操作系统，亦跨越了架构体系，要直接对其核心数据进行监控以及对其管理十分不便。因此本文探索并研究了一种较为高效的管理方式，即基于Web开发的智能化设备监控管理平台。该平台前端使用多个H5新特性以及Vue框架开发，界面美观，性能优越，交互体验优良。服务端采用跨平台编程语言Golang[1]进行开发，Web 接口遵循RESTFUL API 形式，性能优越且在不同指令集的计算机上，如LoongArch（龙芯）、MIPS（龙芯）、ARM 系列（飞腾、英伟达等）、X86(Intel)等，且搭载不同的国产操作系统，如：银河麒麟、中标麒麟[2]、UOS 等均可运行。该平台的最大优势是在不同操作系统上，仅须通过浏览器即可访问到数据管理平台，并对企业内网中所有Linux 类计算机设备进行监控与管理，无须在客户端搭建复杂的环境。将环境搭建工作交于服务端，而服务端在批量化生产时使用硬盘母盘便可实现批量化生产。从而客户端无须搭建复杂的环境，从而最大程度方便用户直接使用本平台。即便是用户临时需要更换电脑进行操作，只须将已存储的数据以文本格式导出后再在新客户端中导入即可，大大降低了客户端的程序依赖。

1 系统设计

1.1 设计思路

本系统客户端设计核心是希望抛弃一切环境搭建，仅须使用Chrome类内核浏览器便能访问到设备监控平台并对所有设备进行可视化的监控及远程管理。基于此，本文在技术架构上应用采用B/S 架构进行开发，客户端部署在用户浏览器，数据库亦存储在B 端中，直接使用html5新特性[3]中的localstorage 存储到本地浏览器，且加入一键导入与导出功能。每一台被管控的设备作为服务端，这样一来客户端的运行环境将不需要被搭建，而服务端在大多数情况下亦只需要搭建一次环境。软件以及Web terminal终端服务中间件可部署在中间服务器上，供多个客户端同时使用。本文中所有服务端应用均使用Golang语言开发、编译，得益于Golang语言优越的跨平台性，编译时便可指定平台与指令集，可直接编译为对应平台、指令集的二进制文件，且无须搭建对应系统环境。经测试，在部署到国产操作系统过程中，无须额外搭建环境，即可直接运行可执行二进制程序，总架构图如图1所示。

图1 总框架图

使用Webterminal技术可实现网页端执行SSH，网页输入命令后通过WebSocket 技术传输到terminal 服务端并通过中间服务端将对应SSH 指令转发到对应的服务器以实现WebSSH以方便用户在客户端使用。

使用Websockify 将Linux VNC 服务端口（通常为5900 或5901)转发到Web 开源框架noVNC 上，noVNC框架内部通过WebSocket 与VNCServer 建立通信。从而实现用户在浏览器中即可使用VNC，大大提高了用户使用效率。

1.2 客户端Web设计

客户Web 端使用前后端分离开发思想，采用Vue3框架进行开发，使用Element UI作为视觉设计框架，使用百度Echarts绘图插件进行绘图并实现数据仪表可视化。因服务端数据库环境不一定可以确保搭建，因此数据持久化存储的工作交由Web 端完成，本文研究中Web端使用H5新特性中的localstorage 技术将数据持久化存储到浏览器内部。而考虑到用户可能会定期清除浏览器缓存以及可能需要将这些设备交由其他同事进行后续管理等难题，设计了一套可以将数据导出的方案，具体方法是数据导出过程中使用JSON 作为标准格式导出为文本，当用户需要再次将数据导入时，将文件上传到Web 端后会通过JSON 解析器将数据还原并再次存储至浏览器localstorage 中，其后浏览器自动刷新并渲染界面。

在Web 端中，为提高URL 路径的可读性，引入了Vue-router 插件，并使用H5 history 作为路由模式，配合Nginx伪静态规则生效。其URL美观且响应速度优越。在与后端通信方面，本文研究中高度封装了fetch库，通过异步请求与Golang服务端进行通信。Web端架构图如图2所示，其中高度封装fetch 直接与Golang服务端通过RESTFUL API约定格式进行通信，常见请求方式包括GET/POST/DELETE/PUT 等。如向被控端上传文件通过POST 方式请求进行，使用GET 请求获取设备当前状态信息、内存信息等。

图2 Web端架构图

1.3 被控服务端设计

被控设备服务端采用跨平台编译型语言Golang进行开发，选用Golang的主要原因在于其跨平台性好且编译后性能优越，无须依赖其他运行环境，同时编译后占用资源小，对计算平台及嵌入式设备影响略微，同时相对于C、C++不需要将代码移植到对应平台再次编译，只需要将本机编译到对应平台即可，极大地提升了开发效率以及降低了移植、开发成本。且Golang 拥有多个高度封装的HTTP 库，数据库处理方面有多个ORM操作模型，极其适用于Web后端开发。本文研究中采用Gin 框架部署HTTP 框架服务，通过命令行参数绑定端口，出厂时可以通过写开机启动命令启动程序，通过配置文件即可直接修改部署端口等信息，大大提高了程序的灵活配置性。

由于本文所研究的设备管理主要为嵌入式设备，一般都搭载类Linux系统，如国产银河麒麟、中标麒麟、UOS等。因此被控设备端中，Golang 开发的程序通过Linux系统调用获取诸如CPU、内存、磁盘等信息，同时通过Gin框架监听HTTP 80端口并对外暴露，将信息暴露到接口的同时监听开、关机等常规管理类操作。为了提高并发量，避免多个设备同时请求造成资源占用率过高，所有设备信息相关数据并不是请求接口时进行更新，而是创建一个线程在一个周期事件内进行更新，如本文中所研究的应用周期更新时间为10秒，当访问接口时，仅需要读取存在内存中的信息返回即可。为了保证数据的一致性，本文采用线程锁保证数据可以同步被修改，保证不会出现上一次获取的CPU数据可能与本次获取的内存信息同时返回给Web端。

嵌入式服务端具体工作流程图如图3所示。

图3 嵌入式服务端流程图

1.4 代理VNC设计

代理VNC[4]程序基于开源方案——noVNC进行搭建，noVNC项目的目的是取消VNC client，直接通过浏览器访问VNC。其工作原理是通过由Websockify 来代理访问（基于Websocket)VNC server来达到client的Web 化，而Web 端与Websockify 的通信则采用Web-Socket 来实现。VNC server 配置仍需保留，并没有修改。大多数国产化操作系统已包含VNC服务端，如果没有VNC 客户端可以在母盘中安装一个类似于x11vnc 的工具便可实现远程化管理。代理VNC 处理的始终是TCP流量，因此只需在被控服务端额外运行一个Websockify即可。

但noVNC 原版方案提供的Websockify 由nodejs或Python 进行开发，均为解释型语言，需要搭建对应的编程语言环境才能得以运行，而由于直接需要对系统本机进行控制，因此不适用于采用docker解决该问题，那么如需搭建环境则要安装Python 或者nodejs 的开发环境。若被控端不能连接互联网，由于nodejs 与Python离线安装库非常烦琐，因此这一流程将十分不便利，不利于程序的快速部署，因此与本文基本设计理念相悖。由此，本文研究并开发了一套基于Golang版本的Websockify。该版本Websockify的特点是可静态编译为Windows、Mac 以及Linux 版本，并且支持多种CPU 架构的运行，以便于程序的部署，而无须额外搭建对应编程语言的环境，大大减少工作量并减少程序的不适应性。同时，Golang 支持多线程，从而使程序可以同时支持收与发，且语法简单，性能优良。本文所研究基于Golang 开发的跨平台型Websockify 核心代码如图4所示。

图4 Websockify核心代码

1.5 Web terminal设计

Web terminal的作用是用户使用Web端即可直接连接到被控设备端SSH[5]，主要用于通过SSH管理被控端。客户端通过采用Vue 框架进行单页开发。使用Websocket 将用户在Web 交互端输入指令发送至Golang开发的SSH服务端，其服务端既部署于中间服务端抑或是目标机器（需Linux内核类操作系统），至于部署在何处取决于内部网络架构的规划。Web terminal服务端程序获取到Web用户传输来的SSH指令后通过系统调用的方式转发至服务端所部署的服务器终端，终端使用SSH 与目标主机相连通。连接成功后通过WebSocket实时监听客户端输入信息与被控端反馈信息（通过服务端SSH转发），并实时进行转发操作和获取SSH运行结果。最后其结果再通过WebSocket将数据信息返回至Web客户端。从而实现客户端无须依赖本地环境便可连接被控端的终端服务，并可实现操作。Web terminal数据流转示意图如图5所示。

图5 Web terminal数据流转图

2 系统设计成果

2.1 客户端界面展示

在Web 客户端界面，如果已添加过主机，多台主机的数据汇总报表会展示在仪表中心，该界面可通过图表的方式直观化地看见之前所有已添加的主机。该图表系统会在后台依次请求被添加的计算机从而统计所有在线主机的CPU、内存等信息，同时求出总的CPU使用率、内存使用率信息并通过计算后最终绘制成如图6所示的图表，直观且较为美观。

图6 仪表中心界面

客户端网页对每一个服务器的单独添加、删除以及单独控制方式如图7所示。同时该界面可将所有服务器的连接数据进行导出与导入，其导出流程如图8所示，导入流程如图9所示。导入过程中需要上传之前导出的数据，上传磁盘上的数据后前端JS将会将数据从文本格式解析为JSON 格式，从而提取其中数组并覆盖存储至localstorage，因此会删除之前已有数据。导出过程则会将localstorage 中的数据以JSON 格式转化为文本格式，并以字符串的形式写入DOM 文本标签中，最后通过js触发浏览器下载文本文件至用户本地磁盘。

图7 添加、删除被控端界面

图8 导出流程

图9 导入刚刚导出的list.txt

在被控服务端安装VNCserver 后（本文中VNC server 使用x11vnc 作为演示），通过noVNC Web 端连接到被控服务端如图10所示（基于国产优麒麟操作系统），可流畅操作所有界面，且没有出现卡顿现象。并且在客户端无须安装任何额外环境，用户无须搭建额外的管理环境便可直接对所有嵌入式设备进行管理。不过值得注意的是，在同一时间段内，仅允许一个用户连接到VNC，这样的目的是保证不被多个用户同时操作导致出现不同步的情况。连接密码为VNC server所设定的密码，而非被控端自身账号密码。x11vnc 初始密码默认为空，因此无须输入密码，但是为了保证安全性，建议被控设备出厂时统一设定密码。

图10 通过noVNC连接到被控服务端远程桌面

2.2 被控服务端

被控设备端仅需一条命令即可启动：./可执行文件名，如图11所示，通过编译为二进制方式执行，启动方式极其简洁且不需安装额外环境。本图中启动过程通过命令行参数指定了监听的端口为80，由于80端口的特殊性，需要提权到root 执行程序以避免执行权限不足的情况。

图11 被控设备端的启动

考虑到被控设备端一般为嵌入式设备批量部署并应用，因此可将本程序放置母盘指定位置，并在/etc/rc.d/rc.local 路径将程序与命令行参数写入从而实现被控服务端程序的自启动流程，同时可通过系统磁盘母盘将应用与开机启动配置文件批量写入与部署。

3 结束语

总的来说，本文设计的智能化设备监控管理平台通过使用母盘在嵌入式设备出厂时将程序刷入服务端的做法，减轻了服务端部署环境的工作量，同时客户端也仅需使用浏览器即可监控与管理被控嵌入式设备。得益于浏览器H5的local storage特性将数据可持久化存储至用户设备中，并提供下载成文件的功能方便用户导入与导出，大大提高了用户管理的便利性与管理效率。同时通过Golang 作为服务端远程转发来自浏览器与其建立的WebSocket 中的SSH 信息，可在浏览器中直接使用SSH 命令行。除此之外，通过noVNC框架思想实现了在浏览器中可通过vnc远程控制被控端设备，极大地提高了客户端对被控端的管理能力。总的来说该系统的设计与应用为未来嵌入式设备的批量监控与管理提供了一个优秀的思路与开发设计理念。