基于Ajax的四層架構(gòu)遠(yuǎn)程監(jiān)測系統(tǒng)設(shè)計

高 鵬，徐小力，，吳國新，蔣章雷

（1.北京信息科技大學(xué) 現(xiàn)代測控教育部重點實驗室，北京100192；2.北京理工大學(xué) 機械與車輛工程學(xué)院，北京100081）

0 引 言

隨著計算機、電子技術(shù)的發(fā)展，遠(yuǎn)程監(jiān)測技術(shù)越來越受到人們的重視。傳統(tǒng)的C／S模式的監(jiān)控系統(tǒng)，需要在客戶端安裝相應(yīng)的軟件，來處理主要的事務(wù)邏輯，且可能存在跨平臺無法運行的問題［1］。而傳統(tǒng)B／S技術(shù)一般純粹使用THML／CSS布局使得監(jiān)測系統(tǒng)開發(fā)時間長，用戶界面不友好，網(wǎng)絡(luò)傳輸效率低，操作不流暢等缺點。同時，網(wǎng)絡(luò)架構(gòu)不具有良好的可擴展性、靈活性、可維護(hù)性。針對上述缺點不少學(xué)者進(jìn)行了改進(jìn)，文獻(xiàn) ［2］實現(xiàn)了基于SOA的設(shè)備遠(yuǎn)程監(jiān)測與故障診斷系統(tǒng)，通過對業(yè)務(wù)邏輯和功能需求，進(jìn)行不同層次的抽象和劃分，建立了松散耦合的Web服務(wù)系統(tǒng)。文獻(xiàn) ［3］使用三層B／S模式實現(xiàn)了發(fā)電設(shè)備的遠(yuǎn)程監(jiān)測和診斷系統(tǒng)的開發(fā)，在一定程度解決了系統(tǒng)可維護(hù)性和可擴展性問題，但它不能很好體現(xiàn)友好界面設(shè)計思想。并且監(jiān)測和設(shè)備管理分離，不能體現(xiàn)現(xiàn)代監(jiān)測系統(tǒng)信息集成的思想。

針對以上問題，提出一種基于Ajax和jQuery的四層架構(gòu)B／S遠(yuǎn)程監(jiān)測系統(tǒng)。系統(tǒng)采用Ajax和jQuery技術(shù)以提高軟件前端開發(fā)效率，提高頁面的響應(yīng)速度和Web應(yīng)用程序的動態(tài)性，增加用戶界面的友好性。同時，系統(tǒng)使用四層架構(gòu)體現(xiàn)模塊化和代碼松散耦合的設(shè)計思想，降低了系統(tǒng)的耦合性，增加系統(tǒng)的構(gòu)件化水平，這樣不僅縮短開發(fā)周期，降低開發(fā)成本，還使系統(tǒng)更具有良好的可擴展性、靈活性、可維護(hù)性。

1 Ajax和jQuery概述

相對傳統(tǒng)的基于頁面導(dǎo)航的Web應(yīng)用程序，Ajax應(yīng)用程序通常是一個單頁面應(yīng)用程序，應(yīng)用程序利用GUI的事件和異步傳輸與Web服務(wù)器通信［6］。Ajax是融合了多種技術(shù)，它使用文檔對象模型 （document object model）來實現(xiàn)動態(tài)顯示和交互；并且用CSS 和XHTML 標(biāo)準(zhǔn)化；使用XMLHttpRequest與服務(wù)器進(jìn)行異步通信，進(jìn)行異步數(shù)據(jù)查詢、檢索，從而使獲得數(shù)據(jù)在頁面進(jìn)行局部刷新；使用XML和XSLT 進(jìn)行數(shù)據(jù)交換與處理及排序過濾等操作；采用JavaScript綁定和處理所有數(shù)據(jù)，并且支持異步與同步處理等特點［4，5］。

Ajax基本原理是Ajax采用異步傳送與請求機制，它應(yīng)用了一個由JavaScript編寫的中間媒介Ajax引擎消除在瀏覽器與Web服務(wù)器之間的等待，使用戶瀏覽器操作與Web服務(wù)器響應(yīng)異步化。一些數(shù)據(jù)處理和驗證由中間層Ajax處理，用戶和服務(wù)器只交換有用的數(shù)據(jù)。只有確定需要從服務(wù)器交換新數(shù)據(jù)時才能由Ajax引擎向服務(wù)器提交訪問請求，從而避免一些不必要的用戶請求提交給服務(wù)器，造成服務(wù)器處理負(fù)擔(dān)過大［7，9］。

