基于SVG與WebSocket的SCADA Web發(fā)布系統(tǒng)設(shè)計(jì)

徐蘇君　高翔

關(guān)鍵詞：SCADA系統(tǒng)；SVG動(dòng)態(tài)圖元解析；實(shí)時(shí)刷新；WebSocket 通訊；Web 發(fā)布系統(tǒng)

中圖分類號(hào)：TP391 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1006-8228（2023）11-116-05

0 引言

SCADA 系統(tǒng)是一個(gè)廣泛應(yīng)用于工業(yè)自動(dòng)化領(lǐng)域的監(jiān)視和控制系統(tǒng)，它通過實(shí)時(shí)采集和處理各種傳感器及其設(shè)備的數(shù)據(jù)，幫助管理人員/操作員監(jiān)視和控制生產(chǎn)和工藝過程[1]。然而傳統(tǒng)SCADA 系統(tǒng)存在升級(jí)維護(hù)困難、系統(tǒng)使用便捷性差、系統(tǒng)擴(kuò)展性和靈活性不夠等問題。隨著Web 信息技術(shù)的發(fā)展，SCADA 系統(tǒng)的Web 應(yīng)用在工業(yè)自動(dòng)化領(lǐng)域也愈發(fā)廣泛，通過SCADA Web 發(fā)布系統(tǒng)[2]，將SCADA 系統(tǒng)中的實(shí)時(shí)運(yùn)行數(shù)據(jù)、告警數(shù)據(jù)、監(jiān)視畫面在Web 系統(tǒng)中發(fā)布展示，使得相關(guān)管理人員方便快捷地在不同終端瀏覽器中實(shí)時(shí)監(jiān)視生產(chǎn)運(yùn)行狀況，為Web 系統(tǒng)應(yīng)用管控一體化打下基礎(chǔ)。SCADA 系統(tǒng)的實(shí)時(shí)監(jiān)視畫面有畫面復(fù)雜度高，實(shí)時(shí)數(shù)據(jù)量大，刷新頻率快等特點(diǎn)，SCADA 在Web 上不能只實(shí)現(xiàn)靜態(tài)畫面展示，對(duì)圖形畫面的加載速度、刷新頻率和數(shù)據(jù)同步都提出了高要求。

本文設(shè)計(jì)了一套基于SVG 和WebSocket 的SCADA Web 發(fā)布系統(tǒng)[3]，通過SVG 嵌入html 的方式實(shí)現(xiàn)SCADA 畫面在Web 端的展示，并提出了基于Redis 內(nèi)存庫的SVG 動(dòng)態(tài)圖元解析預(yù)處理機(jī)制[4]與基于WebSocket 的實(shí)時(shí)計(jì)算推送機(jī)制。通過這兩個(gè)技術(shù)結(jié)合，不僅實(shí)現(xiàn)傳統(tǒng)SCADA 系統(tǒng)在Web 端的發(fā)布應(yīng)用，而且在系統(tǒng)穩(wěn)定性、流暢性、實(shí)時(shí)性等方面滿足自動(dòng)化領(lǐng)域行業(yè)應(yīng)用的要求。

1 系統(tǒng)總體設(shè)計(jì)

1.1 系統(tǒng)總體架構(gòu)設(shè)計(jì)

目前既有系統(tǒng)在基于SVG圖形Web系統(tǒng)發(fā)布技術(shù)中，主要有以下兩種方式實(shí)現(xiàn)SVG 圖形展示和刷新：

⑴ Web 系統(tǒng)提供JS 文件，在瀏覽器加載SVG 圖形文件時(shí)，前端解析畫面圖元[5]，并定時(shí)通過Ajax 方式請(qǐng)求服務(wù)端，獲取圖形文件所需要的實(shí)時(shí)數(shù)據(jù)，再由前端JS 進(jìn)行圖形的計(jì)算與渲染；

