基于MQTT協議的工控組態軟件Web發布系統的設計

謝艷，肖金鳳，賈磊

（南華大學電氣工程學院，湖南 衡陽 421000）

0 引言

工控組態軟件，用來采集工業現場關鍵位置的數據并能夠控制其值變化的專用軟件。在現代工業領域，利用組態軟件對各種儀表、控制器進行遠程管理已經成為一種普遍現象[1]。因為工業現場大部分都比較復雜，而且近年來網絡技術發展迅速，考慮數據采集和監控的方便高效，所以Web發布系統也成為了工控組態軟件與時俱進的一項必不可少的功能。此系統就是在基礎的組態軟件上增添Web監控功能，將組態編輯軟件設計的監控界面轉換成網頁的形式，用戶直接通過Internet和瀏覽器就能遠程對現場進行實時監控[2]。所以，一個完整的Web系統的實現，需要用到很多種技術，如Web頁面生成技術、通訊數據傳輸技術等等。目前，國內外對此的研究都不夠成熟，其研究方向主要集中在監控界面的生成和實時數據的傳輸。

近年來，MQTT協議因為輕量、開發使用簡單在物聯網平臺應用普遍，針對目前廣泛使用的嵌入式組態軟件Web發布系統實時性較差、監控界面配置復雜等問題，提出一種基于MQTT協議的新的工控組態軟件Web發布系統解決方案，該方案具實時性較高、跨平臺、系統維護升級便利等多項優點，且在國內生產PLC工控組態軟件中實現。

1 功能分析與技術介紹

工控組態軟件的Web發布系統由其功能特點主要滿足兩大需求。

（1）遠程瀏覽器端監控界面與工控組態軟件設計的監控界面一致。由此就考慮到瀏覽器端監控界面的生成方式，需讀取組態軟件中的畫面，轉換格式并能成功嵌入網頁，且畫面中各控件的邏輯變化功能一致。在瀏覽器端生成畫面的方法有以下幾種：①ActiveX技術雖能完全復用相同的畫面，但其控件只能基于Windows，不能跨平臺，且運行必須安裝ActiveX控件，而控件的開發維護復雜且升級繁瑣；②Applet基于Java，可實現圖形繪制、人機交互，但其程序運行速度慢，且開發代碼量大，不易維護；③WPF框架模型比較統一，使用靈活，但需安裝.NET Framework，安裝復雜且固定平臺；④SliverLight是WPF的輕量版，可跨平臺，但其動態屬性計算復雜，大概率導致延時；⑤SVG是一種矢量圖形標準，基于XML，此格式有四大優點：即跨平臺、可指定對象類型、動態交互性強和支持DOM。因此，可以將畫面以SVG格式嵌入能在網頁顯示出高清晰度的界面，且具動態變化，無需安裝特定控件。相比較而言，SVG技術更適用。

（2）監控界面的動態變化靠實時數據驅動，這就要求數據傳輸的實時性盡可能高。數據來源是現場的監控設備或者組態軟件。工業現場為局域網環境，客戶端網絡也大概率為局域網，要想實現遠程瀏覽器監控，則需實現內網穿透，而一般的互聯網通信的實時性都比較差。本文通過對現有網絡通信技術的研究，決定在以MQTT消息發布訂閱形式進行現場監控設備或組態軟件與Web服務器之間的實時數據的傳輸，而Web服務器與瀏覽器之間則通過WebSocket傳輸。下面介紹關鍵技術MQTT及WebSocket。

1.1 MQTT

MQTT（Message Queuing Telemetry Transport，消息隊列遙測傳輸協議），是一種基于發布/訂閱（publish/subscribe）模式的輕量級通訊協議，構建于TCP/IP協議上，提供可靠、有序與雙向的數據傳輸機制[3]。

MQTT協議中共有發布者（Publisher）、代理（Broker）、訂閱者（Subscriber）三種角色，其關系如圖1所示。

圖1 MQTT協議原理

Publisher和Subscriber都是客戶端，Publisher同時也可以是Subscriber，Subscriber也可以是另一Topic的Publisher，Broker是MQTT代理服務器（如mosquitto）。作為客戶端的兩種角色并不需要知道對方是否存在，它們只需要通過IP和端口成功連接上Broker，Broker就能夠對所有的消息進行篩選，并且根據各消息的Topic對它們進行分發，就可實現消息的發布和訂閱[4]。MQTT對傳輸的消息有三種服務類型（QoS）：最多一次（QoS0），至少一次（QoS1），只有一次（QoS2），對應著消息傳遞時不同的可靠程度。代理服務器對所有的Topic采用的是二叉樹結構式管理，二叉樹每個節點的存儲方式為孩子兄弟鏈表法。即代理服務器將所有的Topic根據“/”分叉，所有Topic將形成一棵二叉樹，而從主節點沿樹杈到樹中的任何一節點即是該節點的實際Topic，所以每個節點都有一個訂閱列表，該訂閱列表中保存了所有訂閱當前Topic的客戶端信息。

