基于SVG与WebSocket的SCADA Web发布系统设计

徐苏君　高翔

关键词：SCADA系统；SVG动态图元解析；实时刷新；WebSocket 通讯；Web 发布系统

中图分类号：TP391 文献标识码：A 文章编号：1006-8228（2023）11-116-05

0 引言

SCADA 系统是一个广泛应用于工业自动化领域的监视和控制系统，它通过实时采集和处理各种传感器及其设备的数据，帮助管理人员/操作员监视和控制生产和工艺过程[1]。然而传统SCADA 系统存在升级维护困难、系统使用便捷性差、系统扩展性和灵活性不够等问题。随着Web 信息技术的发展，SCADA 系统的Web 應用在工业自动化领域也愈发广泛，通过SCADA Web 发布系统[2]，将SCADA 系统中的实时运行数据、告警数据、监视画面在Web 系统中发布展示，使得相关管理人员方便快捷地在不同终端浏览器中实时监视生产运行状况，为Web 系统应用管控一体化打下基础。SCADA 系统的实时监视画面有画面复杂度高，实时数据量大，刷新频率快等特点，SCADA 在Web 上不能只实现静态画面展示，对图形画面的加载速度、刷新频率和数据同步都提出了高要求。

本文设计了一套基于SVG 和WebSocket 的SCADA Web 发布系统[3]，通过SVG 嵌入html 的方式实现SCADA 画面在Web 端的展示，并提出了基于Redis 内存库的SVG 动态图元解析预处理机制[4]与基于WebSocket 的实时计算推送机制。通过这两个技术结合，不仅实现传统SCADA 系统在Web 端的发布应用，而且在系统稳定性、流畅性、实时性等方面满足自动化领域行业应用的要求。

1 系统总体设计

1.1 系统总体架构设计

目前既有系统在基于SVG图形Web系统发布技术中，主要有以下两种方式实现SVG 图形展示和刷新：

⑴ Web 系统提供JS 文件，在浏览器加载SVG 图形文件时，前端解析画面图元[5]，并定时通过Ajax 方式请求服务端，获取图形文件所需要的实时数据，再由前端JS 进行图形的计算与渲染；

⑵ SVG 图形文件解析全部由服务端完成，并定时从实时数据库/关系数据库获取图形所需要的最新数据，再根据解析的内容进行实时计算和结果填充，最终将计算结果返回至浏览器端进行图形渲染[6]。

以上方式⑴中，JS 是脚本语言，进行SVG 动态图元解析和计算的运行速度较慢，当SVG 画面中动态图元数量较多时，会造成浏览器卡顿及加载时间过长；当多个不同用户同时打开同一张SVG 画面时，存在前端重复解析图元的情况。方式⑵中，需要定时在服务器端对所有用户请求的SVG 图形进行解析计算，当用户数量较多且分别查看不同SVG 画面的时候服务器需要在同一时间内处理大量的SVG 画面请求，服务器消耗资源较高，且循环计算的间隔时长不稳定，可能导致不同用户在查看SVG 画面的体验不好。并且每个图形在一个定时刷新周期动作中，这两种方式都需要经过从数据库中读取数据，然后以SVG 图形为单位进行一次动态图元实时计算过程才能完成图形渲染，这在效率上有一定影响。

为了解决以上弊端，本文在系统架构层面重新进行设计，并针对以上两种方式存在问题进行了改进和优化。系统总体架构设计如图1 所示。

本设计将SVG 图形解析和渲染刷新分别放在不同层面去处理，将SVG 文件解析和实时计算放在服务层，并提出基于Redis 的动态图元预解析处理机制，解决打开包含大量动态图元的SVG 时耗时过长和浏览器卡顿的问题。将SVG 渲染和实时刷新放在应用层，通过WebSocket 机制，由原轮询方式改为消息推送机制，服务端根据当前打开画面，定时推送画面所需实时渲染数据，提高画面刷新效率和性能。在此基础上，结合JAVA 缓存技术，避免频繁读取内存库操作，进一步降低网络延迟带来的影响。

