工业实时监控系统WEB客户端实现Word下载.docx

工业实时监控系统WEB客户端实现Word下载.docx

《工业实时监控系统WEB客户端实现Word下载.docx》由会员分享，可在线阅读，更多相关《工业实时监控系统WEB客户端实现Word下载.docx（7页珍藏版）》请在冰豆网上搜索。

系统框架如下图1所示

图1系统框架

采用WebSocket的原因，

Web应用的信息交互过程通常是客户端通过浏览器发出一个请求，服务器端接收和审核完请求后进行处理并返回结果给客户端，然后客户端浏览器将信息呈现出来，这种机制对于实时性要求不高的应用尚能相安无事，但是对于工业现场实时数据监控，保持客户端和服务器端的信息实时同步是数据监控的关键要素，对Web开发人员来说也是一个难题。

Web应用的信息交互过程通常是客户端通过浏览器发出一个请求，服务器端接收和审核完请求后进行处理并返回结果给客户端，然后客户端浏览器将信息呈现出来，这种机制对于实时性要求不高的应用尚能相安无事，但是对于那些实时要求比较高的应用来说，比如说在线证券、设备监控等等，要求在客户端浏览器浏览的设备或数据信息与实际产生的数据是即时同步的。

所以保持客户端和服务器端的信息同步是实时Web应用的关键要素，对Web开发人员来说也是一个难题。

在WebSocket规出来之前，开发人员想实现这些实时的Web应用，不得不采用一些折衷的方案，其中最常用的就是轮询（Polling）和Comet技术，而Comet技术实际上是轮询技术的改进，又可细分为两种实现方式，一种是长轮询机制，一种称为流技术。

下面我们简单介绍一下这几种技术：

轮询：

这是最早的一种实现实时Web应用的方案。

客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。

这种同步方案的最大问题是，当客户端以固定频率向服务器发起请求的时候，服务器端的数据可能并没有更新，这样会带来很多无谓的网络传输，所以这是一种非常低效的实时方案。

长轮询：

长轮询是对定时轮询的改进和提高，目地是为了降低无效的网络传输。

当服务器端没有数据更新的时候，连接会保持一段时间周期直到数据或状态改变或者时间过期，通过这种机制来减少无效的客户端和服务器间的交互。

当然，如果服务端的数据变更非常频繁的话，这种机制和定时轮询比较起来没有本质上的性能的提高。

流：

流技术方案通常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。

服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不过期。

通过这种机制可以将服务器端的信息源源不断地推向客户端。

这种机制在用户体验上有一点问题，需要针对不同的浏览器设计不同的方案来改进用户体验，同时这种机制在并发比较大的情况下，对服务器端的资源是一个极大的考验。

综合这几种方案，您会发现这些目前我们所使用的所谓的实时技术并不是真正的实时技术，它们只是在用Ajax方式来模拟实时的效果，在每次客户端和服务器端交互的时候都是一次HTTP的请求和应答的过程，而每一次的HTTP请求和应答都带有完整的HTTP头信息，这就增加了每次传输的数据量，而且这些方案中客户端和服务器端的编程实现都比较复杂，在实际的应用中，为了模拟比较真实的实时效果，开发人员往往需要构造两个HTTP连接来模拟客户端和服务器之间的双向通讯，一个连接用来处理客户端到服务器端的数据传输，一个连接用来处理服务器端到客户端的数据传输，这不可避免地增加了编程实现的复杂度，也增加了服务器端的负载，制约了应用系统的扩展性。

我们过考虑使用JavaApplet技术实现数据的实时性，但是基于安全考虑，浏览器对JavaApplet的支持在减少，采用JavaApplet时会在浏览器客户端对JavaApplet做安全设置，因此放弃使用JavaApplet。

HTML5WebSocket设计出来的目的就是要使客户端浏览器具备像C/S架构下桌面系统的实时通讯能力。

浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。

因为WebSocket连接本质上就是一个TCP连接，所以在数据传输的稳定性和数据传输量的大小方面，具有很大的性能优势。

我们在建设工业实时监控系统时考虑免去客户安装客户端软件，同时满足工业数据监控对实时性的要求，确定自己开发构建一个实现了WebSocket规的服务器，完成基于浏览器的实现WebSocket连接的客户端程序，用户只需要被允许接入工厂网络，通过PC机和移动设备的浏览器就可以查看实时的工业数据。

