汪祖民，王原習，孫繼武

（1. 大連大學 信息工程學院，遼寧 大連 116622；2. 長春工程學院 機電工程學院，吉林 長春 130012）

基于Comet技術(shù)的機械設(shè)備故障預警圖形系統(tǒng)研究與實現(xiàn)

汪祖民1，王原習1，孫繼武2

（1. 大連大學 信息工程學院，遼寧 大連 116622；2. 長春工程學院 機電工程學院，吉林 長春 130012）

為提高火電廠輸煤設(shè)備檢修的效率，解決相應軟件系統(tǒng)的實時性和便利性問題，提出了以Comet技術(shù)為核心的基于Web的設(shè)備故障預警圖形系統(tǒng)。系統(tǒng)采用Rapha?l來繪制矢量圖形，結(jié)合基于DOM的腳本編程技術(shù)實現(xiàn)了圖形系統(tǒng)與用戶的友好交互；采用Ajax長輪詢方式模擬實現(xiàn)數(shù)據(jù)信息的服務(wù)器端推送，Ajax引擎的異步通訊機制有效解決了頁面動態(tài)更新問題。在提高信息實時性、降低服務(wù)器壓力的同時，系統(tǒng)帶來了良好的用戶體驗。

設(shè)備檢修；故障預警；圖形系統(tǒng)；服務(wù)器推送；Comet

0 引 言

圖形系統(tǒng)因其直觀性、友好性，被公認為人機交互的主流方式。在過去電力應用系統(tǒng)的圖形支持系統(tǒng)中，有基于C/S模式的圖形化客戶端應用，也有采用ActiveX和Applet來實現(xiàn)基于Web的圖形支持的應用[1]。但大多系統(tǒng)存在著可移植性差、信息共享和數(shù)據(jù)交互困難等問題。隨著Web技術(shù)的發(fā)展，SVG等矢量圖形技術(shù)開始應用于電力圖形系統(tǒng)中，并對電力系統(tǒng)網(wǎng)絡(luò)化圖形化產(chǎn)生了積極作用[1]。

文獻[2]在研究SVG圖形繪制的基礎(chǔ)上，初步介紹了基于 Ajax技術(shù)的電力圖形系統(tǒng)的實現(xiàn)方案。Ajax技術(shù)的引入，改善了基于B/S模式的應用程序數(shù)據(jù)更新交互困難的現(xiàn)狀，通過向服務(wù)器發(fā)送異步請求，并在請求返回時，用JavaScript來控制更新UI，使Web應用程序看起來是即時響應的。文獻[3]應用Ajax輪詢實現(xiàn)了基于SVG的電廠運行監(jiān)視系統(tǒng)，文獻[4]針對SVG實時數(shù)據(jù)動態(tài)刷新問題，提出了基于Ajax引擎的解決方案。但是Ajax輪詢機制，受限于Ajax請求間隔和信息實時性之間的矛盾，系統(tǒng)仍會給用戶帶來消息延遲的感覺，并且無效的Ajax請求會消耗大量網(wǎng)絡(luò)帶寬和服務(wù)器資源[5]，降低系統(tǒng)性能。本文采用了基于 Comet的服務(wù)器推送技術(shù)，通過建立 HTTP長連接的方式在一定程度上解決了請求間隔和實時性之間的矛盾，避免無效Ajax請求，節(jié)約網(wǎng)絡(luò)帶寬，提升系統(tǒng)性能，帶來更好的用戶體驗。

火電廠輸煤系統(tǒng)與其他設(shè)備運行監(jiān)控系統(tǒng)不同。后者多采用在線實時監(jiān)控，而前者因設(shè)備運行環(huán)境復雜惡劣，考慮到經(jīng)濟效益問題，不適宜對設(shè)備進行在線實時監(jiān)控，多采用以狀態(tài)檢修為基礎(chǔ)的點檢定修制。在輸煤設(shè)備檢修實際應用中，點檢人員需要在輸煤線路運行期間對設(shè)備進行巡檢，通過手持巡檢儀器對設(shè)備進行檢測，并在巡檢結(jié)束后將數(shù)據(jù)導入計算機，在本機或內(nèi)部網(wǎng)絡(luò)上完成數(shù)據(jù)分析預警以指導檢修工作。

根據(jù)以上敘述，我們看到當前的輸煤設(shè)備檢修軟件輔助系統(tǒng)獲取信息慢，數(shù)據(jù)共享難，影響設(shè)備故障的有效診斷和及時排除。針對當前的輸煤設(shè)備檢修策略，我們借鑒電網(wǎng)設(shè)備在線監(jiān)控系統(tǒng)的模式[6]，采用矢量圖形作為圖形系統(tǒng)的顯示格式，應用服務(wù)器推送技術(shù)，設(shè)計了基于Web的機械設(shè)備故障預警圖形系統(tǒng)，能夠及時獲取點檢儀采集的數(shù)據(jù)，并將數(shù)據(jù)信息迅速清晰地呈現(xiàn)給終端用戶。