Ajax具有減輕服務(wù)器的負(fù)擔(dān)，無刷新更新頁面，減少用戶的等待時間等優(yōu)點，它只和服務(wù)器交換有用的數(shù)據(jù)，而頁面元素、版式等不必要的數(shù)據(jù)則不再重新從服務(wù)器端加載，提高了網(wǎng)絡(luò)傳輸效率使得應(yīng)用過程很自然，操作很流暢。而采用同步處理方式，當(dāng)處理時間比較長會造成瀏覽器在一段時間內(nèi)無響應(yīng)，會給用戶不友好的感受［10］。

為了使界面具有更好的靈活性和界面友好，系統(tǒng)開發(fā)周期更快，用戶層使用一個JavaScript著名的開源庫jQuery技術(shù)，jQuery由John Resig在2006年發(fā)布，以簡單的代碼實現(xiàn)更強大的功能簡潔、快速、靈活的JavaScript框架。引入jQuery后，開發(fā)人員能做到 “寫得更少，做得更多”，能將JS代碼和HTML 代碼完全分離，便于代碼的維護(hù)和修改，從而減少網(wǎng)絡(luò)頁面布局時間提高開發(fā)效率［11］。

2 系統(tǒng)架構(gòu)設(shè)計

系統(tǒng)使用C＃語言，ASP.NET 平臺開發(fā)。使用微軟SQL Server 2008數(shù)據(jù)庫作為系統(tǒng)數(shù)據(jù)庫，使用ADO.NET技術(shù)訪問數(shù)據(jù)庫系統(tǒng)。為了使系統(tǒng)具有良好的可擴展性和可移植性，系統(tǒng)分為4個層次：采集層、數(shù)據(jù)層、中間層和用戶層。這樣降低了系統(tǒng)的耦合性，增加系統(tǒng)的構(gòu)件化水平，使系統(tǒng)各層之間分工明確，基礎(chǔ)框架模塊與擴展模塊之間功能定位明確，縮短開發(fā)周期，降低開發(fā)成本［12］。同時，考慮系統(tǒng)的靈活性、可擴展性、可維護(hù)性和代碼的松散耦合，系統(tǒng)網(wǎng)站采用三層結(jié)構(gòu)即：數(shù)據(jù)層，邏輯業(yè)務(wù)層和用戶界面層。系統(tǒng)架構(gòu)4個層次如圖1所示。

圖1 風(fēng)電監(jiān)測系統(tǒng)架構(gòu)

2.1 系統(tǒng)各個層次

遠(yuǎn)程監(jiān)測采集層是傳感器采集到的信號通過調(diào)理電路傳送給ARM 采集卡，然后把采集到的信號和測點信息進(jìn)行編碼打包成數(shù)據(jù)包，通過TCP／IP 協(xié)議的Socket技術(shù)把數(shù)據(jù)包傳送到工控機進(jìn)行實時監(jiān)測。采集層對監(jiān)測對象各采集點的部署很重要，采集點一般部署在監(jiān)測對象振動或故障敏感點上。采集層是數(shù)據(jù)的源頭，采集的數(shù)據(jù)可靠與否對后層數(shù)據(jù)處理和顯示起著決定性的作用。

數(shù)據(jù)層是數(shù)據(jù)庫服務(wù)器部分，把現(xiàn)場工控機接受的數(shù)據(jù)包，通過相關(guān)軟件進(jìn)行解碼，然后把解碼的數(shù)據(jù)包寫的SQL Server數(shù)據(jù)庫中。中間層是網(wǎng)站三層結(jié)構(gòu)的數(shù)據(jù)訪問層和業(yè)務(wù)邏輯層。中間層部署在Web服務(wù)器上，它是系統(tǒng)軟件部分的核心，系統(tǒng)的各個功能模塊的算法都在這個層中編寫。

用戶層Web界面設(shè)計使用母板頁方法布局。同時，用戶界面支持在線打印和下載功能，為用戶進(jìn)行數(shù)據(jù)和圖片分析提供了方便。

2.2 系統(tǒng)各層次之間的通信

監(jiān)測系統(tǒng)數(shù)據(jù)通信有3種通信模式即：下拉模式、上推模式和混合模式。下拉模式是采集設(shè)備先接受到命令請求再進(jìn)行響應(yīng)，上推模式是采集設(shè)備主動上傳數(shù)據(jù)［13］。系統(tǒng)采集層與數(shù)據(jù)層采用的上推模式，數(shù)據(jù)層與監(jiān)測上層采用下拉模式即請求響應(yīng)模式。