⑵ SVG 圖形文件解析全部由服務(wù)端完成，并定時(shí)從實(shí)時(shí)數(shù)據(jù)庫/關(guān)系數(shù)據(jù)庫獲取圖形所需要的最新數(shù)據(jù)，再根據(jù)解析的內(nèi)容進(jìn)行實(shí)時(shí)計(jì)算和結(jié)果填充，最終將計(jì)算結(jié)果返回至瀏覽器端進(jìn)行圖形渲染[6]。

以上方式⑴中，JS 是腳本語言，進(jìn)行SVG 動(dòng)態(tài)圖元解析和計(jì)算的運(yùn)行速度較慢，當(dāng)SVG 畫面中動(dòng)態(tài)圖元數(shù)量較多時(shí)，會(huì)造成瀏覽器卡頓及加載時(shí)間過長；當(dāng)多個(gè)不同用戶同時(shí)打開同一張SVG 畫面時(shí)，存在前端重復(fù)解析圖元的情況。方式⑵中，需要定時(shí)在服務(wù)器端對(duì)所有用戶請(qǐng)求的SVG 圖形進(jìn)行解析計(jì)算，當(dāng)用戶數(shù)量較多且分別查看不同SVG 畫面的時(shí)候服務(wù)器需要在同一時(shí)間內(nèi)處理大量的SVG 畫面請(qǐng)求，服務(wù)器消耗資源較高，且循環(huán)計(jì)算的間隔時(shí)長不穩(wěn)定，可能導(dǎo)致不同用戶在查看SVG 畫面的體驗(yàn)不好。并且每個(gè)圖形在一個(gè)定時(shí)刷新周期動(dòng)作中，這兩種方式都需要經(jīng)過從數(shù)據(jù)庫中讀取數(shù)據(jù)，然后以SVG 圖形為單位進(jìn)行一次動(dòng)態(tài)圖元實(shí)時(shí)計(jì)算過程才能完成圖形渲染，這在效率上有一定影響。

為了解決以上弊端，本文在系統(tǒng)架構(gòu)層面重新進(jìn)行設(shè)計(jì)，并針對(duì)以上兩種方式存在問題進(jìn)行了改進(jìn)和優(yōu)化。系統(tǒng)總體架構(gòu)設(shè)計(jì)如圖1 所示。

本設(shè)計(jì)將SVG 圖形解析和渲染刷新分別放在不同層面去處理，將SVG 文件解析和實(shí)時(shí)計(jì)算放在服務(wù)層，并提出基于Redis 的動(dòng)態(tài)圖元預(yù)解析處理機(jī)制，解決打開包含大量動(dòng)態(tài)圖元的SVG 時(shí)耗時(shí)過長和瀏覽器卡頓的問題。將SVG 渲染和實(shí)時(shí)刷新放在應(yīng)用層，通過WebSocket 機(jī)制，由原輪詢方式改為消息推送機(jī)制，服務(wù)端根據(jù)當(dāng)前打開畫面，定時(shí)推送畫面所需實(shí)時(shí)渲染數(shù)據(jù)，提高畫面刷新效率和性能。在此基礎(chǔ)上，結(jié)合JAVA 緩存技術(shù)，避免頻繁讀取內(nèi)存庫操作，進(jìn)一步降低網(wǎng)絡(luò)延遲帶來的影響。

2 基于Redis 內(nèi)存庫的SVG 動(dòng)態(tài)圖元解析預(yù)處理設(shè)計(jì)

2.1 SVG 動(dòng)態(tài)圖元解析預(yù)處理設(shè)計(jì)

由于SCADA 系統(tǒng)的畫面監(jiān)視系統(tǒng)對(duì)實(shí)時(shí)性和穩(wěn)定性有著很高的要求，如何高效完成SVG 圖形解析將直接影響整個(gè)系統(tǒng)的執(zhí)行效率，為此文本研究了一套將SVG 動(dòng)態(tài)圖元解析和Redis 內(nèi)存庫相結(jié)合的方式，每次用戶訪問SVG 圖形的時(shí)候，通過解析流程對(duì)當(dāng)前訪問的SVG 圖形進(jìn)行處理并保存相應(yīng)結(jié)果，后續(xù)用戶打開相同SVG 圖形時(shí)無需重復(fù)解析，直接從Redis 中獲取解析結(jié)果用于內(nèi)容計(jì)算。采用這種機(jī)制后，無論是訪問SVG 數(shù)量較多，還是單個(gè)SVG 畫面包含圖元復(fù)雜的情況，系統(tǒng)都可以在很短時(shí)間作出響應(yīng)。解析預(yù)處理核心機(jī)制主要包括以下內(nèi)容。