1 系統(tǒng)架構(gòu)設(shè)計與關(guān)鍵技術(shù)

圖1描述了機械設(shè)備故障預警圖形系統(tǒng)的架構(gòu)。巡檢儀將設(shè)備檢測數(shù)據(jù)通過無線網(wǎng)絡(luò)上傳至Web服務(wù)器，服務(wù)器對這些數(shù)據(jù)進行邏輯事務(wù)處理，將數(shù)據(jù)及處理結(jié)果保存至數(shù)據(jù)庫中，同時將檢測數(shù)據(jù)異常的設(shè)備信息及時通知給客戶端瀏覽器，然后客戶端通過JS腳本將服務(wù)器反饋回的信息呈現(xiàn)在頁面中。此時，系統(tǒng)用戶就可以通過系統(tǒng)的圖形界面清晰直觀的查看到具體的異常信息。此外圖形系統(tǒng)可以關(guān)聯(lián)設(shè)備管理、運行管理、圖表分析等模塊，更好地完成設(shè)備的日常管理及維護檢修工作。該系統(tǒng)的應用可以很好地監(jiān)測當前的設(shè)備狀態(tài)，提高設(shè)備檢修的針對性，降低設(shè)備故障發(fā)生率。

圖1 系統(tǒng)架構(gòu)圖

機械設(shè)備故障預警圖形系統(tǒng)的核心包括兩部分：第一是設(shè)備矢量圖形的建立，第二是客戶端與服務(wù)器端之間的數(shù)據(jù)通信及頁面信息更新。

1.1 矢量圖形技術(shù)

當前的Web應用系統(tǒng)中，傳統(tǒng)的位圖早已不能滿足網(wǎng)絡(luò)用戶對分辨率、交互性等方面的需求。而矢量圖形由于其文件小、易編輯、可伸縮等優(yōu)點，在Web系統(tǒng)中得到廣泛應用。Web程序開發(fā)中，矢量繪圖的解決方案主要包括SVG、VML等技術(shù)。

VML與 SVG都是基于下一代網(wǎng)絡(luò)標記語言XML的矢量圖形語言。VML由Microsoft等公司提出，但僅在 IE系列瀏覽器支持良好。SVG則是由W3C推出的互聯(lián)網(wǎng)矢量圖形的一個開放標準，但SVG從IE9開始才被IE系列瀏覽器內(nèi)在支持?？紤]到與主流瀏覽器的兼容性，系統(tǒng)采用Rapha?l來繪制設(shè)備矢量圖形。Rapha?l是一個輕量級的繪制矢量圖形的JS類庫[7]，在IE9、Firefox、Chrome等瀏覽器中使用SVG繪制圖形，在IE6/7/8瀏覽器中則使用VML來繪制圖形。

Rapha?l提供了circle、rect、ellipse等函數(shù)直接來繪制圓、矩形、橢圓等標準圖形。對于較復雜的圖形，Rapha?l提供了path方法。其函數(shù)及參數(shù)格式如下：

Paper.path([pathString]) //pathString為SVG格式的路徑字符串

除可以繪制路徑圖形外，Rapha?l還提供了豐富的動畫特效，可實現(xiàn)圖層設(shè)定，集合創(chuàng)建，給元素添加事件等功能。同時還可利用Rapha?l來繪制圖表。

1.2 服務(wù)器推送與Comet技術(shù)

服務(wù)器推送的基礎(chǔ)思想是將客戶端主動查詢信息改為服務(wù)器主動發(fā)送信息。該設(shè)計模式中，服務(wù)器是中心實體，將首先獲得關(guān)于所發(fā)生的任何更改的通知，并負責將此類更改告知所有連接的客戶端。但遺憾的是，Web通訊中的HTTP協(xié)議某種意義上來說是一種單向的協(xié)議，即HTTP場景中的所有通信必須由客戶端發(fā)起，至服務(wù)器結(jié)束。所以我們必須采用其它方法來繞過這些問題，主要解決方案有Ajax輪詢、基于插件（ActiveX、Applet、Flex）的推送技術(shù)和Comet[8]。

Comet有時也稱為反向Ajax，是一種基于HTTP長連接的服務(wù)器推送的實現(xiàn)技術(shù)。Comet的實現(xiàn)方式可以分為兩類：流方式（streaming）和長輪詢方式（long-polling）。

