（华自科技股份有限公司，湖南长沙 410000）

0 引言

计算机监控系统广泛应用于电力、水利、工矿等行业的自动化与信息化项目中，可实现设备状态监控、生产安全运行管理等功能［1-2］。根据近年来华自科技市场部的调研反馈，客户对于监控系统在Linux/Unix/Windows 中的跨平台使用有明确需求，因此跨平台计算机监控系列产品研发意义重大。

计算机监控产品开发主要分为人机交互与后台服务两部分。人机交互跨平台开发的主要方式有：①基于跨平台GUI 库的QT［3-4］、GTK［5］、wxWidgets［6］，或采用Java 的GUI 工具包［7］。但这些方式都有一定局限性，如GUI 库受制于样式库，不完全与目标系统原生样式一致，使用Java语言开发的应用则需要在客户端安装运行环境等［8-9］。②基于Web 的方式［10］。该方式主要分为两种：一是采用可通过浏览器直接访问的B/S 模式，但涉及到设备交互、跨域等问题，且工业现场对计算机监控系统的专业性、稳定性和安全性有严格要求；二是利用嵌入浏览器内核的集成器开发的产品，集成器包括CEF3、Electron 等，市面上使用两者开发的成熟产品有Visual Studio Code、Atom 等上百种。

方案采用基于Web 的方式二开发，即通过封装CEF3（Chromium Embedded Framework 3）框架形成独立的应用程序。Chromium Embedded Framework（CEF）是一个基于Google Chromium 项目的开源Web browser 控件，支持Win⁃dows、Linux 与Mac 平台，除提供C/C++接口外，也有其它语言的移植版。CEF3 是基于Chromium Content API 的多进程实现的，支持HTML5 的特性，使用最先进的V8 JavaS⁃cript 脚本解析引擎，其性能表现类似于Google Chrome［11］。考虑CEF3 具有跨平台样式一致、性能优异、配置灵活等优势，本方案将CEF3 作为跨平台开发的优先选项。

该选项不仅能满足监控系统作为工业领域专用平台独立、安全运行的要求，既能保留原系统中稳定的底层通讯，又能充分利用互联网中海量的前端资源［12-13］。本文主要对人机交互开发和CEF3 跨进程通信（IPC）的设计思路及关键技术进行论述，以期为计算机监控系统的跨平台开发提供有益经验。

1 计算机监控系统设计

计算机监控系统是以数据采集、传输、存储及管理为基础，通过运用通信、计算机网络、信息采集与处理等技术，建设以闸站监控、工情监测、自然环境数据监测等为核心业务的监控作业平台。图1 为原监控系统运行环境设计，列出了人机界面与支撑平台服务各组成部分及其之间的层次关系。

Fig.1 Human-machine interface and basic platform service图1 人机界面及基础平台服务结构

计算机监控系统采用前后端独立开发的方式，前端是指采用HTML5 和JavaScript、CSS 等Web 技术开发的页面，后端是指采用C++开发的基于CEF3 的多进程主程序框架。利用CEF3 的多进程可实现高效的HTML 页面渲染及JavaScript 脚本解析，同时后端主程序可调用原C++的基础功能库，进行数据通讯、消息交互及底层系统操作，连接前后端的是一系列标准的通信接口。

2 计算机监控系统开发关键技术

2.1 CEF3

CEF3 进程分为4 种类型，具体关系如下：

Fig.2 CEF3 Processes图2 CEF3 进程关系

Browser 进程：负责创建与管理其它进程，实现主程序窗口创建、管理、消息处理、网络访问等。

Render 进程：负责Blink 渲染和JavaScript 脚本解释执行、DOM 解析等。默认进程模型会为每个站点创建一个“render”进程。

GPU 进程：负责硬件加速。

Pepper Plugin 进程：处理PPAPI 插件进程。

进程之间采用IPC 通信机制，通过开放的回调接口实现双向通信。

2.2 实时监控画面与统计报表

画面和报表是一个HTML5 标准的页面文件，画面由多个图元组成，图元由JavaScript 语言加以描述，在HTML5的Canvas 对象上输出图形。图元所关联的数据信息则通过前后端通信进行获取，在实时监控画面中根据数据的实时变化改变图元状态信息，实现监控画面的动态变化。

Fig.3 The code structure of the front-end interface file图3 监控画面文件内容

图元分为基本图元、组合图元、功能图元等几类，基本图元由2D 的点、线、面和3D 的球、立方、圆柱等多个类型组成；组合图元由多个基本图元组合而成；功能图元用于实现特定功能，图形组成与功能逻辑相对复杂，基于基本图元与功能代码加以实现。

2.3 前后端通信

计算机监控系统中前后端之间的通信方式主要分为4种：本地http scheme 处理器、消息处理器、JavaScript 绑定以及PPAPI 插件接口。通信一般是通过回调异步进行的，从而能更快地响应页面刷新。

