一種基于WebAssembly的配網(wǎng)主站W(wǎng)eb發(fā)布系統(tǒng)

陶潁軍 胡秋玲 崔麗艷 卓懷忠

摘 要：本文基于已有配網(wǎng)主站監(jiān)控系統(tǒng)提出一種基于WebAssembly的配網(wǎng)主站W(wǎng)eb發(fā)布系統(tǒng)，通過(guò)將配網(wǎng)主站畫(huà)面文件解與數(shù)據(jù)IO模塊編譯為wasm格式的字節(jié)碼文件供瀏覽器加載，啟動(dòng)WebWorker數(shù)據(jù)IO線程來(lái)處理實(shí)時(shí)數(shù)據(jù)更新，同時(shí)通過(guò)WebSocket協(xié)議實(shí)現(xiàn)瀏覽器端與實(shí)時(shí)數(shù)據(jù)客戶(hù)端的數(shù)據(jù)交互，主線程接收到更新通知后動(dòng)態(tài)更新Web發(fā)布畫(huà)面。通過(guò)測(cè)試發(fā)現(xiàn)，相比于傳統(tǒng)的Web發(fā)布方式能夠有效提高系統(tǒng)的實(shí)時(shí)性和人機(jī)交互友好性。

關(guān)鍵詞：Web發(fā)布;WebAssembly;實(shí)時(shí)性;友好性

中圖分類(lèi)號(hào)：TM76 文獻(xiàn)標(biāo)識(shí)碼：A

0 引言

隨著計(jì)算機(jī)、網(wǎng)絡(luò)通訊技術(shù)的飛速發(fā)展與廣泛應(yīng)用，配網(wǎng)主站監(jiān)控方式由過(guò)去的有人值班過(guò)渡到無(wú)人值守，由過(guò)去的單純調(diào)度運(yùn)行轉(zhuǎn)變?yōu)檎{(diào)度運(yùn)行、生產(chǎn)、精英管理等多種運(yùn)用，在配網(wǎng)主站監(jiān)控中增加Web瀏覽功能變得越來(lái)越迫切，而且具有廣闊的市場(chǎng)前景。

目前國(guó)內(nèi)基于局域網(wǎng)的配網(wǎng)主站監(jiān)控系統(tǒng)大都是基于客戶(hù)機(jī)、服務(wù)器（C/S）結(jié)構(gòu)設(shè)計(jì)并由語(yǔ)言開(kāi)發(fā)的，Web發(fā)布系統(tǒng)中的畫(huà)面文件多來(lái)自于監(jiān)控系統(tǒng)中組態(tài)模塊，而Web發(fā)布系統(tǒng)中瀏覽器端的畫(huà)面文件處理多采用JavaScript語(yǔ)言，數(shù)據(jù)交互方式多采用基于jsp平臺(tái)或者PHP服務(wù)器腳本方式進(jìn)行開(kāi)發(fā)，與配網(wǎng)主站監(jiān)控系統(tǒng)環(huán)境均存在通信接口差異與語(yǔ)言差異，由此導(dǎo)致監(jiān)控系統(tǒng)已有模塊無(wú)法復(fù)用，數(shù)據(jù)解析與通信交互效率低下等問(wèn)題，因此針對(duì)配網(wǎng)主站監(jiān)控系統(tǒng)數(shù)據(jù)產(chǎn)生快、交互量大、實(shí)時(shí)性強(qiáng)等特點(diǎn)，研究WebAssembly技術(shù)在Web發(fā)布系統(tǒng)中的應(yīng)用方法具有非常重要的意義。

1 字節(jié)碼技術(shù)

WebAssembly（簡(jiǎn)稱(chēng)“WASM”）是一種以安全有效的方式運(yùn)行可移植程序的新技術(shù)，主要針對(duì)Web平臺(tái)。它是一種可以使用非JavaScript編程語(yǔ)言編寫(xiě)代碼并且能在瀏覽器上運(yùn)行的技術(shù)方案。它可以用高級(jí)語(yǔ)言編譯出字節(jié)碼放到WebAssembly虛擬機(jī)中運(yùn)行，各瀏覽器廠商根據(jù)WebAssembly字節(jié)碼標(biāo)準(zhǔn)規(guī)范實(shí)現(xiàn)虛擬機(jī)。WebAssembly格式是一種新的字節(jié)碼格式，和JavaScript需要解釋執(zhí)行不同的是，WebAssembly字節(jié)碼和底層機(jī)器碼很相似，可快速裝載運(yùn)行，因此性能相對(duì)于JavaScript解釋執(zhí)行大大提升。相對(duì)于JavaScript，WebAssembly有三個(gè)優(yōu)點(diǎn)。（1）體積小。由于瀏覽器運(yùn)行時(shí)只加載編譯成的字節(jié)碼，一樣的邏輯比字符串描述的JavaScript文件體積小很多。（2）加載快。由于文件體積小，再加上無(wú)需解釋執(zhí)行，WebAssembly能更快的加載并實(shí)例化，減少運(yùn)行前的等待時(shí)間。（3）兼容問(wèn)題少。WebAssembly是非常底層的字節(jié)碼規(guī)范，制定好以后很少變動(dòng)，就算發(fā)生變化，只需要從高級(jí)語(yǔ)言編譯成字節(jié)碼過(guò)程做兼容。

2 系統(tǒng)設(shè)計(jì)

按照配電主站系統(tǒng)信息Web發(fā)布子系統(tǒng)的功能需求以及運(yùn)行要求，系統(tǒng)的功能步驟主要分為主站客戶(hù)端畫(huà)面編輯、字節(jié)碼模塊構(gòu)建、畫(huà)面內(nèi)容展示與Web發(fā)布數(shù)據(jù)訪問(wèn)，具體的功能技術(shù)架構(gòu)如圖1所示。

3 具體發(fā)布流程

3.1 發(fā)布畫(huà)面制作

配網(wǎng)主站系統(tǒng)中畫(huà)面文件都通過(guò)專(zhuān)用組態(tài)編輯工具制作完成，畫(huà)面內(nèi)容按照自定義xml文件格式存儲(chǔ)，具體發(fā)布內(nèi)容如圖2所示：

3.2 字節(jié)碼模塊構(gòu)建

配網(wǎng)主站系統(tǒng)中類(lèi)似主接線圖等內(nèi)容復(fù)雜畫(huà)面發(fā)布時(shí)候，在Web瀏覽器加載會(huì)存在畫(huà)面解析加載速度過(guò)慢的問(wèn)題，而通過(guò)將配網(wǎng)主站系統(tǒng)中與發(fā)布系統(tǒng)相關(guān)的畫(huà)面文件解析與數(shù)據(jù)IO等核心功能模塊進(jìn)行重新構(gòu)建并加載WebAssembly模塊，從而能夠?qū)崿F(xiàn)瀏覽器端動(dòng)態(tài)調(diào)用文件解析與數(shù)據(jù)IO模塊的目的，能夠有效提高解析速度。