本文采用長輪詢方式實現(xiàn)Comet，其原理如圖2所示：客戶端向服務(wù)器端請求建立連接，服務(wù)器阻塞連接（通過使請求線程在某些條件下處于等待狀態(tài)），當有事件發(fā)生時，服務(wù)器通過該連接發(fā)送數(shù)據(jù)，隨后關(guān)閉連接；客戶端在接收更新后，立即重新建立一個的長輪詢連接[9]?；陂L輪詢的Comet保證了正在通訊的客戶端與服務(wù)器端之間始終存在一個等待響應的HTTP長連接，使得Web服務(wù)器可以在無需顯式請求的情況下主動向客戶端發(fā)送數(shù)據(jù)。

圖2 基于長輪詢的Comet示意圖

2 設(shè)備故障預警圖形系統(tǒng)的實現(xiàn)

2.1 使用Rapha?l繪制設(shè)備矢量圖

要在Web應用程序利用Rapha?l庫來繪圖，需在頁面head標簽內(nèi)包含Rapha?l.js文件，該文件可以從Rapha?l.com網(wǎng)站免費下載。包含js文件的格式如下：

接下來，就可以利用 js腳本進行繪圖。腳本代碼可以直接寫在頁面的script標簽內(nèi)，也可以寫到單獨的js文件中，再在頁面上包含該js文件。

使用Rapha?l庫繪制矢量圖，首先需要創(chuàng)建一個Rapha?l畫布對象，然后方可在畫布上調(diào)用 Rapha?l函數(shù)繪制圖形。

//在html的canvas標簽區(qū)域創(chuàng)建一個寬為1250、高為800的畫布

因為設(shè)備圖形大多較復雜，所以這里采用Rapha?l的path方法。為保證代碼的簡潔性和可重用性，我們?yōu)槊恳环N設(shè)備定義一個函數(shù)，參數(shù) x1、y1為繪圖的起點坐標。一個簡單的設(shè)備示意圖代碼如下：

有了上面的設(shè)備圖形繪制函數(shù)，就可以通過調(diào)用該函數(shù)在定義的畫布Paper上繪圖，并為圖形添加樣式和事件。代碼如下：

//設(shè)定鼠標經(jīng)過時的動畫效果

2.2 基于Comet技術(shù)的故障預警實現(xiàn)

在本系統(tǒng)中，因為服務(wù)器掌握著系統(tǒng)的數(shù)據(jù)資源，往往其最先通過無線網(wǎng)絡(luò)獲取到手持巡檢儀的設(shè)備檢測數(shù)據(jù)。當數(shù)據(jù)更新后，服務(wù)器需要主動將相關(guān)更新信息發(fā)送給客戶端。這與傳統(tǒng)Web應用程序的“請求/響應”模式不同，需要實現(xiàn)“服務(wù)器推送”。

這里我們采用Dojo的Cometd包來實現(xiàn)基于長輪詢的Comet。Dojo已經(jīng)對Cometd做了封裝，我們不用浪費大量的代碼在搭建Cometd框架上。對于前端js腳本代碼，我們只需要加上一個Cometd包的簡單接口代碼，便可以專注于自己的業(yè)務(wù)邏輯代碼了。

瀏覽器根據(jù)接收數(shù)據(jù)進行頁面更新的核心代碼如下：

//接受服務(wù)器端的信息，顯示到界面

equ_graph .attr(style); //為設(shè)備圖設(shè)定相應樣式//繪制閃動報警點

Dojo的Cometd包的后端實現(xiàn)是基于Java和Jetty組件的。配置過 web.xml文件后，我們創(chuàng)建一個DataUpdate類來處理業(yè)務(wù)邏輯。首先需要監(jiān)聽服務(wù)器接收手持巡檢儀數(shù)據(jù)上傳這一事件，當事件發(fā)生時，我們使用Dojo的廣播方式將上傳的更新數(shù)據(jù)發(fā)送給連接著的客戶端。廣播發(fā)送數(shù)據(jù)的代碼如下：

//對"/alarm"頻道廣播消息

運用 Comet技術(shù)，客戶端能夠及時獲取最新的設(shè)備檢測數(shù)據(jù)及其狀態(tài)信息。對于檢測數(shù)據(jù)異常的設(shè)備，可利用JS腳本操作DOM文檔將頁面中相應設(shè)備圖形樣式重設(shè)為黃色虛線（預警樣式），如圖3所示。如需查看該設(shè)備的具體報警部位和點檢數(shù)據(jù)，則可以單擊設(shè)備圖形跳轉(zhuǎn)至該設(shè)備的三視圖，在該視圖下報警部位會閃動以提示用戶，如圖4所示。

圖3 設(shè)備故障預警主界面

圖4 設(shè)備部位圖

3 結(jié)語