采集層與數(shù)據(jù)層之間的通信是通過TCP／IP 協(xié)議的套接字 （Socket）實現(xiàn)的，套接字又分為流套接字 （Stream Socket）和數(shù)據(jù)報套接字 （Datagram），其中流套接字提供可靠的端到端連接，因為監(jiān)測系統(tǒng)對數(shù)據(jù)的實時性要求不高，對數(shù)據(jù)的可靠性要求比較高，系統(tǒng)使用流套接字，即：TCP流套接字。TCP通信由現(xiàn)場工控機把采集的數(shù)據(jù)通過服務(wù)器端軟件發(fā)送到數(shù)據(jù)層即客戶端，然后客戶端把接受到的數(shù)據(jù)通過相關(guān)代碼寫入到數(shù)據(jù)庫中，其過程如圖2所示［14，15］。

圖2 現(xiàn)場工控機與數(shù)據(jù)層底層Socket通信

數(shù)據(jù)層與中間層之間的通信是通過中間層使用ADO.NET 對象訪問數(shù)據(jù)庫來實現(xiàn)的，使上層的數(shù)據(jù)寫入到數(shù)據(jù)庫和讀取下層的數(shù)據(jù)。

中間層和用戶層之間的通信是通過網(wǎng)站三層架構(gòu)每層訪問實體類來實現(xiàn)的，網(wǎng)站三層結(jié)構(gòu)由數(shù)據(jù)訪問層層（WindPowerMonitor.Dal）業(yè) 務(wù)邏輯 層 （WindPowerMonitor.Bll）和表示層 （WindPowerMonitor）構(gòu)成，通過實體類 （WindPowerMonitor.Model）完成各層之間的通信。

3 監(jiān)測界面的定時局部刷新技術(shù)

監(jiān)測系統(tǒng)的下層硬件采用上推的方式每隔10s每個傳感器向上層發(fā)送一組數(shù)據(jù)供上層監(jiān)測用戶使用。為了實時顯示最新數(shù)據(jù)，系統(tǒng)必須每隔幾秒刷新一下頁面，傳統(tǒng)方法使用在aspx頁面開頭head加Refresh 標(biāo)簽＜meta httpequiv＝"refresh"content＝"10"／＞來實現(xiàn)的，這種方法會刷新不需要更新的頁面元素使整個頁面回發(fā)，會造成整個界面出現(xiàn)閃動，增加界面響應(yīng)時間，并且影響用戶對界面的操作。為避免出現(xiàn)整體閃動提高頁面響應(yīng)速度，系統(tǒng)使用Ajax技術(shù)來對界面進(jìn)行局部定時刷新。系統(tǒng)需要刷新的界面使用ASP.NET Ajax腳本庫的ScriptManager，UpdatePanel和Timer來對系統(tǒng)局部控件進(jìn)行刷新［16］。

在系統(tǒng)中定時需要刷新的控件主要是實時監(jiān)測模塊網(wǎng)頁中的Gridview 和圖譜分析模塊網(wǎng)頁中的Chart控件，它們需要定時的更新數(shù)據(jù)實時對風(fēng)電機組運行狀態(tài)進(jìn)行監(jiān)測。

4 jQuery在系統(tǒng)的應(yīng)用

jQuery具有訪問和操作DOM 元素，控制頁面樣式CSS，對頁面事件進(jìn)行處理，大量插件在頁面中運用和與Ajax技術(shù)完美結(jié)合等特點。下載jQuery框架文件保存在項目文件夾Jscript中，在頁面的＜head ＞＜／head ＞加入以下代碼：

jQuery擁有強大的插件庫，系統(tǒng)使用jQuery的Accordion插件來實現(xiàn)頁面的上下級聯(lián)菜單等技術(shù)使網(wǎng)絡(luò)頁面更流暢，用戶界面更加友好。

5 監(jiān)測系統(tǒng)功能實現(xiàn)與測試

5.1 在線監(jiān)測模塊

實時監(jiān)測模塊是為了實時地監(jiān)測機組的運行狀態(tài)，判斷機組是否正常運行及出現(xiàn)設(shè)備故障的征兆。模塊包括機組狀態(tài)列表、振動監(jiān)測列表、振動分析列表、過程報警日志和系統(tǒng)日志。機組狀態(tài)列表監(jiān)測記錄機組的狀態(tài)是否正常、停機的次數(shù)、機組的開機時間、機組的最后停機時間、機組的描述和機組的位置；通過機組狀態(tài)列表可以了解機組的基本運行狀況。振動監(jiān)測列表監(jiān)測記錄每個振動采集點隨時間變化振動幅值的大小。振動分析列表是對振動進(jìn)行分析計算出振動的倍頻值、有效值、均值、峰值、方根幅值和各種指標(biāo)為用戶對機組是否故障及故障的部位類型等做出判斷，有效地進(jìn)行遠(yuǎn)程故障診斷。同時，過程報警日志對機組運行過程中的報警進(jìn)行記錄。圖3所示為系統(tǒng)測試時的機組狀態(tài)監(jiān)測列表，從表中可以看到各個測點的運行狀態(tài)。