利用Emscripten編譯器工具將文件解析與數(shù)據(jù)IO模塊編譯為wasm格式的字節(jié)碼文件，詳細(xì)步驟包括：

（1）文件解析與數(shù)據(jù)IO模塊中增加Emscripten構(gòu)建工具所提供EMSCRIPTEN_BINDINGS（）代碼塊來(lái)導(dǎo)出API接口;（2）使用Emscripten構(gòu)建工具所提供的emcc編譯器將文件解析與數(shù)據(jù)IO模塊編譯生成為對(duì)應(yīng)的.wasm文件與.js文件;（3）使用JavaScript膠水代碼加載所生成js文件到網(wǎng)頁(yè)應(yīng)用中，調(diào)用所導(dǎo)出API接口來(lái)實(shí)現(xiàn)文件解析與數(shù)據(jù)IO功能。

3.3 畫(huà)面調(diào)用

利用HTML5所提供API打開(kāi)配網(wǎng)主站畫(huà)面文件，文件內(nèi)容由模塊進(jìn)行解析后，解析結(jié)果存入虛擬文件系統(tǒng)供后續(xù)畫(huà)面渲染時(shí)使用，其步驟主要包括：

（1）利用HTML5所提供FileReaderAPI接口讀取本地存放配網(wǎng)主站畫(huà)面文件，生成ArrayBuffer類(lèi)型對(duì)象;（2）將ArrayBuffer對(duì)象通過(guò)模塊API接口參數(shù)傳入文件解析模塊，在模塊中轉(zhuǎn)換為Qt中對(duì)應(yīng)QByteArray類(lèi)型對(duì)象;（3）通過(guò)Emscripten構(gòu)建工具所提供的FS.writeFile方法將解析的圖元屬性結(jié)果存入虛擬內(nèi)存文件系統(tǒng)進(jìn)行緩存;（4）瀏覽器主線程負(fù)責(zé)畫(huà)面渲染，在畫(huà)面渲染時(shí)通過(guò)讀取緩存文件來(lái)獲取畫(huà)面內(nèi)容，圖形繪制仍然使用傳統(tǒng)的JavaScript來(lái)實(shí)現(xiàn)。