如下图所示。

工厂流程总貌图

过程数据趋势图

WebSocket规

WebSocket协议本质上是一个基于TCP的协议。

为了建立一个WebSocket连接，客户端浏览器首先要向服务器发起一个HTTP请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息，其中附加头信息”Upgrade:

WebSocket”表明这是一个申请协议升级的HTTP请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的WebSocket连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

我们在服务器端实现了WebSocket服务器，在客户端编写JS脚本语言，实现WebSocket客户端与服务器的连接，数据请求，消息处理等函数，通过在WEB页面中引入JS脚本文件，在页面被打开时执行WebSocket函数，连接服务器上运行的WebSocket服务，实现数据的实时显示。

图3.部分HTML文件

当页面初次加载的时候，首先会检测当前的浏览器是否支持WebSocket并给出相应的提示信息。

页面会初始化一个到服务器的WebSocekt连接，初始化成功以后，页面会加载缺省的SVG文件和WebSocket事件处理函数，将装置实时运行状态的流程总貌图呈现给客户，客户端JavaScript代码如下所示：

图4.JS脚本文件中WebSocket函数1

图5.JS脚本文件中WebSocket函数2

画面显示采用SVG技术的原因

目前在计算机上主要有两种形式来表现图形，一种是栅格图形，另一种是矢量图形。

在栅格图形中，图像用像元或者像素的矩形阵列来表示，每个像素代表一个RGB颜色值或者是一个指向颜色列表的索引。

通常以一种压缩格式来存储（如JPEG,GIF,PNG等），由于现在大部分的显示设备都是栅格设备，所以显示这些图形只需要做解压处理就可以了。

在矢量图形系统中，图形被描述为一些列的形状，它是特定坐标的集合。

显示矢量图形需要按照特定的命令来绘制这些坐标，然后显示在屏幕上。

矢量图形是对象，而不是一系列的像素。

它们可以改变颜色、形状还有大小，图形中的文字都是可以被检索的，这些与栅格图形都有很大的不同。

绝大部分情况下，我们都在使用栅格图形，而且创建栅格图形的工具更容易获得和使用。

但是矢量图形有一个栅格图形无法替代的优势：

无论如何的缩放，矢量图形都不会失真。

这使得当我们需要具有精确测量以及看清图形细节的放大能力时，矢量图形显得尤其重要。

SVG可缩放矢量图形（ScalableVectorGraphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。

SVG是W3C制定的一种新的二维矢量图形格式，也是规中的网络矢量图形标准。

SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像容，因此是一种和图像分辨率无关的矢量图形格式。

由于SVG也是一种XML文件，所以SVG也继承了XML的开放性、可移植性和交互性的优点。

SVG图像由浏览器渲染，可以以编程方式绘制。

SVG图像可动态地更改，这使它们尤其适合数据驱动的应用程序，源文件大小可能更小，所以SVG图形比其他光栅图形的加载速度更快，使用的带宽更少。

目前所有主流的浏览器都支持SVG。

因此我们在制作流程图时使用SVG作为流程图的格式，使用SVG制作软件完成流程图的制作，将流程存储为SVG文件，同时将实时显示数据的过程参数位号位置信息存储在XML文件中，利于在数据实时通讯的前后台处理。

在JS脚本中实现SVG图的动态加载和位号的数据在SVG图中定位和实时显示。

位号位置数据以XML格式存储

数据和图像的动态加载在客户端JS脚本中实现

结束语

本文首先简单介绍了WebSocket规在性能上的优势，说明采用SVG制作流程图的原因，针对如何利用HTML5WebSocket和SVG技术解决采用浏览器方式监控动态工业数据如何满足实时性需求的问题，简述了怎样使用WebSocket和SVG构建一个工业实时监控Web客户端。

参考文献：

[1]IBMWeb开发文档库《使用HTML5WebSocket构建实时Web应用》黄晓安,高级软件工程师,IBM何亮,软件工程师,IBM许宁,软件工程师,IBM，2011年12月15日

[2]IBMWeb开发文档库《HTML5中的可缩放矢量图形（SVG）HTML5中的可缩放矢量图形（SVG）》JeremyJ.Wischusen,Web应用程序架构师.，2012年9月17日