基于DWR反向AJAX的Web監控系統

目前Web監控系統已經(jīng)得到了普遍運用，許多新的監控系統都采用了Web作為監控系統的客戶(hù)端，極大方便了監控系統的操作管理人員，減輕了監控系統的維護成本。如何解決傳統Web監控系統的數據讀取請求/響應模式的缺點(diǎn)，以及監測數據顯示頁(yè)面刷新的難題[1]，一直是Web監控系統開(kāi)發(fā)人員不懈努力的難題。

在實(shí)現Web監控系統的技術(shù)多種多樣，各有千秋，AJAX技術(shù)成為首選之一，不論服務(wù)器端采用JavaEE還是MS.NET平臺。雖然AJAX解決了整個(gè)監控畫(huà)面的局部刷新問(wèn)題，但AJAX依然采用HTTP請求/響應模式讀取服務(wù)器端取得的Web監控數據[2]。AJAX框架DWR[3]最新版本推出了反向AJAX技術(shù)，使數據從服務(wù)器推送到Web客戶(hù)端成為可能，滿(mǎn)足了監控系統實(shí)時(shí)性要求。

采用DWR框架和反向AJAX，結合Java多線(xiàn)程技術(shù)和Siemens Simatic S7-400 PLC TCP/IP通訊模塊CP243-1 IT，開(kāi)發(fā)了新的Web監控系統，并在供熱公司供熱管路監控系統中實(shí)際運用。替換了原有的C/S模式的工業(yè)控制機，達到了用戶(hù)的功能需求。

1 DWR技術(shù)

1.1 DWR框架

DWR(Direct Web Remoting)是一個(gè)Web遠程調用AJAX擴展框架，通過(guò)DWR客戶(hù)端的JavaScript可以直接調用Web服務(wù)器上的JavaBean類(lèi)的方法，解決了原有AJAX應用必需請求HTTP控制組件(如Servlet，Struts的Action等)才能調用服務(wù)器端業(yè)務(wù)類(lèi)的方法，從而簡(jiǎn)化了AJAX應用的開(kāi)發(fā)。使用DWR可以不需要編寫(xiě)復雜的控制層組件。

1.2 DWR反向AJAX技術(shù)

正常情況下，DWR調用服務(wù)器端的JavaBean對象方法使用正向請求/響應模式，也稱(chēng)為拉模式(Pull Model)，由客戶(hù)端JavaScript調用JavaBean方法，返回結果通過(guò)回調方法更新頁(yè)面上的HTML元素，實(shí)現監控數據的顯示。這種正向模式符合一般的管理系統應用，但對監控系統實(shí)時(shí)性要求較高的應用卻力不從心。而反向模式即推模式(Push Model)，是適應監控系統的最佳方式，由服務(wù)器組件將取得的監控數據推送到Web客戶(hù)端，不需要客戶(hù)端主動(dòng)請求，而是被動(dòng)接收。因而無(wú)需進(jìn)行Web層進(jìn)行頁(yè)面刷新，即可實(shí)現數據更新顯示。

最新版本的DWR 2.X增加了反向(Reverse AJAX)功能，通過(guò)反向AJAX功能，服務(wù)器端的JavaBean對象可以將取得的數據直接推送到指定的客戶(hù)端頁(yè)面，寫(xiě)到指定的HTML元素內，這個(gè)過(guò)程不需要客戶(hù)端進(jìn)行任何的請求操作。

2 監控系統設計與實(shí)現

2.1 總體結構

整個(gè)監控系統采用下位監控子系統、上位Web服務(wù)器和客戶(hù)端三層結構，如圖1所示。

下位監控子系統采用Siemens Simatic S7-400 PLC，連接溫度、壓力及流量傳感器，并配置TCP/IP通信控制單元(CP343)。上位Web服務(wù)器采用開(kāi)源Tomcat6.0.20，它針對新的JDK6進(jìn)行了性能的優(yōu)化，極大提高了響應速度，滿(mǎn)足監控實(shí)時(shí)性需求，在Tomcat6 Web中配置DWR Servlet，負責與客戶(hù)端Javascript進(jìn)行通信，服務(wù)器端使用JavaBean多線(xiàn)程技術(shù)，通過(guò)Socket和TCP/IP協(xié)議與PLC通信，讀取PLC監控數據，使用DWR反向AJAX技術(shù)將監控數據推向客戶(hù)端的HTML元素進(jìn)行顯示?？蛻?hù)端使用IE瀏覽器被動(dòng)接收服務(wù)器推送的數據，實(shí)時(shí)更新監測數據。

2.2 服務(wù)器端DWR配置

為使用DWR，需要在/WEB-INF/web.xml中配置DWR Servlet，并設定請求URL地址，同時(shí)通過(guò)設置參數activeReverseAjaxEnabled為true來(lái)啟用反向AJAX。配置代碼如下：