5.2 機組管理模塊

圖3 系統(tǒng)機組狀態(tài)列表

機組管理模塊包括機組信息管理、保養(yǎng)記錄、維修記錄和庫存管理。系統(tǒng)的設(shè)計體現(xiàn)信息集成及物聯(lián)網(wǎng)的思想，通過把設(shè)備管理與維修的信息集成到一個網(wǎng)絡(luò)中，方便企業(yè)管理和資源統(tǒng)一調(diào)度，提高企業(yè)效率。用戶在網(wǎng)站上就能看到機組管理信息和維修保養(yǎng)記錄，方便用戶對保養(yǎng)和維修的歷史記錄查詢及在維修中查詢庫存對各個零部件的庫存位置進(jìn)行查詢。機組管理模塊方便了用戶的使用，使對風(fēng)電機組的管理更加科學(xué)，體現(xiàn)了現(xiàn)代企業(yè)信息化平臺建設(shè)和信息系統(tǒng)集成設(shè)計思想。圖4所示為機組信息管理列表，從表中可以看到風(fēng)電機組的信息。

圖4 系統(tǒng)機組維修記錄列表

6 結(jié)束語

本文提出一種基于Ajax和jQuery的四層架構(gòu)B／S遠(yuǎn)程監(jiān)測系統(tǒng)。系統(tǒng)使用代碼松散耦合、可重用性的設(shè)計原則，同時采用四層架構(gòu)設(shè)計，提高了系統(tǒng)的可擴展性，可維護(hù)性和靈活性，便于系統(tǒng)的修改和擴展。同時，系統(tǒng)使用Ajax和jQuery等網(wǎng)絡(luò)前端新技術(shù)，實現(xiàn)了頁面的局部刷新，提高了頁面響應(yīng)速度使用戶界面更加友好。系統(tǒng)以風(fēng)力發(fā)電機組為監(jiān)測對象，經(jīng)過軟件測試監(jiān)測系統(tǒng)能夠較好地實現(xiàn)用戶的遠(yuǎn)程在線監(jiān)測和機組的管理功能。系統(tǒng)具有較好的可移植性，也可以在石化、冶金、煤炭等行業(yè)設(shè)備監(jiān)測和管理中使用。

［1］WU Canpei，HU Shunhao，WANG Haihang，et al.Web remote real－time monitoring and control system based on Ajax and SVG ［J］.Computer Engineering and Design，2011，32 （9）：3004－3008 （in Chinese）.［吳燦培，胡順豪，王海航，等.基于Ajax和SVG 的Web遠(yuǎn)程實時監(jiān)控系統(tǒng) ［J］.計算機工程與設(shè)計，2011，32 （9）：3004－3008.］

［2］YANG Bin，ZHANG Weidong，WU Zhangming，et al.Architecture of remote monitoring and diagnosis system based on service－oriented architecture（SOA） ［J］.Journal of Vibration and Shock，2011，30 （3）：85－90 （in Chinese）.［楊斌，張衛(wèi)冬，伍章明，等.基于SOA 的設(shè)備遠(yuǎn)程監(jiān)測與故障診斷系統(tǒng)體系結(jié)構(gòu)研究 ［J］.振動與沖擊，2011，30 （3）：85－90.］

［3］WANG Jiang，LU Songyuan.Research on Web－based remote monitoring and fault diagnosis system for power plant equipments［J］.Power Engineering，2004，24 （5）：684－689 （in Chinese）. ［汪江，陸頌元.發(fā)電設(shè)備遠(yuǎn)程監(jiān)測診斷系統(tǒng)的Web技術(shù)實現(xiàn) ［J］.動力工程，2004，24 （5）：684－689.］

［4］LV Lintao，WAN Jinghua，ZHOU Hongfang.Research of not refurbishing and updating data method in AJAX Web application［J］.Application Research of Computers，2006，23 （11）：199－200 （in Chinese）. ［呂林濤，萬經(jīng)華，周紅芳.基于AJAX 的Web無刷新頁面快速更新數(shù)據(jù)方法 ［J］.計算機應(yīng)用研究，2006，23 （11）：199－200.］