2 基于Redis 内存库的SVG 动态图元解析预处理设计

2.1 SVG 动态图元解析预处理设计

由于SCADA 系统的画面监视系统对实时性和稳定性有着很高的要求，如何高效完成SVG 图形解析将直接影响整个系统的执行效率，为此文本研究了一套将SVG 动态图元解析和Redis 内存库相结合的方式，每次用户访问SVG 图形的时候，通过解析流程对当前访问的SVG 图形进行处理并保存相应结果，后续用户打开相同SVG 图形时无需重复解析，直接从Redis 中获取解析结果用于内容计算。采用这种机制后，无论是访问SVG 数量较多，还是单个SVG 画面包含图元复杂的情况，系统都可以在很短时间作出响应。解析预处理核心机制主要包括以下内容。

⑴ 对当前访问的SVG 图形与Redis 中版本信息进行对比。

⑵ 若版本信息对比一致，则从Redis 中获取该图需要使用的图元引用元素和图元内容，加入java 二级缓存，用于后续计算使用，减少每次从Redis 获取图元和计算公式的开销，进一步提升系统性能。

⑶ 若版本信息对比不一致，则对该SVG 文件进行解析操作，处理对象包括版本信息、图元模板、计算表达式[7]、参数定义、规则等。采用QLExpress[8]作为计算表达式解析与运算工具，QLExpress 是一种动态脚本解析引擎，用Java 语言来编写、解释脚本，其将耗时长的计算脚本编译过程缓存在本地，运行时临时变量的创建使用缓冲池技术实现，能有效提高运算性能。解析的结果见文本2.2 章节详细处理流程如图2 所示。

2.2 SVG 解析结果存储设计

在上一个章节对用户访问的SVG 图形进行了解析处理，如果以每张SVG 为单位进行存储，那么不同SVG 存储结果中会出现大量重复的图元模板解析结果，这是因为不同SVG 图形会引用相同的图元和参数定义。

为了减少存储容量及提升计算性能，本文提出以SVG 中图形基本渲染规则（symbolId+paramIds）为key进行分组，从而实现将具有相同图元模板元素和参数定义的useId，SVGId 进行聚合，以减少后续针对每个SVG 图形的重复图元计算量。同时在处理完成后会分别存于Redis 内存库和Java 本地缓存中。前者用于后续打开对应的SVG 图，可以快速获得该图包含的图元模板、图元引用元素和图元模板计算公式参数；后者用于本次画面的实时计算渲染。

通过预解析处理与结果存储设计相结合技术，使得对于每张SVG 画面，只有在系统启动后首次被访问或SVG 图形文件发生变化的情况下才进行解析处理操作，后续的不同用户、不同计算机再次访问该SVG画面时都可以基于解析完成的图元模板和计算公式快速获得计算参数，并完成结果计算。相较于既有系统的前端JS 解析或后端同时解析提高整体运行效率，有效缩短用户打开SVG 画面的等待时间。

3 基于WebSocket 的画面实时刷新机制设计

3.1 画面刷新机制设计

传统监视画面的实时刷新大多采用的是轮询的方式，由画面定时发起请求，向服务器获取最新的数据，然后进行画面更新。这种方式适合画面相对简单、低并发，小数据量的场景，而SCADA 系统的画面监控实时性和稳定性要求很高，单张SVG 图形包含成百甚至上千图元，画面实时数据的变更周期也在秒级左右，随着访问量及单个画面需要展示数据量的提升，或者对刷新频率有较高要求的时候这种方式后端服务器需要在同一时间处理很多请求，这导致系统的响应时间变长。而如果画面数据达到秒級刷新，那么传统轮询的方式可能导致产生丢失部分断面数据的情况，以致丢失重要画面数据。

为了解决以上问题，本文研究设计了基于WebSocket[9]的实时计算推送机制，以保障SVG 画面在Web 系统的实时性和稳定性。

