基于MQTT的epics實時數據在微信小程序端的可視化監控系統

黃 麗，韓利峰，劉文倩，陳志軍，肖 君，陳永忠

（中國科學院上海應用物理研究所，上海 201800）

0 引言

開源分布式軟件實驗物理與工業控制系統（EPICS），在大型科學裝置中被廣泛應用。由于現場設備眾多且涉及不同專業背景的相關研究人員，給上層監控系統規模和構造帶來較大的挑戰。為了確保大科學裝置項目安全、可靠和穩定的運行，可視化的監控系統是必不可少的。而對于可視化監控系統使用者來說，在保證系統安全可靠的前提下，一款無需額外安裝和配置、攜帶方便、可隨時隨地查看的可視化監控系統極具應用價值。

現有的兩種EPICS實時數據可視化監控系統架構包括：客 戶 端/服 務 器（Client/Server，C/S）和 瀏 覽器/服 務 器（Browser/Server，B/S）[1]。C/S架 構的EPICS實時數據可視化監控系統軟件，如美國橡樹嶺國 家 實 驗 室（Oak Ridge National Laboratory，ORNL）開發的客戶端軟件 EDM（Extensible Display Manager）、美國斯坦福直線加速器中心（Stanford Linear Accelerator Center，SLAC） 開 發 的 客戶端軟件Channel Watcher、德國電子同步加速器（Deutsches Elektronen Synchrotron，DESY） 提供 的 客 戶 端 軟 件CSS（Control System Studio）等，需要在本機安裝和配置，且在不同系統和平臺存在兼容性不好的問題。B/S架構的EPICS實時數據可視化監控系統軟件不需要安裝和配置，并且在便捷性方面優勢明顯。比較典型的基于EPICS Web接口或B/S 架構可視化監控系統包括：橡樹嶺實驗室開發的Web OPI、日本高能加速器研究團隊開發的EPICS CA、德國電子同步加速器研發的JDDD（JAVA DOOCS Data Display）、美 國 杰 斐 遜國家實驗室開發的WEDM（Web Extensible Display Manager）、橡樹嶺實驗室開發的Web EPICS，以及澳大利亞同步加速器開發的 YAIBEX[1]。近年來，國內在B/S架構可視化監控系統研究取得的進展和成果有：在Web CA軟件的基礎上，實現了基于Web的加速器遠程監控系統[2]；在CAML軟件的基礎上，實現了基于Web的 BEPCII運行狀況監控系統[3]；利用Flex和Blaze DS技術，研究并實現了基于Web的EPICS數據實時監測系統[4]等。在便捷程度上，現有的基于B/S可視化監控系統仍然具有一定的局限性。鑒于此，易用、易攜帶的移動端EPICS實時數據可視化監控系統變得尤為重要。2020年微信月活動用戶達到12億，而基于微信的微信小程序不需要安裝，“用完即走”的特點非常便利。在用戶如此龐大的微信框架基礎上，開發一款基于微信小程序的EPICS實時數據可視化監控系統，非常實用且必要。

該可視化監控系統采用MQTT協議通信，將在云端建立的MQTT服務器作為代理，與EPICS IOC實時數據同步的Web端和微信小程序端作為客戶端。在Web端為發布者，微信小程序端為訂閱者的情況下，數據傳輸過程如下：客戶端都成功連接到代理服務器，作為發布者Web端將要監控的變量數值向某個特定主題發布，作為訂閱者的微信小程序在訂閱該特定主題后通過代理服務器將收到該變量的數值信息。通過在實際項目中的應用測試，該微信小程序運行穩定可靠，易于使用。在微信小程序端實現epics實時數據的可視化監控系統，擁有更便捷的方式，擺脫了時間和空間的限制。

1 系統架構

基于物聯網MQTT協議，微信小程序和Web端為客戶端，阿里云服務器上安裝開源的EMQX服務器為代理服務器。Web端NodeJS+Express框架搭建，使用nodeepics模塊包實現epics ioc實時數據的同步[5]，MQTT.js模塊包實現Web端作為MQTT協議客戶端。客戶端微信小程序使用MQTT.js庫接入MQTT代理服務器。對于一個特定主題，通過Web端將消息發布出來，EMQX代理服務器中轉，微信小程序端訂閱接收消息，這樣一套完整的從項目硬件設備實時數據傳輸到微信小程序的方案就實現了，如圖1所示。

圖1 整體設計架構圖Fig.1 Overall design architecture diagram

1.1 MQTT協議

