基于Ajax和SVG的Web遠程實時監控系統

吳燦培， 胡順豪， 王海航， 沈先海

(上海大學機電工程與自動化學院，上海200072)

0 引 言

目前計算機系統、通信設備數量及現場設備與日俱增，規模越來越大，有的所處環境惡劣，為保證其安全正常運行，與之配套的現場環境因素、安防系統等必須時刻穩定協調工作。因此，實現各種現場設備的遠程實時監控與管理維護，可以確保現場設備運行的安全性和穩定性，提高整個系統運行的可靠性。傳統的C/S(Client/Server，客戶端/服務器)模式的監控系統，需要額外在客戶端安裝相應的軟件，來處理主要的事務邏輯，且可能存在跨平臺無法運行的問題。而B/S(Browser/Server，瀏覽器/服務器)模式的監控系統中，用戶工作界面是通過WWW瀏覽器來實現，客戶端只需一個瀏覽器即可訪問系統，因此實現了很好的跨平臺可操作性，其主要事務邏輯在服務器端實現，客戶端只負責顯示部分，所以維護人員不再為維護工作奔波于每個客戶機之間，而把主要精力放在服務器的更新維護上。另外，系統擴展的工作只需在服務器上完成，客戶端不再需要進行修改，便于管理和應用。因此，目前基于Web的B/S模式的遠程實時監控系統是工業自動化領域研究的熱點問題和發展方向。

1 系統功能與總體架構

為了維護公共安全，治安部門在公共場所都建立了視頻監控系統，有效整合了警力資源和社會資源，建立起快速反應體系。但系統的現場監控設備由于受天氣的影響而使其周圍環境變得惡劣，容易使設備本身遭受故障，影響系統正常工作，不能確保在第一時間采取行動而造成人員財產的損失。為此，本文設計了基于B/S模式的Web遠程實時監控系統實現對現場監控設備的工作環境進行監控，并采用Ajax和SVG的技術方案解決實時數據的動態顯示問題，實現了監控頁面的實時顯示，完成了對現場環境的統一管理，確保了對現場設備進行及時的維護，減少損失。

本系統主要由現場監控硬件和上位機實時監控軟件組成，系統組成結構如圖1所示。

現場監控硬件主要設計的前端設備遠程監控器組成，負責采集現場設備環境的實時數據并接受下發的命令實現對現場設備的控制；上位機實時監控軟件主要實現與前端監控器的數據通信，存取實時數據、處理報警信息、下發控制命令等，并采用Ajax和SVG的技術方案解決實時數據的動態顯示問題，提供遠程監控的實時直觀的、無整體頁面刷新的Web遠程監控網頁，提高人機交互性。

圖1 系統的總體結構

2 系統硬件設計

由于要對治安監控系統現場監控設備的工作環境進行監控，本系統設計了基于以太網通信協議的前端設備遠程監控器，如圖2所示。它可對連接在Internet上的各類無人值守機房、野外獨立設備箱溫濕度及相關設備的進行遠程監控，并具備防拆警報、掉電警報、設備異常警報等功能。隨機提供軟件接口，可便捷地組建遠程監控應用系統，實現設備環境、電源和安防等設備工況的遠程監控。

圖2 硬件功能結構

2.1 微處理器

前端設備遠程監控器的微處理器采用 Microchip公司的PIC18F4520控制芯片，該單片機具有實用、低價、指令集小、低功耗、高速度、體積小、功能強及抗干擾強等特點，是許多高性能和節能應用設計的明智選擇。

本系統以Microchip公司開發的MPLAB為軟件平臺，采用C語言對PIC18F4520芯片進行編程，使用Microchip公司設計MPLABICD2在線調試器來實現仿真調試。主要有對溫濕度傳感器SHT11的數據進行采集、串口發送數據、中斷接收數據及對輸出端口的控制等操作。

2.2 溫濕度傳感器

前端監控器的溫濕度傳感器采用瑞士Sensirion公司的一款數字溫濕度傳感器芯片SHT11，它將溫度感測、濕度感測、信號變換和A/D轉換等功能集成到一個芯片上，經過軟件設計后可以直接得到精確的溫濕度數字值。其主要功能是將現場采集到的溫濕度讀取到微處理器中存儲起來，然后MCU通過串口發送傳給上位機，以供存儲和顯示。

2.3 輸出端口的控制

控制方面，可以進行手動或自動控制。當現場監控設備工作環境參數超限致設備發生故障時，監控器通過輸出端口點亮報警燈以示出現故障。在手動控制模式下，MCU將報警信息上傳到服務器反饋給監控用戶，提示做出相應控制。上位機接收到相應手動控制指令后，將數據發送到前端設備遠程監控器進行最終控制；在自動模式下，MCU經過通過IO管腳直接控制相應的繼電器實現控制輸出，并向上位機返回控制結果。

2.4 串口以太網轉換模塊

