基于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.