［5］ZHAO Yongyi，SU Hongyi.Design and implementation of new Web application based on AJAX and J2EE ［J］.Computer Engineering and Design，2007，28 （1）：189－192（in Chinese）.［趙永屹，宿紅毅.基于AJAX與J2EE的新型Web應(yīng)用的設(shè)計與實現(xiàn)［J］.計算機工程與設(shè)計，2007，28 （1）：189－192.］

［6］A Marchetto，P Tonella，F(xiàn) Ricca.ReAjax：A reverse engineering tool for Ajax Web applications ［J］.IET Software，2012，6 （1）：33－49.

［7］YOU Lizhen，GUO Yuchun，LI Chunxi.The principle and application of Ajax engine ［J］.Control and Automation，2006，22 （6）：205－208 （in Chinese）. ［游麗貞，郭宇春，李純喜.Ajax 引擎的原理和應(yīng)用 ［J］.微計算機信息，2006，22 （6）：205－208.］

［8］XIONG Wen，XIONG Shuhua，SUN Xu，et al.Application research of Ajax in Web2.0 website design ［J］.Computer Technology and Development，2012，22 （3）：145－148 （in Chinese）.［熊文，熊淑華，孫旭，等.Ajax技術(shù)在Web2.0網(wǎng)站設(shè)計中的應(yīng)用研究 ［J］.計算機技術(shù)與發(fā)展，2012，22（3）：145－148.］

［9］ZHU Jian，LU Bingliang，LIU Junying，et al.Application of Ajax technique in Web system developing ［J］.Journal of Shenyang Institute of Aeronautical Engineering，2007，24 （2）：29－31 （in Chinese）.［朱健，盧秉亮，劉君英，等.Ajax技術(shù)在Web開發(fā)中的應(yīng)用 ［J］.沈陽航空工業(yè)學(xué)院學(xué)報，2007，24（2）：29－31.］

［10］ZHAO Yongyi，SU Hongyi，HU Shaohui.Design and implementation of new Web application based on AJAX and J2EE［J］.Computer Engineering and Design，2007，28 （1）：189－191 （in Chinese）. ［趙永屹，宿紅毅，胡韶輝.基于AJAX與J2EE的新型Web應(yīng)用的設(shè)計與實現(xiàn) ［J］.計算機工程與設(shè)計，2007，28 （1）：189－191.］

［11］Dmethvin.jQuery 1.9.1 Released ［EB／OL］.http：／／blog.jquery.com／2013／02／04／jquery－1－9－1－released／html，2013.

［12］GAO Yang.Design and realization of three layers structure software framework based on.NET ［J］.Computer Technology and Development，2011，21 （2）：77－81 （in Chinese）.［高揚.基于.NET 平臺的三層架構(gòu)軟件框架的設(shè)計與實現(xiàn)［J］.計算機技術(shù)與發(fā)展，2011，21 （2）：77－81.］

［13］LU Lu，LIU Fagui.Web－based remote monitoring system［M］.Beijing：Publishing House of Tsinghua University，2008 （in Chinese）.［陸璐，劉發(fā)貴.基于Web的遠(yuǎn)程監(jiān)控系統(tǒng) ［M］.北京：清華大學(xué)出版社，2008.］

［14］ZHENG Aqi.Visual C＃ network programming ［M］.Beijing：Publishing House of Electronics Industry，2011 （in Chinese）.［鄭阿奇.Visual C＃ 網(wǎng)絡(luò)編程 ［M］.北京：電子工業(yè)出版社，2011.］

［15］MA Fengjie，LI Lihong，WANG Shujuan.Design and application of monitoring center in coal yield remote monitoring system ［J］.Software，2011，32 （2）：90－93 （in Chinese）.［馬豐杰，李麗宏，王淑娟.煤炭產(chǎn)量遠(yuǎn)程監(jiān)測系統(tǒng)監(jiān)控中心的設(shè)計與應(yīng)用 ［J］.軟件，2011，32 （2）：90－93.］

［16］Matthew MacDonald，Adam Freeman，Mario Szpuszta.Pro ASP.NET 4in C＃ 2010 ［M］.Beijing：Post ＆ Telecom Press，2011 （in Chinese）.［Matthew MacDonald，Adam Freeman，Mario Szpuszta.ASP.NET 4高級程序設(shè)計 ［M］.博思工作室，譯.北京：人民郵電出版社，2011.］