為了對多個終端進行集中式監控，本系統設計所有終端都直接連接到以太網上，可以方便地實現遠程集中管理。由于絕大多數單片機不具備以太網接口，為此，在前端設備遠程監控器中添加了串口以太網轉換模塊，如圖3所示，變傳統的串口通訊為以太網通訊。監控終端將采集到的信息通過MCU串口發送到該轉換模塊，由本模塊直接傳到以太網上的服務器中。前端設備遠程監控器的串口以太網轉換模塊在網絡中需要占用一個IP地址和相應的端口號，當監控點出現故障時，服務器端根據以太網串口轉換模塊的IP地址和端口號自動識別各監控點，便于操作和維護。

圖3 串口以太網轉換模塊

3 系統軟件設計

3.1 數據通信

為了完成與前端設備遠程監控器的通信問題，系統上位機與前端監控器之間的數據傳輸采用基于TCP/IP協議的Socket通信模式進行。Socket俗稱套接字，是網絡上運行的兩個程序間雙向通信的一端，它既可以接受請求，也可以發送請求，利用它可以較為方便地進行網絡上的數據傳遞。在TCP/IP網絡中，使用Socket能夠在網絡中處理復雜數據，方便進行數據傳送和接收。

3.2 Web應用程序開發

本系統以動態網頁實現系統ASP.NET為平臺，在基于Web的B/S模式遠程實時監控系統中采用Ajax和SVG的動態數據實時顯示實施方案開發Web應用程序，實現對現場監控設備的工作環境進行遠程實時監控和管理維護，即用SVG表示界面元素，用Ajax進行實時數據的傳送，用JavaScript在客戶端接收實時數據，并改變SVG中界面元素屬性進行實時刷新顯示，使客戶端通過瀏覽器就能實時監控現場設備的環境狀況并進行維護。與傳統的Web交互方式相比，基于Ajax的Web應用能使前端設備遠程監控器所采集的現場環境參數能及時地傳達給用戶，并實時局部刷新頁面，只傳輸相應的數據格式給相應SVG圖元，以改變其顯示內容，實現低數據量交互，提供友好的用戶操作界面。

3.2.1 Web服務器

Web服務器是遠程監控的關鍵，主要功能是提供遠程監控的Web網頁。遠程監控的Web網頁主要是動態網頁，可以訪問數據庫，動態顯示數據、圖型等，可以與用戶進行交互，獲取實時數據、報警的處理、下發控制命令等。

上位機實時顯示技術采用基于Ajax和SVG的實時數據動態發布模型。該模型采用了三層體系結構：表現層，邏輯層和數據層。在表現層，用戶通過瀏覽器可以查看HTML頁面；在邏輯層為Web服務，主要處理邏輯業務；最后是數據層，主要存儲和提供實時數據。其系統模型如圖4所示。

圖4 基于Ajax與SVG的實時數據動態發布模型

(1)Ajax技術

Ajax(asynchronous Javascript and XML，異步JavaScript和XML)是指一種創建交互式網頁應用的網頁開發技術，由許多技術組合而成，包括 XMLHttpRequest、JavaScript、XHTML、DOM、XML、XSTL和CSS等技術。與傳統的Web應用不同，基于Ajax的Web應用程序采用異步交互的處理方式，如圖5所示。通過引入Ajax引擎來消除了傳統Web中客戶端與服務器端之間“請求—等待—請求—等待”的數據交互方式。使用Ajax技術不必打斷交互流程進行刷新整個頁面，而直接對頁面局部進行更新，還可以節省網絡帶寬，提高頁面加載速度，從而縮短用戶等待時間，改善用戶操作體驗，創建接近本地桌面應用的、直接的、更豐富的、更動態的Web用戶接口界面。

圖5 基于Ajax的Web應用程序結構

(2)SVG技術

可伸縮矢量圖形(scalable vector graphic，SVG)是一種基于XML的開放的矢量圖形描述語言。它不局限于一個固定的分辨率和大小，能在不同大小的區域內正常或者比較正常的顯示。SVG規范中描述了直線、曲線、形狀等幾何圖形，而無須像JPEG等圖像格式那樣逐像素進行描述。它提供了對矢量和矢量/點陣混合圖形的描述，故此它填補了大多數基于XML的標記語言對復雜圖形描述的空白。SVG是圖形、圖像和文字的有機統一，是一種專門為網絡而設計的基于文本的圖像格式。

(3)基于Ajax和SVG的實時數據動態模型

本文采用Ajax和SVG的技術方案解決實時數據的動態顯示問題。具體來說就是用 SVG表示窗口界面元素，用XMLHttpRequest進行實時數據的傳送，用JavaScript在客戶端接收實時數據，調用DOM解析XML數據，改變SVG中界面元素屬性進行實時刷新。

1)Ajax實時數據的獲取流程如圖6所示。

圖6 Ajax實時數據的獲取

2)基于SVG技術實時數據的顯示流程如圖7所示。

圖7 SVG技術實時數據的顯示

3.2.2 數據庫設計

本系統以SQL Server 2005為平臺進行數據庫的設計，數據庫主要負責對實時數據的存取和管理，為Web服務器提供實時數據。考慮到系統規模和實時性，我們選擇了數據庫服務器與Web服務器集成在一起的開發方式，即讓它們位于同一臺運行有IIS和SQL Server 2005的計算機上。這樣當Web服務器要訪問數據庫時，只需訪問本地硬盤上的數據文件即可，有助于提高系統的存取數據的速度和減少系統開發的難度。