在物聯網技術環境中，物聯網協議非常重要，它規定了硬件間以有組織和合理的方式交換信息，如果沒有物聯網協議，硬件將失去意義。標準物聯網協議有CoAP，AMQP，MQTT，XMPP，WebSocket，DDS，JSM等[6]。

這里使用輕量級的基于發布-訂閱的消息傳遞協議MQTT（消息隊列遙測傳輸），是用于在物聯網設備之間傳輸數據的應用層協議，它是使用基于TCP/IP而建立連接過程。MQTT代理服務器是基于MQTT的物聯網框架的關鍵組件，因為它是各客戶端建立連接及消息傳輸等功能的重要中間件，每個客戶端都可以訂閱或發布特定的主題。當一個客戶端在已被訂閱的主題上發布消息時，MQTT代理服務器將該消息轉發給每個訂閱該主題的客戶端。因此，MQTT是基于代理服務的以數據為中心的通信。如圖2所示。

圖2 MQTT通信模式Fig.2 MQTT Communication mode

MQTT協議是IBM在20世紀90年代末發布的，它具有輕量、簡單、開放和易于實現等特點，這使得它適用范圍非常廣泛，現已被阿里云、騰訊云、百度云、華為云這些物聯網平臺接入，實現雙向安全智能設備之間的通信。MQTT最大優點在于，可用極少的代碼和有限的帶寬，為連接遠程設備提供實時可靠的消息服務。為了確保所有發布的數據都順利收到，有3種消息發布服務質量：

Qos-0：保證消息至少傳遞1次，但在發送發布時，不會收到確定收到消息的確認，傳輸速度最快。

Qos-1：保證向接收者發送消息至少1次，可能會收到重復的消息。

Qos-2：保證每條消息的收件人最多只接收1次。此服務質量下數據傳輸水平最高，最安全，最可靠，但是占用帶寬最多。因此，傳輸速度是最慢的。QoS級別越高，流程就變得越復雜。

1.2 EMQX代理服務器

EMQX（Erlang/Enterprise/Elastic MQTT Broker）是基于Erlang/OTP語言平臺開發的，支持大規模連接和分布式集群，發布訂閱模式的開源MQTT消息服務器。Erlang/OTP是出色的軟實時（Soft-Realtime）、 低 延 時（Low-Latency）、 分 布 式（Distributed）的語言平臺[7]。EMQ X是實現高可靠，并支持承載海量物聯網終端的MQTT連接，支持在海量物聯網設備間低延時消息路由：①穩定承載大規模的MQTT客戶端連接，單服務器節點支持50萬～100萬連接；②分布式節點集群，快速低延時的消息路由，單集群支持1000萬規模的路由；③消息服務器內擴展，支持定制多種認證方式，高效存儲消息到后端數據庫；④完整物聯網協議 支 持，MQTT、MQTT-SN、CoAP、LwM2M、WebSocket或私有協議支持。微信小程序中的服務器接口必須采用wxs和域名，因此給服務器配置域名wss://xxx.com，nigx代理以便微信小程序調用。

1.3 Web客戶端

Web端 用NodeJS+Express框 架 搭 建，nodeepics模塊包獲取epics ioc實時數據，并使用MQTT.js模塊包實現Web端為MQTT協議客戶端。Nodejs是一個基于Chrome V8引擎的 JavaScript。運行時，是一個基于Chrome V8引擎的JavaScript運行環境，使用了一個事件驅動、非阻塞式I/O模型，讓JavaScript運行在服務端的開發平臺。Express是一個簡潔而靈活的nodejs Web應用框架，提供了一系列強大特性和豐富的HTTP工具，用來快速創建各種Web應用。使用NodeJS+Express框架可以快速地搭建一個功能完整的網站。Node-epics模塊包是用JavaScript語言開發的、面向nodejs平臺的及epics客戶端接口程序[8]，通過調用node-epics模塊包可以實現epics ioc在瀏覽器端的應用。MQTT.js是JavaScript編寫的，實現了MQTT協議客戶端功能的模塊，可以在Node.js或瀏覽器環境中使用。在Node.js中，即以-g全局安裝以命令行的形式使用，又可以將其集成到具體項目中調用。

1.4 微信小程序客戶端

