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

汪祖民，王原習(xí)，孫繼武

（1. 大連大學(xué) 信息工程學(xué)院，遼寧 大連 116622；2. 長(zhǎng)春工程學(xué)院 機(jī)電工程學(xué)院，吉林 長(zhǎng)春 130012）

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

汪祖民1，王原習(xí)1，孫繼武2

（1. 大連大學(xué) 信息工程學(xué)院，遼寧 大連 116622；2. 長(zhǎng)春工程學(xué)院 機(jī)電工程學(xué)院，吉林 長(zhǎng)春 130012）

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

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

0 引 言

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

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

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

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

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

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

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

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

1.1 矢量圖形技術(shù)

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

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

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

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

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

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

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

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

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

圖2 基于長(zhǎng)輪詢(xún)的Comet示意圖

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

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

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

接下來(lái)，就可以利用 js腳本進(jìn)行繪圖。腳本代碼可以直接寫(xiě)在頁(yè)面的script標(biāo)簽內(nèi)，也可以寫(xiě)到單獨(dú)的js文件中，再在頁(yè)面上包含該js文件。

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

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

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

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

//設(shè)定鼠標(biāo)經(jīng)過(guò)時(shí)的動(dòng)畫(huà)效果

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

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

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

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

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

equ_graph .attr(style); //為設(shè)備圖設(shè)定相應(yīng)樣式//繪制閃動(dòng)報(bào)警點(diǎn)

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

//對(duì)"/alarm"頻道廣播消息

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

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

圖4 設(shè)備部位圖

3 結(jié)語(yǔ)

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

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

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

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

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

參考文獻(xiàn)：

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

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

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

[4] 郭挺, 謝敏, 劉明波, 等. SVG和Ajax技術(shù)在電網(wǎng)分析與輔助決策支持系統(tǒng)中的應(yīng)用[J]. 電力系統(tǒng)保護(hù)與控制, 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的實(shí)時(shí)監(jiān)控系統(tǒng)的研究與實(shí)現(xiàn)[J]. 電信工程技術(shù)與標(biāo)準(zhǔn)化, 2011(11): 75-79.

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

[8] 孫清國(guó), 朱瑋, 劉華軍, 等. Web應(yīng)用中的服務(wù)器推送技術(shù)研究綜述[J]. 計(jì)算機(jī)系統(tǒng)應(yī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

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

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