3.2.3 客戶端設計

客戶端即瀏覽器端，基于Web的B/S結構監控系統的客戶端無需安裝任何軟件，使用瀏覽器即可瀏覽現場設備、環境的各種實時信息以及存儲的歷史信息，操作簡單方便、靈活，各種信息直觀清晰，具有友好的人機界面。

4 實驗與結果分析

為了方便說明，本文主要以所設計的前端設備遠程監控器為現場的監控硬件，通過所開發的基于Ajax和SVG的Web遠程實時監控系統的應用軟件，對現場溫濕度進行實時監控。主要圍繞硬件可靠性，現場數據采集與存儲，溫濕度超界警報控制，提供無源觸點控制等內容進行試驗測試，并對測試結果進行相應的分析。

4.1 前段設備監控器硬件

系統中的基于以太網通信協議的前端設備遠程監控器可用于治安監控系統的現場設備工況的監控，最終的硬件設計如圖8所示。

圖8 前端設備遠程監控器整體

4.2 客戶端監控頁面

在系統測試時，通過在實驗室布置前端設備遠程監控器并連接到區域網上，服務器上運行系統軟件應用程序，實現對現場的溫濕度數據的存儲、監測和相應控制，客戶端只要通過在瀏覽器中輸入相應的網址，并取得訪問權限，就可以在局域網上實現對現場的遠程監控，客戶端監控演示界面如圖9所示。

4.3 系統測試與分析

硬件方面，所設計的前端設備遠程監控器經過了長時間通電檢測、高溫老化、各端口輸入輸出及數據通信等一系列測試，驗證系統硬件的穩定性和可靠性，能夠承擔對現場環境的監控要求。

軟件方面，經測試，在ASP.NET平臺上使用Ajax和SVG實時顯示技術的基于Web的B/S模式遠程實時監控系統，實現了對現場的溫濕度進行實時監控，對數據進行了有效地管理，并用SVG圖元進行顯示，頁面上設計按鈕通過控制輸出端口對警報進行控制，頁面無閃爍，且具有較快的響應速度，實時性強，達到了實時監控的要求，且具有良好的人機交互性。

圖9 客戶端監控演示界面

5 結束語

本系統結合設計的硬件終端，在VisualStudio2008的ASP.NET平臺上利用C#語言、Ajax和SVG技術以及SQL Server 2005數據庫，實現了基于Web的B/S遠程實時監控系統，減輕了現場維護人員工作負擔，使現場“無人值守”成為現實。并采用Ajax和SVG實時顯示技術，提高了服務器對遠程瀏覽器客戶端的響應速度，縮短用戶等待時間，改善了用戶操作體驗。經測試，系統對現場設備環境的監控有良好的實時性、可靠性和人機交互性。

基于B/S的Web遠程監控系統應用前景十分廣闊，在廣泛的工業領域中實現信息網絡和控制網絡融合，達到真正意義的遠程監控，將對工廠控制、環境監測、水資源管理、電網監控等各個方面的發展起到巨大的推動作用，對未來“物聯網”的發展也有一定的現實意義。

[1]馬龍昌.基于Web的遠程監控系統的研究與應用[D].西安:長安大學,2009:18-42.

[2]Lei Lihui,Duan Zhenhua.Integrating AJAX and web services for cooperative image editing[J].IEEE IT Professional,2007,9(3):25-29.

[3]方桂娟,饒連周.基于以太網的溫濕度監控系統的設計[J].武漢工業學院學報,2006,17(3):64-67.

[4]Ridwan Sanjaya.Web traffic reduction for infrequent update application using green Ajax[C].IEEE,2010:170-176.

[5]方桂娟,饒連周.基于以太網的溫濕度監控系統的設計[J].武漢工業學院學報,2006,17(3):64-67.

[6]李繼攀,黃國平.VisualC#2008開發技術實例詳解[M].北京:電子工業出版社,2008:349-370.

[7]Paulson L D.Building rich web applications with Ajax[J].IEEE Computer,2005,38(10):14-17.

[8]何巖.基于AJAX/SVG的EMSWeb監視系統的研究[D].成都:西南交通大學,2008:15-26.

[9]Linda Dailey Paulson.Building rich web application with Ajax[J].IEEE computer,2005,38(10):14-17.

[10]張玉杰,淮偉華,田澤.基于嵌入式Linux的工業溫度監控系統的設計[J].計算機工程與設計,2009,30(17):3940-3942.

[11]Edwards C.How AJAX jacks-up web app performance[J].Information Professional,2005,2(6):10-11.

[12]陳初.Ajax技術在B/S模式工業監控系統中的研究與應用[D].杭州:浙江大學,2007:20-21.

[13]Noriko Hanakawa,Nao Ikemiya.A web browser for Ajax approach with asynchronous communication model[C].IEEE Computer Society,2006:808-814.

[14]黃凱偉.SVG開發實踐[M].北京:電子工業出版社,2008:227-240.

[15]明日科技.SQL Server 2005開發技術大全[M].北京:人民郵電出版社,2007:239-276.