陶颍军 胡秋玲 崔丽艳 卓怀忠

摘 要：本文基于已有配网主站监控系统提出一种基于WebAssembly的配网主站Web发布系统，通过将配网主站画面文件解与数据IO模块编译为wasm格式的字节码文件供浏览器加载，启动WebWorker数据IO线程来处理实时数据更新，同时通过WebSocket协议实现浏览器端与实时数据客户端的数据交互，主线程接收到更新通知后动态更新Web发布画面。通过测试发现，相比于传统的Web发布方式能够有效提高系统的实时性和人机交互友好性。

关键词：Web发布;WebAssembly;实时性;友好性

中图分类号：TM76 文献标识码：A

0 引言

随着计算机、网络通讯技术的飞速发展与广泛应用，配网主站监控方式由过去的有人值班过渡到无人值守，由过去的单纯调度运行转变为调度运行、生产、精英管理等多种运用，在配网主站监控中增加Web浏览功能变得越来越迫切，而且具有广阔的市场前景。

目前国内基于局域网的配网主站监控系统大都是基于客户机、服务器（C/S）结构设计并由语言开发的，Web发布系统中的画面文件多来自于监控系统中组态模块，而Web发布系统中浏览器端的画面文件处理多采用JavaScript语言，数据交互方式多采用基于jsp平台或者PHP服务器脚本方式进行开发，与配网主站监控系统环境均存在通信接口差异与语言差异，由此导致监控系统已有模块无法复用，数据解析与通信交互效率低下等问题，因此针对配网主站监控系统数据产生快、交互量大、实时性强等特点，研究WebAssembly技术在Web发布系统中的应用方法具有非常重要的意义。

1 字节码技术

WebAssembly（简称“WASM”）是一种以安全有效的方式运行可移植程序的新技术，主要针对Web平台。它是一种可以使用非JavaScript编程语言编写代码并且能在浏览器上运行的技术方案。它可以用高级语言编译出字节码放到WebAssembly虚拟机中运行，各浏览器厂商根据WebAssembly字节码标准规范实现虚拟机。WebAssembly格式是一种新的字节码格式，和JavaScript需要解释执行不同的是，WebAssembly字节码和底层机器码很相似，可快速装载运行，因此性能相对于JavaScript解释执行大大提升。相对于JavaScript，WebAssembly有三个优点。（1）体积小。由于浏览器运行时只加载编译成的字节码，一样的逻辑比字符串描述的JavaScript文件体积小很多。（2）加载快。由于文件体积小，再加上无需解释执行，WebAssembly能更快的加载并实例化，减少运行前的等待时间。（3）兼容问题少。WebAssembly是非常底层的字节码规范，制定好以后很少变动，就算发生变化，只需要从高级语言编译成字节码过程做兼容。

2 系统设计

按照配电主站系统信息Web发布子系统的功能需求以及运行要求，系统的功能步骤主要分为主站客户端画面编辑、字节码模块构建、画面内容展示与Web发布数据访问，具体的功能技术架构如图1所示。

3 具体发布流程

3.1 发布画面制作

配网主站系统中画面文件都通过专用组态编辑工具制作完成，画面内容按照自定义xml文件格式存储，具体发布内容如图2所示：

3.2 字节码模块构建

配网主站系统中类似主接线图等内容复杂画面发布时候，在Web浏览器加载会存在画面解析加载速度过慢的问题，而通过将配网主站系统中与发布系统相关的画面文件解析与数据IO等核心功能模块进行重新构建并加载WebAssembly模块，从而能够实现浏览器端动态调用文件解析与数据IO模块的目的，能够有效提高解析速度。

利用Emscripten编译器工具将文件解析与数据IO模块编译为wasm格式的字节码文件，详细步骤包括：

（1）文件解析与数据IO模块中增加Emscripten构建工具所提供EMSCRIPTEN_BINDINGS（）代码块来导出API接口;（2）使用Emscripten构建工具所提供的emcc编译器将文件解析与数据IO模块编译生成为对应的.wasm文件与.js文件;（3）使用JavaScript胶水代码加载所生成js文件到网页应用中，调用所导出API接口来实现文件解析与数据IO功能。

3.3 画面调用

利用HTML5所提供API打开配网主站画面文件，文件内容由模块进行解析后，解析结果存入虚拟文件系统供后续画面渲染时使用，其步骤主要包括：

（1）利用HTML5所提供FileReaderAPI接口读取本地存放配网主站画面文件，生成ArrayBuffer类型对象;（2）将ArrayBuffer对象通过模块API接口参数传入文件解析模块，在模块中转换为Qt中对应QByteArray类型对象;（3）通过Emscripten构建工具所提供的FS.writeFile方法将解析的图元属性结果存入虚拟内存文件系统进行缓存;（4）浏览器主线程负责画面渲染，在画面渲染时通过读取缓存文件来获取画面内容，图形绘制仍然使用传统的JavaScript来实现。

3.4 发布数据访问

利用WebSocket网络协议实现浏览器与数据客户端之间的数据交互，其步骤主要包括：

（1）浏览器端由WebWorker控制器启动WebWorker数据IO线程用于获取实时数据及下发控制数据;（2）数据IO线程调用数据IO模块中API与数据客户端采用WebSocket协议进行数据交互，其中数据IO模块主要功能借助Qt所提供QWebSocket进行实现;（3）数据IO线程定期轮询缓存图元属性内容，获取页面所有关联动态数据后向数据客户端发送数据更新请求，实现浏览器画面周期性更新;（4）数据客户端同样可以定期轮询实时数据变化，发现数据更新则主动推送变化数据到数据IO线程，从而实现浏览器画面变化性更新;（5）浏览器主线程监听画面图元控制操作，将控制数据交由数据IO线程下发至数据客户端，同时暂停发送周期数据更新请求至控制命令发送完成;（6）WebWorker控制器负责数据IO线程与主线程通信，當实时数据客户端有数据刷新时，WebWorker线程通过一个Promise将实时数据发送给主线程，主线程获取实时数据后设置画面图元动态属性，更新配网主站画面显示。

4 结语

本文介绍了一种基于WebAssembly的配网主站Web发布系统，通过利用浏览器所提供的WebAssembly技术与原生支持的WebSocket网络协议，在浏览器显示画面文件时以字节码方式调用文件解析与数据IO模块，开辟虚拟文件系统用于缓存文件解析结果及实时数据更新内容，在WebWorker线程中实现与数据客户端的双向交互，相比配网Web发布系统中传统实现方法，能够有效提高画面加载与动态刷新速度，具有广泛的工程应用价值。目前该系统已经在Chrome、Firefox、Safari、Edge等多款支持Webassembly技术的主流浏览器上成功应用，经过测试运行稳定，符合预期要求。

参考文献：

[1]柴树杉，丁尔男.WebAssembly标准入门[M].人民邮电出版社，2018.

[2]于航.深入浅出WebAssembly[M].电子工业出版社，2018.