2.3.1 本地http scheme 处理器

通过修改浏览器默认的http scheme 处理器实现，可拦截http 请求，生成自定义http 请求并返回。监控系统中采用该方法获取实时数据、画面、报表等内容。

自定义scheme 处理器HzSchemeHandler，实现Pro⁃cessRequest 接口，在发往本地的http 请求中，按照接口名称和参数用C++程序实现其功能，然后在JavaScript 页面中通过Ajax 调用post 一个http 请求，发送http 请求到浏览器即可。

2.3.2 消息处理器

消息处理器继承CefMessageRouterBrowserSide：：Han⁃dler 类，该类有两个接口OnQuery 和OnQueryCanceled。要处理消息，至少要实现接口OnQuery。由于是异步调用，也可以实现OnQueryCanceled 接口，根据query_id 处理取消调用后的善后工作。依据参数，在消息处理函数中进行处理。

执行成功后，还能给JS 前端返回字符串。使用该方法可实现窗口最大化、最小化、页面放大、缩小、复原、打印等。

在函数ClientHandler：：OnAfterCreated（CefRefPtr＜Cef⁃Browser＞browser）中创建router，并注册添加消息处理器。可以一次添加多个消息处理器，但只要有一个消息处理器响应了OnQuery 函数，则不会再往下遍历。所以在消息处理器中，对于不匹配的内容应有相应反馈。

2.3.3 JavaScript 绑定

在CEF 中，render 进程负责V8 引擎解释执行JavaS⁃cript 的过程。与JS 执行相关的回调接口为CefRenderPro⁃cessHandler，该接口可通过CefApp：：GetRenderProcessHan⁃dler（）获取。browser 进程与render 进程之间通信都是异步回调。

最简单的JS 执行方法是使用CefFrame：：ExecuteJa⁃vaScript（）执行，该函数在browser 和render 进程中都可以安全地执行，不需要任何JS 上下文。另一种方式为Win⁃dow 对象绑定，JavaScript 中的Window 对象作为全局对象，可被JS 共享。例如在系统中一次性读取配置文件，并设置Windows 对象，形成一种数据共享机制。

2.3.4 PPAPI 插件接口

PPAPI（Pepper Plugin API）是Chrome 提出的全新插件机制，运行在Chrome 浏览器的沙箱环境中。在监控系统中的其中一例是与某视频插件进行交互，实现登录、视频控制等功能。

可信的PPAPI 组件可以平台动态库的形式由浏览器直接加载，如内置的Flash 组件、PDF 组件等，或通过指定命令行参数register-pepper-plugins 进行加载。JS 通过挂接插件的message 事件接收后台（C/C++）发送的通知，同时可通过调用插件的postMessage 给后台发送消息。

3 系统应用及其效果

该系统在某水电站集控中心及操作员工作站投入使用，操作员工作站采用某国产品牌的Linux 64 位操作系统，实现了具备实时2D/3D 画面监控、报表查询、实时/历史告警等功能的人机交互界面，支持JS 控件，以及授权检测、系统设置、遥控五防等功能。支持3D 模型操控的实时监控画面如图4 所示。

该监控系统在以下方面取得了突破：①将多用于互联网产品的CEF3 框架尝试应用于工业化产品；②成功验证了基于CEF3 的跨平台产品基本满足小规模的工业场景应用需求；③人机界面采用HTML5 应用实现，通过CEF3 的集成使系统具有良好的跨平台性；④人机界面利用组件化设计思想，各类组件实现即插即用，体系架构灵活，扩展性强，新功能可快速集成到人机系统中；⑤针对不同操作系统，主程序只需打包对应的CEF 库编译文件即可，采用预编译的库文件可避免手工编译CEF3 带来的巨大工作量。

4 结语

Fig.4 Interactive dynamic user interfaces for real-time data display and control图4 Linux 监控组态实时画面

本文论述了基于CEF3 开发的跨平台计算机监控系统基本框架、思路及关键技术，完成了如下工作：①利用CEF3 与HTML5 开发技术，研究并设计了一种跨平台的人机界面方案，几乎可替代原桌面程序开发内容，验证了通讯效率可满足工业标准，并通过工程实践证明了跨平台监控设计方案的可行性；②封装CEF3 的监控平台既利用了WEB UI 开发的优势，也保证了监控系统的独立性、专用性及安全性；③尽量利用开源工程实现计算机产品安全可控，符合创新潮流；④移动端监控平台亦可采用封装浏览器内核的形式开发APP 应用，实现从桌面到移动端的跨越。

虽然CEF3 有不少优势，但仍存在一些缺陷，如安装包较大、第一次启动较慢、平台中一些接口或功能尚未完全兼容等，有待后续进一步完善。