⑴ 對(duì)當(dāng)前訪問的SVG 圖形與Redis 中版本信息進(jìn)行對(duì)比。

⑵ 若版本信息對(duì)比一致，則從Redis 中獲取該圖需要使用的圖元引用元素和圖元內(nèi)容，加入java 二級(jí)緩存，用于后續(xù)計(jì)算使用，減少每次從Redis 獲取圖元和計(jì)算公式的開銷，進(jìn)一步提升系統(tǒng)性能。

⑶ 若版本信息對(duì)比不一致，則對(duì)該SVG 文件進(jìn)行解析操作，處理對(duì)象包括版本信息、圖元模板、計(jì)算表達(dá)式[7]、參數(shù)定義、規(guī)則等。采用QLExpress[8]作為計(jì)算表達(dá)式解析與運(yùn)算工具，QLExpress 是一種動(dòng)態(tài)腳本解析引擎，用Java 語言來編寫、解釋腳本，其將耗時(shí)長的計(jì)算腳本編譯過程緩存在本地，運(yùn)行時(shí)臨時(shí)變量的創(chuàng)建使用緩沖池技術(shù)實(shí)現(xiàn)，能有效提高運(yùn)算性能。解析的結(jié)果見文本2.2 章節(jié)詳細(xì)處理流程如圖2 所示。

2.2 SVG 解析結(jié)果存儲(chǔ)設(shè)計(jì)

在上一個(gè)章節(jié)對(duì)用戶訪問的SVG 圖形進(jìn)行了解析處理，如果以每張SVG 為單位進(jìn)行存儲(chǔ)，那么不同SVG 存儲(chǔ)結(jié)果中會(huì)出現(xiàn)大量重復(fù)的圖元模板解析結(jié)果，這是因?yàn)椴煌琒VG 圖形會(huì)引用相同的圖元和參數(shù)定義。

為了減少存儲(chǔ)容量及提升計(jì)算性能，本文提出以SVG 中圖形基本渲染規(guī)則（symbolId+paramIds）為key進(jìn)行分組，從而實(shí)現(xiàn)將具有相同圖元模板元素和參數(shù)定義的useId，SVGId 進(jìn)行聚合，以減少后續(xù)針對(duì)每個(gè)SVG 圖形的重復(fù)圖元計(jì)算量。同時(shí)在處理完成后會(huì)分別存于Redis 內(nèi)存庫和Java 本地緩存中。前者用于后續(xù)打開對(duì)應(yīng)的SVG 圖，可以快速獲得該圖包含的圖元模板、圖元引用元素和圖元模板計(jì)算公式參數(shù)；后者用于本次畫面的實(shí)時(shí)計(jì)算渲染。

通過預(yù)解析處理與結(jié)果存儲(chǔ)設(shè)計(jì)相結(jié)合技術(shù)，使得對(duì)于每張SVG 畫面，只有在系統(tǒng)啟動(dòng)后首次被訪問或SVG 圖形文件發(fā)生變化的情況下才進(jìn)行解析處理操作，后續(xù)的不同用戶、不同計(jì)算機(jī)再次訪問該SVG畫面時(shí)都可以基于解析完成的圖元模板和計(jì)算公式快速獲得計(jì)算參數(shù)，并完成結(jié)果計(jì)算。相較于既有系統(tǒng)的前端JS 解析或后端同時(shí)解析提高整體運(yùn)行效率，有效縮短用戶打開SVG 畫面的等待時(shí)間。

3 基于WebSocket 的畫面實(shí)時(shí)刷新機(jī)制設(shè)計(jì)

3.1 畫面刷新機(jī)制設(shè)計(jì)