微信小程序是小程序的一種，英文名Wechat Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。這里使用微信小程序作為epics ioc實時數據的監控移動客戶端。首先，在微信公眾平臺注冊小程序賬號并下載安裝微信開發者工具；然后，在微信開發者工具中新建小程序并輸入注冊的小程序APPID，新建一個微信小程序項目；最后，在開發者平臺右側開發-開發管理-開發設置-服務器域名，在方服務器域名處，點擊修改；在socket合法域名處，添加EMQX配置的域名wss://xxx.com保存提交。因為微信小程序使用MQTT協議是通過web socket來實現的，需要下載并復制mqtt.js這一個第三方庫到小程序項目中[10]。

2 系統實現

2.1 實現環境

此MQTT服務器代理端相關軟件及環境：EMQX broker免費開源版emqx4.3.5，阿里云服務器版本：CentOS 7.2 64位 linux-3.10.0-1127.18.2.el7.x86_64。Web客戶端相關軟件及環境，nodejs 版本：v14.16.0，Express 4.0，MQTT.js，node-epics。node-epics做如下修改：

package.json文 件 的dependencies: {"refarray": "*","ref-struct": "*"}

修改為dependencies: {"ref-array-napi": "*","ref-struct-napi": "*"}。

文 件/node_modules/epics/lib/ca.js 中var ffi = require('ffi'),ref = require('ref'),

StructType = require('ref-struct'), ArrayType = require('ref-array')

修改為var ffi = require('ffi-napi'),ref = require('ref-napi'),

StructType = require('ref-structnapi'),

ArrayType = require('ref-array-napi')。

微信小程序客戶端相關軟件及環境：微信開發者工具Stable 1.05.2105170，MQTT.js。

2.2 頁面設計

考慮到實驗項目需要監控數據量多，移動端屏幕較小，界面布局分為兩個區域：重點監控區和詳細監控區。整體界面布局如圖3所示。

圖3 整體界面布局Fig.3 Overall interface layout

重點監控區放置4個進度條組件，分別顯示堆芯溫度、熔鹽液位、加熱功率，及覆蓋氣壓。數據顯示僅保留到小數點后3位，進度條進度根據數據大小做相應變化，進度條顏色會根據設置的數據警示值變成紅色。在xxx.wxml中引入編寫的小數點位模板、進度控制模板、顏色控制模板，并在相應的組件中使用。方法如下：

模板引入

詳細監控區按照不同的系統劃分，將每個系統監控數據放置在同一個折疊板中。各個系統分別是一回路熔鹽泵、堆本體、東側余排、西側余排、一回路側、二回路側、空冷系統、二回路熔鹽泵、氣路系統。折疊板展開布局如圖4所示。

圖4 折疊板展開布局Fig.4 Expanded layout of folding board

頁面布局使用第三方組件庫Vant Weapp，它是Vue組件庫Vant的小程序版本。分別用到Vant Weapp中的row、col、collapse、collapse-item、circle組件[9]。在頁面文件夾下的xxx.wxml使用該組件庫組件之前，需要在調用該組件庫的頁面文件夾下的xxx.json中做如下配置：

2.3 最終實現

此微信小程序通過mqtt協議獲取epice ioc實時數據，作為mqtt客戶端。首先，將下載的mqtt.js復制到項目工程文件夾中，并在頁面文件夾下的xxx.js中通過import或require函數引用。這樣在頁面文件夾下 的xxx.js就 可 以 使 用mqtt.js中 的mqtt.connect（創 建 連 接）、mqtt.connect.on（監 聽 連 接）、mqtt.connect.subscribe（訂閱主題）等方法[11]。

為了在監控頁面打開的同時，使頁面上的環形進度條顯示數據，需要實現將微信小程序與mqtt服務器建立連接、連接監聽，以及將環形進度條顯示數據相關主題訂閱等功能函數放到監聽頁面加載函數onLoad中，將對應項目中各個系統相關數據放置到對應折疊板組件中監控。各個系統折疊板數據顯示實現方法相同：訂閱系統相關的主題，訂閱成功后，將服務器下發的消息值賦值給該系統對應的變量，這一系列操作打包成一個函數，通過頁面折疊板點擊觸發。由于項目設備處于檢修期，為展示效果明顯，進度條閾值未設置成實際項目閾值。實現效果如圖5。圖6為系統折疊板展開頁面。

圖5 監控界面Fig.5 Monitoring interface

圖6 折疊板展開Fig.6 Folding board unfolded

3 結束語

本系統完成了EPICS IOC數據在微信小程序端的監控，小程序使用者可以通過該系統查看項目各系統的主要參數數據，給相關工作人員工作提供便利。系統在實時性方面還未做測試，需要在頁面加載、實時數據同步速度等方面做進一步測試。