工业实时监控系统WEB客户端实现.docVIP

. . 工业实时监控系统WEB客户端实现 摘 要：本文介绍了如何利用 HTML5 WebSocket 和SVG技术解决采用浏览器方式监控动态工业数据如何满足实时性需求的问题，简述了使用 WebSocket 和SVG实现工业实时监控 Web客户端。 关键词 ：WebSocket SVG矢量图 实时监控 WEB客户端 PWEBS系统以实时数据库为核心，实现工业现场实时数据采集、处理、存储和显示。系统架构为B/S结构，数据采集处理运行在服务器端，主要使用VC++开发，客户操作接口为通用浏览器（现PC上通过测试的浏览器有IE9.0以上，Google Chrome45，FireFox43，移动端浏览器测试均可正常显示和操作），浏览器与服务器数据交换采用WEBSOCKET技术，画面显示采用SVG技术。系统框架如下图1所示 图1 系统框架 采用WebSocket的原因， Web应用的信息交互过程通常是客户端通过浏览器发出一个请求，服务器端接收和审核完请求后进行处理并返回结果给客户端，然后客户端浏览器将信息呈现出来，这种机制对于实时性要求不高的应用尚能相安无事，但是对于工业现场实时数据监控，保持客户端和服务器端的信息实时同步是数据监控的关键要素，对 Web 开发人员来说也是一个难题。 Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求，服务器端接收和审核完请求后进行处理并返回结果给客户端，然后客户端浏览器将信息呈现出来，这种机制对于实时性要求不高的应用尚能相安无事，但是对于那些实时要求比较高的应用来说，比如说在线证券、设备监控等等，要求在客户端浏览器浏览的设备或数据信息与实际产生的数据是即时同步的。所以保持客户端和服务器端的信息同步是实时 Web 应用的关键要素，对 Web 开发人员来说也是一个难题。在 WebSocket 规范出来之前，开发人员想实现这些实时的 Web 应用，不得不采用一些折衷的方案，其中最常用的就是轮询 (Polling) 和 Comet 技术，而 Comet 技术实际上是轮询技术的改进，又可细分为两种实现方式，一种是长轮询机制，一种称为流技术。下面我们简单介绍一下这几种技术： 轮询：这是最早的一种实现实时 Web 应用的方案。客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。这种同步方案的最大问题是，当客户端以固定频率向服务器发起请求的时候，服务器端的数据可能并没有更新，这样会带来很多无谓的网络传输，所以这是一种非常低效的实时方案。 长轮询：长轮询是对定时轮询的改进和提高，目地是为了降低无效的网络传输。当服务器端没有数据更新的时候，连接会保持一段时间周期直到数据或状态改变或者时间过期，通过这种机制来减少无效的客户端和服务器间的交互。当然，如果服务端的数据变更非常频繁的话，这种机制和定时轮询比较起来没有本质上的性能的提高。 流：流技术方案通常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不过期。通过这种机制可以将服务器端的信息源源不断地推向客户端。这种机制在用户体验上有一点问题，需要针对不同的浏览器设计不同的方案来改进用户体验，同时这种机制在并发比较大的情况下，对服务器端的资源是一个极大的考验。 综合这几种方案，您会发现这些目前我们所使用的所谓的实时技术并不是真正的实时技术，它们只是在用 Ajax 方式来模拟实时的效果，在每次客户端和服务器端交互的时候都是一次 HTTP 的请求和应答的过程，而每一次的 HTTP 请求和应答都带有完整的 HTTP 头信息，这就增加了每次传输的数据量，而且这些方案中客户端和服务器端的编程实现都比较复杂，在实际的应用中，为了模拟比较真实的实时效果，开发人员往往需要构造两个 HTTP 连接来模拟客户端和服务器之间的双向通讯，一个连接用来处理客户端到服务器端的数据传输，一个连接用来处理服务器端到客户端的数据传输，这不可避免地增加了编程实现的复杂度，也增加了服务器端的负载，制约了应用系统的扩展性。 我们过考虑使用Java Applet技术实现数据的实时性，但是基于安全考虑，浏览器对Java Applet的支持在减少，采用Java Applet时会在浏览器客户端对Java Applet做安全设置，因此放弃使用Java Applet。 HTML5 WebSocket 设计出来的目的就是要使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。因为 WebSocket 连接本质上就是一个 TCP 连接，所以