傳統(tǒng)監(jiān)視畫面的實(shí)時(shí)刷新大多采用的是輪詢的方式，由畫面定時(shí)發(fā)起請(qǐng)求，向服務(wù)器獲取最新的數(shù)據(jù)，然后進(jìn)行畫面更新。這種方式適合畫面相對(duì)簡單、低并發(fā)，小數(shù)據(jù)量的場景，而SCADA 系統(tǒng)的畫面監(jiān)控實(shí)時(shí)性和穩(wěn)定性要求很高，單張SVG 圖形包含成百甚至上千圖元，畫面實(shí)時(shí)數(shù)據(jù)的變更周期也在秒級(jí)左右，隨著訪問量及單個(gè)畫面需要展示數(shù)據(jù)量的提升，或者對(duì)刷新頻率有較高要求的時(shí)候這種方式后端服務(wù)器需要在同一時(shí)間處理很多請(qǐng)求，這導(dǎo)致系統(tǒng)的響應(yīng)時(shí)間變長。而如果畫面數(shù)據(jù)達(dá)到秒級(jí)刷新，那么傳統(tǒng)輪詢的方式可能導(dǎo)致產(chǎn)生丟失部分?jǐn)嗝鏀?shù)據(jù)的情況，以致丟失重要畫面數(shù)據(jù)。

為了解決以上問題，本文研究設(shè)計(jì)了基于WebSocket[9]的實(shí)時(shí)計(jì)算推送機(jī)制，以保障SVG 畫面在Web 系統(tǒng)的實(shí)時(shí)性和穩(wěn)定性。

本文提出的畫面刷新機(jī)制以SVG 動(dòng)態(tài)圖元預(yù)解析為前提，當(dāng)大量用戶打開不同SVG 畫面時(shí)，系統(tǒng)只需以<用戶id-圖號(hào)id>為映射關(guān)系記錄系統(tǒng)當(dāng)前需要進(jìn)行計(jì)算和推送的圖形信息。畫面刷新機(jī)制核心內(nèi)容如下。

⑴ 將用戶信息和訪問的SVGid注冊(cè)進(jìn)WebSocket客戶端主題，用于向服務(wù)端發(fā)送用戶和SVGid 信息以及接收服務(wù)端推送的渲染結(jié)果渲染瀏覽器畫面。

⑵ 服務(wù)端WebSocket 負(fù)責(zé)接收用戶打開的SVG畫面，并過濾不同用戶打開的相同畫面，獲取當(dāng)前被打開的所有SVGid 信息。

⑶ 根據(jù)SVGid 從Redis 中獲取SVG 畫面中使用的symbol 圖元解析結(jié)果及計(jì)算表達(dá)式需要參與計(jì)算的參數(shù)以及引用圖元元素use。

⑷ 將目前所有參與計(jì)算的圖元添加至定時(shí)計(jì)算任務(wù)（見章節(jié)3.2），每秒定時(shí)計(jì)算渲染結(jié)果，并將結(jié)果和對(duì)應(yīng)的userid、SVGid 通過WebSocket 推送至所有訂閱對(duì)應(yīng)圖號(hào)的用戶畫面。

通過以上設(shè)計(jì)，采用WebSocket 與預(yù)解析相結(jié)合的技術(shù)方式，使得系統(tǒng)畫面的渲染刷新工作從單個(gè)SVG 畫面的<訪問->解析->計(jì)算->返回->渲染>轉(zhuǎn)變?yōu)?訪問->統(tǒng)一計(jì)算->定向推送->實(shí)時(shí)渲染>，極大地提高了系統(tǒng)的響應(yīng)時(shí)間和刷新頻率。

畫面刷新詳細(xì)流程設(shè)計(jì)如圖3 所示。

3.2 定時(shí)計(jì)算處理設(shè)計(jì)

定時(shí)計(jì)算任務(wù)采用自定義函數(shù)實(shí)現(xiàn)，計(jì)算過程如下：