servlet>
servlet-name>dwr-invoker/servlet-name>
servlet-class>org.directwebremoting.servlet.DwrServlet/servlet-class>
init-param>
param-name>activeReverseAjaxEnabled/param-name>
param-value>true/param-value>
/init-param>
init-param>
param-name>pollAndCometEnabled/param-name>
param-value>true/param-value>
/init-param>
load-on-startup>1/load-on-startup>
/servlet>
servlet-mapping>
servlet-name>dwr-invoker/servlet-name>
url-pattern>/dwr/*/url-pattern>
/servlet-mapping>

2.3 監控業(yè)務(wù)單元JavaBean編程

(1)服務(wù)器端JavaBean

以多線(xiàn)程方式，每個(gè)監測點(diǎn)為獨立的線(xiàn)程，使用TCP/IP和Socket讀取Siemens Simatic S7 PLC的監測數據，并使用DWR Reverse AJAX和DOM直接寫(xiě)入到客戶(hù)端的HTML中。其中一個(gè)監測點(diǎn)線(xiàn)程示意代碼如下：

public void run() throws InterruptedException
{
WebContext wctx=WebContextFactory.get()；
String currentPage=wctx.getCurrentPage()；
Collection sessions=wctx.getScriptSessionsByPage(currentPage)；
//通過(guò)TCP/IP讀取PLC指定監測點(diǎn)的數據
double data=PLCRemote.getData(ip，siteNo)；
Util utilAll=new Util(sessions)；
//將監測數據通過(guò)DWR反向AJAX直接寫(xiě)入客戶(hù)HTML頁(yè)面div>元素中
　　utilAll.setValue(siteNo，String.valueOf(date))；
}

關(guān)鍵是使用DWR反向AJAX的Util對象的setValue方法，將監測數據寫(xiě)到DIV元素id為siteNo值的單元中。

(2)配置JavaBean到DWR

使用DWR的配置文件/WEB-INF/dwr.xml，將JavaBean引入到DWR體系中，通過(guò)JavaScript就可以直接調用JavaBean的監測方法。

dwr>
allow>
convert match=“com.lushu.control.value.*” converter=“bean”>/convert>
create creator=“new” javascript=“DataChecking”>
param name=“class” value=“com.lushu.control.business.DataChecking”/>
/create>
/allow>
/dwr>

其中，javascript屬性指定JavaScript中對象的名稱(chēng)，creator=“new”指定由DWR引擎自動(dòng)創(chuàng )建JavaBean類(lèi)的實(shí)例。

2.4 客戶(hù)端實(shí)現

客戶(hù)端使用DWR代碼庫，用JavaScript結合HTML，DOM實(shí)現監控Web頁(yè)面的數據顯示。為節省篇幅，只介紹重點(diǎn)配置和示意代碼。

(1)引入DWR代碼庫

這里使用HTML與JavaScript分離原則，JavaScript代碼放在單獨的JS文件中。

script type=‘text/javascript’ src=‘/lsweb/dwr/util.js’>/script>
script type=‘text/javascript’ src=‘/lsweb/dwr/interface/DataChecking.js’>/script>
script type=‘text/javascript’ src=‘/lsweb/dwr/engine.js’>/script>
script type=‘text/javascript’ src=‘main.js’>/script>

(2)啟用DWR反向AJAX

在main.js中定義所有監控業(yè)務(wù)的函數。

function checkInit()
{ dwr.engine.setActiveReverseAjax(true)； }
window.onload=checkInit；

(3)定義監控數據接收HTML單元

在監控頁(yè)面上使用div id=”測點(diǎn)ID”>/div>定義DWR反向AJAX推送數據的顯示位置，由服務(wù)器端JavaBean通過(guò)DWR AJAX直接讀取?？蛻?hù)端頁(yè)面和JavaScript不需進(jìn)行任何請求操作。部分測點(diǎn)示意如下：

tr>
td>一小區#2/td>
td>div id=“no01”>/div>/td>
td>div id=“no02”>/div>/td>
td>div id=“no03”>/div>/td>
/tr>

(4)JavaScript調用JavaBean方法

啟動(dòng)服務(wù)器端JavaBean監測方法讀取PLC數據，進(jìn)行數據推送。在監測方法內啟動(dòng)所有監測點(diǎn)的監測線(xiàn)程，實(shí)時(shí)監測數據并推送到客戶(hù)端。

function startChecking()
{
//通過(guò)DWR直接調用服務(wù)器端JavaBean的監測數據方法
DataChecking.sendCheckData()；
}

結合JavaEE平臺、AJAX、DWR和反向AJAX，實(shí)現了一個(gè)全新的無(wú)需頁(yè)面刷新、無(wú)需進(jìn)行HTTP請求的全新Web監控系統，解決了傳統Web的HTTP請求/響應模式無(wú)法滿(mǎn)足監控系統實(shí)時(shí)性要求的難題。尤其是反向AJAX技術(shù)實(shí)現的推模式，可以將服務(wù)器端監測數據直接通過(guò)TCP/IP推送到HTML客戶(hù)端，并直接寫(xiě)入到HTML元素中，得以實(shí)現與現有Web監控系統傳統模式完全不同的全新系統，實(shí)現了無(wú)需進(jìn)行頁(yè)面刷新的工作模式。由于只傳輸監控數據，無(wú)需傳輸數據格式HTML代碼，系統性能得到了極大改善，滿(mǎn)足了監控系統對實(shí)時(shí)性的要求。今后無(wú)刷新、推模式的Web監控系統必將得到廣泛應用。