狀態(tài)檢修是機械設(shè)備檢修發(fā)展的必然趨勢。在當前的電廠中，基于SVG的電網(wǎng)實時監(jiān)控系統(tǒng)應用普遍，但在機械設(shè)備檢修方面卻缺乏與點檢制度相應的軟件系統(tǒng)。本文實現(xiàn)的基于 Comet技術(shù)的機械設(shè)備故障預警圖形系統(tǒng)，可以很好的應用于火電廠輸煤系統(tǒng)設(shè)備檢修體系中，提高設(shè)備檢修效率。該系統(tǒng)具有以下特點：

（1）UI設(shè)計采用矢量圖形作為顯示格式，豐富直觀，具有良好的交互性，用戶操作方便簡捷。

（2）采用 Comet方式模擬實現(xiàn)服務(wù)器端推送，可有效降低帶寬負荷，提高系統(tǒng)性能，保證數(shù)據(jù)更新的實時性，從而提高設(shè)備檢修效率。

（3）具有良好的擴展性，可以在此基礎(chǔ)上方便地添加設(shè)備管理、運行線路管理、數(shù)據(jù)分析等模塊，進一步掌控設(shè)備的健康狀況及運行趨勢。

Web技術(shù)發(fā)展迅速，隨著HTML5標準的推廣，Canvas、WebSocket、多媒體編程接口等新特性將大大豐富 web應用程序，使矢量圖形和服務(wù)器推送等技術(shù)的實現(xiàn)變得更加安全簡便。在此基礎(chǔ)上建立的設(shè)備故障預警系統(tǒng)必將更加人性化、智能化，為設(shè)備的安全運行發(fā)揮更大作用。

參考文獻：

[1] 石東源, 盧炎生, 王星華, 等. SVG及其在電力系統(tǒng)軟件圖形化中的應用初探[J]. 繼電器, 2004, 32(16): 37-40.

[2] 敖麗敏, 李林輝. 基于 AJAX的電力圖形系統(tǒng)的實現(xiàn)[J].電力系統(tǒng)自動化, 2007, 31(9): 47-50, 81.

[3] 胡冰, 章堅民, 馬國梁, 等. 基于SVG/AJAX/Internet的電廠運行監(jiān)控系統(tǒng)[J]. 機電工程, 2011, 28(8): 905-909.

[4] 郭挺, 謝敏, 劉明波, 等. SVG和Ajax技術(shù)在電網(wǎng)分析與輔助決策支持系統(tǒng)中的應用[J]. 電力系統(tǒng)保護與控制, 2012, 40(4): 83-89.

[5] Sandeep Malik. Implement a real-time server push in Ajax applications using socket-based RIA technologies [EB/OL]. [2009-9-22]. http://www.ibm.com/developerworks/cn/web/wa -aj-socket/.

[6] 耿方, 朱曉民, 李煒. 基于Web的實時監(jiān)控系統(tǒng)的研究與實現(xiàn)[J]. 電信工程技術(shù)與標準化, 2011(11): 75-79.

[7] Rapha?l. Rapha?l-JavaScript Library [EB/OL]. [2013-1-10]. http://raphaeljs.com/.

[8] 孫清國, 朱瑋, 劉華軍, 等. Web應用中的服務(wù)器推送技術(shù)研究綜述[J]. 計算機系統(tǒng)應用, 2008(11): 116-120.

[9] Mathieu Carbou. Reverse Ajax Part 1: Introduction to Comet [EB/OL]. [2011-7-19]. http://www.ibm.com/developerworks /web/library/wa-reverseajax1.

Research and Realization of the Fault Alarm Graphic System for Mechanical Equipment based on Comet

WANG Zu-min1, WANG Yuan-xi1, SUN Ji-wu2
(1. Information and Engineering College of Dalian University, Dalian 116622, China; 2. Electromechanical Engineering Institute, Changchun Institute of Technology, Changchun 130012, China)

In order to improve the efficiency of mechanical equipment maintenance in the fuel delivery department of thermal power plant, and solve the problems of real-time and convenience in the corresponding software, this paper puts forward a fault alarm graphic system for mechanical equipment based on Comet. In this system, Rapha?l was used to portray vector graphic. Combined with the script programming of document object model (DOM), friendly interoperability of the graphics system was realized. The server-push of data-information was implemented by Ajax long-polling, and the asynchronous communication mechanism of Ajax solved the problem of real-time dynamic refreshment effectively. To improve the real-time information, and reduce the server pressure, the system brings a better user experience.

equipment maintenance; fault alarm; graphic system; sever-push; Comet

TP393.0

：A

：1008-2395(2013)06-0018-05

2013-10-15

吉林省教育廳“十一五”科學技術(shù)研究項目(2010195)。

汪祖民（1975－），男，博士，副教授，研究方向：物聯(lián)網(wǎng)應用技術(shù)。