MQTT協議能夠以較少的代碼和有限的帶寬為遠程設備提供實時可靠的消息服務。特別適用于資源有限、帶寬低、延遲大或網絡環境不可靠的嵌入式設備。

1.2 WebSocket

WebSocket協議是一種通過單個TCP連接進行全雙工通信的協議，應用于瀏覽器和服務器之間，兩者只需要進行一次握手，就能夠建立長久的連接，實現雙向的信息通信。其工作機制基于訂閱發布模式。

瀏覽器和服務器之間傳統的通信是通過AJAX輪詢，即瀏覽器定時向服務器發送連接請求，服務器收到此請求后再返回瀏覽器需要的消息并斷開連接。雖然AJAX實現較簡單，但對服務器資源浪費比較嚴重，效率比較低[5]。而WebSocket在最開始握手時利借助HTTP協議，利用HTTP連接中的Upgrade字段，與服務端協商將HTTP協議升級為WebSocket，服務器與瀏覽器從而建立長久連接，雙方可主動給對方發送信息。且其握手數據包的請求頭只有2個字節，對網絡帶寬占用較小。圖2顯示了AJAX輪詢和WebSocket兩種方式建立連接的不同。

圖2 AJAX輪詢和WebSocket連接方式

在工業現場，實時信息更新較快，發布系統的數據傳輸也更頻繁，因此，瀏覽器和服務器之間使用WebSocket通信比AJAX輪詢更加有效適用。

2 系統設計與實現

2.1 系統架構

根據系統的功能實現分析，基于組態軟件的Web發布系統設計主要有組態軟件、設備（監控終端）、MQTT代理服務器和監控登錄系統四部分，如圖3所示。組態軟件有兩個功能：（1）實現監控界面的設計與編輯；（2）能將界面信息分別轉化成可在設備和瀏覽器端運行的文件。設備是監控終端，在工業現場收集數據信息并在監控界面顯示。MQTT代理服務器是發布系統的信息傳輸中樞，組態軟件、設備及監控登錄系統通過MQTT協議連接代理服務器，進行實時信息轉發。監控登錄系統保存遠程監控用戶的用戶信息及運行監控界面。

圖3 系統架構

2.2 界面生成

組態軟件設計監控界面的同時，對每個界面元素配置為SVG格式的圖元，整個界面保存為SVG格式的矢量圖文件，Web發布系統前端網頁收到矢量圖文件解析后嵌入vue，再發布到網頁顯示。

圖4 瀏覽器端頁面生成

2.3 數據傳輸實現

觸摸屏可以收集控制器數據，是MQTT的客戶端，MQTT的消息代理服務器構建在阿里云平臺的ECS云服務器上，開啟觸摸屏打開監控畫面的同時，觸摸屏的MQTT模塊通過代理服務器的IP和端口與代理服務器建立連接，在觸摸屏上有數據變動時，變動數據打包后由觸摸屏MQTT客戶端發送至云代理服務器中轉，云服務器通過其收到數據的主題進行分類。用戶通過網頁端登錄系統，不同位置的觸摸屏其發送消息的主題不同，用戶登錄系統后通過選擇訂閱想要監視的觸摸屏對應的主題，進入此觸摸屏的監視畫面。消息發布者觸摸屏發送實時消息到mosquitto服務器，mosquitto對主題進行分類后再發布，網頁后臺的Web服務器作為mosquitto的訂閱者，收到對應主題的消息，對消息進行解析。網頁前后端通訊通過websocket長連接方式，后端一收到消息主動推送至前端，前端通過改變網頁界面相對應的參數，刷新界面。

2.4 系統測試

此系統已在國內生產的工控組態軟件上測試成功。測試環境為基于Windows操作系統的PC，組態編輯軟件使用Qt開發，Web服務器選用Apache，測試瀏覽器采用的是搜狗或谷歌瀏覽器，監控登錄系統的前端為Vue框架，后端開發為Springboot框架，在阿里云上建立linux操作系統，采用mosquitto作為MQTT的代理服務器，監控設備為觸摸屏。組態編輯軟件（仿真時）或觸摸屏運行時通過MQTT發布消息，不同監控地點的發布消息的主題不同，mosquitto代理服務器訂閱多個主題，在瀏覽器端登錄監控系統后，根據想監控的具體觸摸屏發布的主題進行選擇訂閱，網頁監控界面根據此主題的消息實時更新界面。監控界面中用到文本、編輯框、按鈕、數據歷史趨勢圖、表格等元素，運行效果如圖5所示，根據監控界面的復雜程度，與現場監控設備比，其實時界面刷新延遲在1s左右。

圖5 瀏覽器端數據監控界面效果

3 結論

本文以MQTT協議為主要實時數據傳輸方式，以SVG為監控界面生成方式，實現的工控組態軟件的Web發布系統，可以實現互聯網方式的消息傳輸，且具有實時性較高、跨平臺、系統維護升級便利等多項優點，滿足了國內生產的PLC工控組態軟件Web發布系統在工程中的要求。未來組態軟件的發展方向應該是直接基于瀏覽器開發組態編輯工具，監控界面可直接在瀏覽器上設計和編輯，使監控管理工作更加便利。