3.4 發(fā)布數(shù)據(jù)訪問(wèn)

利用WebSocket網(wǎng)絡(luò)協(xié)議實(shí)現(xiàn)瀏覽器與數(shù)據(jù)客戶(hù)端之間的數(shù)據(jù)交互，其步驟主要包括：

（1）瀏覽器端由WebWorker控制器啟動(dòng)WebWorker數(shù)據(jù)IO線程用于獲取實(shí)時(shí)數(shù)據(jù)及下發(fā)控制數(shù)據(jù);（2）數(shù)據(jù)IO線程調(diào)用數(shù)據(jù)IO模塊中API與數(shù)據(jù)客戶(hù)端采用WebSocket協(xié)議進(jìn)行數(shù)據(jù)交互，其中數(shù)據(jù)IO模塊主要功能借助Qt所提供QWebSocket進(jìn)行實(shí)現(xiàn);（3）數(shù)據(jù)IO線程定期輪詢(xún)緩存圖元屬性?xún)?nèi)容，獲取頁(yè)面所有關(guān)聯(lián)動(dòng)態(tài)數(shù)據(jù)后向數(shù)據(jù)客戶(hù)端發(fā)送數(shù)據(jù)更新請(qǐng)求，實(shí)現(xiàn)瀏覽器畫(huà)面周期性更新;（4）數(shù)據(jù)客戶(hù)端同樣可以定期輪詢(xún)實(shí)時(shí)數(shù)據(jù)變化，發(fā)現(xiàn)數(shù)據(jù)更新則主動(dòng)推送變化數(shù)據(jù)到數(shù)據(jù)IO線程，從而實(shí)現(xiàn)瀏覽器畫(huà)面變化性更新;（5）瀏覽器主線程監(jiān)聽(tīng)畫(huà)面圖元控制操作，將控制數(shù)據(jù)交由數(shù)據(jù)IO線程下發(fā)至數(shù)據(jù)客戶(hù)端，同時(shí)暫停發(fā)送周期數(shù)據(jù)更新請(qǐng)求至控制命令發(fā)送完成;（6）WebWorker控制器負(fù)責(zé)數(shù)據(jù)IO線程與主線程通信，當(dāng)實(shí)時(shí)數(shù)據(jù)客戶(hù)端有數(shù)據(jù)刷新時(shí)，WebWorker線程通過(guò)一個(gè)Promise將實(shí)時(shí)數(shù)據(jù)發(fā)送給主線程，主線程獲取實(shí)時(shí)數(shù)據(jù)后設(shè)置畫(huà)面圖元?jiǎng)討B(tài)屬性，更新配網(wǎng)主站畫(huà)面顯示。

4 結(jié)語(yǔ)

本文介紹了一種基于WebAssembly的配網(wǎng)主站W(wǎng)eb發(fā)布系統(tǒng)，通過(guò)利用瀏覽器所提供的WebAssembly技術(shù)與原生支持的WebSocket網(wǎng)絡(luò)協(xié)議，在瀏覽器顯示畫(huà)面文件時(shí)以字節(jié)碼方式調(diào)用文件解析與數(shù)據(jù)IO模塊，開(kāi)辟虛擬文件系統(tǒng)用于緩存文件解析結(jié)果及實(shí)時(shí)數(shù)據(jù)更新內(nèi)容，在WebWorker線程中實(shí)現(xiàn)與數(shù)據(jù)客戶(hù)端的雙向交互，相比配網(wǎng)Web發(fā)布系統(tǒng)中傳統(tǒng)實(shí)現(xiàn)方法，能夠有效提高畫(huà)面加載與動(dòng)態(tài)刷新速度，具有廣泛的工程應(yīng)用價(jià)值。目前該系統(tǒng)已經(jīng)在Chrome、Firefox、Safari、Edge等多款支持Webassembly技術(shù)的主流瀏覽器上成功應(yīng)用，經(jīng)過(guò)測(cè)試運(yùn)行穩(wěn)定，符合預(yù)期要求。

參考文獻(xiàn)：

[1]柴樹(shù)杉，丁爾男.WebAssembly標(biāo)準(zhǔn)入門(mén)[M].人民郵電出版社，2018.

[2]于航.深入淺出WebAssembly[M].電子工業(yè)出版社，2018.