首先服務(wù)端每間隔一秒批量從Redis 中讀取所需計(jì)算圖形的參數(shù)值、圖形定義、公式定義、參數(shù)定義放至內(nèi)存中；然后依次計(jì)算所需刷新的圖形，從內(nèi)存中讀取每張圖計(jì)算需要的obid、otype、atype、鏈接關(guān)系，并尋找對(duì)應(yīng)的屬性值。進(jìn)行一次全圖計(jì)算，得出渲染指令，并推送至Web 前端。

為了減少數(shù)據(jù)庫讀取操作，進(jìn)一步提升計(jì)算速度，在定時(shí)計(jì)算核心過程中提出三大優(yōu)化思想：

⑴ 雖然內(nèi)存庫的讀取速度較關(guān)系型數(shù)據(jù)庫更快，但是頻繁讀取仍存在網(wǎng)絡(luò)延遲的情況，對(duì)于秒級(jí)刷新的監(jiān)視畫面來說依然會(huì)影響展示效果。本文采用服務(wù)端提前批量讀取Redis[10]數(shù)據(jù)技術(shù)，周期計(jì)算前讀取所需計(jì)算圖形的參數(shù)值、圖形定義、公式定義、參數(shù)定義等放至內(nèi)存（HashMap）中，周期計(jì)算時(shí)直接從內(nèi)存中讀取計(jì)算。

⑵ 充分利用Java 緩存技術(shù)，通過Java 緩存所有正在刷新的圖形集合（SVGID），在定時(shí)計(jì)算時(shí)僅需取這些圖形做計(jì)算即可。

⑶ 每個(gè)計(jì)算周期減少相同圖元、相同參數(shù)的重復(fù)計(jì)算量，通過HashMap 緩存相同圖元id、參數(shù)的計(jì)算結(jié)果，遇到不同圖形引用相同圖元參數(shù)的情況可以直接返回計(jì)算結(jié)果。

4 結(jié)束語

本文設(shè)計(jì)的基于SVG 與WebSocket 的SCADAWeb 發(fā)布系統(tǒng)滿足了用戶通過Web 平臺(tái)監(jiān)視生產(chǎn)運(yùn)行情況的需求，同時(shí)保證了系統(tǒng)畫面的實(shí)時(shí)性和穩(wěn)定性。提出了基于內(nèi)存庫的圖元解析預(yù)處理機(jī)制和實(shí)時(shí)計(jì)算推送機(jī)制。無論是SVG 圖形訪問較多或是SVG 畫面圖元數(shù)量龐大的情況，該系統(tǒng)都能有效減少畫面加載等待時(shí)間，保障系統(tǒng)的流暢性和實(shí)時(shí)性，提高用戶使用體驗(yàn)。

本設(shè)計(jì)中關(guān)于WebSocket 實(shí)時(shí)推送方面還存在進(jìn)一步優(yōu)化空間，本文在對(duì)每張SVG 圖形進(jìn)行實(shí)時(shí)計(jì)算時(shí)是針對(duì)該圖所引用圖元進(jìn)行計(jì)算并推送至前端畫面進(jìn)行渲染，雖然避免了重復(fù)圖元的重復(fù)計(jì)算，但是沒有變化的圖元數(shù)據(jù)依舊統(tǒng)一推送至前端進(jìn)行渲染，如何做到通過對(duì)不同SVG 圖形引用的圖元推送變化數(shù)據(jù)將進(jìn)一步減少網(wǎng)絡(luò)帶寬，提高系統(tǒng)響應(yīng)時(shí)間和渲染效率。

綜上所述，該設(shè)計(jì)可以有效地支撐傳統(tǒng)SCADA系統(tǒng)在Web 系統(tǒng)的發(fā)布技術(shù)要求，滿足用戶在Web 信息系統(tǒng)實(shí)現(xiàn)SCADA 畫面實(shí)時(shí)監(jiān)視的性能需求和功能需求。該設(shè)計(jì)的實(shí)現(xiàn)也將促進(jìn)SCADA 系統(tǒng)在Web 系統(tǒng)的普及率、效率和可靠性，促進(jìn)工業(yè)自動(dòng)化領(lǐng)域的創(chuàng)新和發(fā)展。