本文提出的画面刷新机制以SVG 动态图元预解析为前提，当大量用户打开不同SVG 画面时，系统只需以<用户id-图号id>为映射关系记录系统当前需要进行计算和推送的图形信息。画面刷新机制核心内容如下。

⑴ 将用户信息和访问的SVGid注册进WebSocket客户端主题，用于向服务端发送用户和SVGid 信息以及接收服务端推送的渲染结果渲染浏览器画面。

⑵ 服务端WebSocket 负责接收用户打开的SVG画面，并过滤不同用户打开的相同画面，获取当前被打开的所有SVGid 信息。

⑶ 根据SVGid 从Redis 中获取SVG 画面中使用的symbol 图元解析结果及计算表达式需要参与计算的参数以及引用图元元素use。

⑷ 将目前所有参与计算的图元添加至定时计算任务（见章节3.2），每秒定时计算渲染结果，并将结果和对应的userid、SVGid 通过WebSocket 推送至所有订阅对应图号的用户画面。

通过以上设计，采用WebSocket 与预解析相结合的技术方式，使得系统画面的渲染刷新工作从单个SVG 画面的<访问->解析->计算->返回->渲染>转变为<访问->统一计算->定向推送->实时渲染>，极大地提高了系统的响应时间和刷新频率。

画面刷新详细流程设计如图3 所示。

3.2 定时计算处理设计

定时计算任务采用自定义函数实现，计算过程如下：

首先服务端每间隔一秒批量从Redis 中读取所需计算图形的参数值、图形定义、公式定义、参数定义放至内存中；然后依次计算所需刷新的图形，从内存中读取每张图计算需要的obid、otype、atype、链接关系，并寻找对应的属性值。进行一次全图计算，得出渲染指令，并推送至Web 前端。

为了减少数据库读取操作，进一步提升计算速度，在定时计算核心过程中提出三大优化思想：

⑴ 虽然内存库的读取速度较关系型数据库更快，但是频繁读取仍存在网络延迟的情况，对于秒级刷新的监视画面来说依然会影响展示效果。本文采用服务端提前批量读取Redis[10]数据技术，周期计算前读取所需计算图形的参数值、图形定义、公式定义、参数定义等放至内存（HashMap）中，周期计算时直接从内存中读取计算。

⑵ 充分利用Java 缓存技术，通过Java 缓存所有正在刷新的图形集合（SVGID），在定时计算时仅需取这些图形做计算即可。

⑶ 每个计算周期减少相同图元、相同参数的重复计算量，通过HashMap 缓存相同图元id、参数的计算结果，遇到不同图形引用相同图元参数的情况可以直接返回计算结果。

4 结束语

本文设计的基于SVG 与WebSocket 的SCADAWeb 发布系统满足了用户通过Web 平台监视生产运行情况的需求，同时保证了系统画面的实时性和稳定性。提出了基于内存库的图元解析预处理机制和实时计算推送机制。无论是SVG 图形访问较多或是SVG 画面图元数量庞大的情况，该系统都能有效减少画面加载等待时间，保障系统的流畅性和实时性，提高用户使用体验。

本设计中关于WebSocket 实时推送方面还存在进一步优化空间，本文在对每张SVG 图形进行实时计算时是针对该图所引用图元进行计算并推送至前端画面进行渲染，虽然避免了重复图元的重复计算，但是没有变化的图元数据依旧统一推送至前端进行渲染，如何做到通过对不同SVG 图形引用的图元推送变化数据将进一步减少网络带宽，提高系统响应时间和渲染效率。

综上所述，该设计可以有效地支撑传统SCADA系统在Web 系统的发布技术要求，满足用户在Web 信息系统实现SCADA 画面实时监视的性能需求和功能需求。该设计的实现也将促进SCADA 系统在Web 系统的普及率、效率和可靠性，促进工业自动化领域的创新和发展。