工业实时监控系统WEB客户端实现_第1页
工业实时监控系统WEB客户端实现_第2页
工业实时监控系统WEB客户端实现_第3页
工业实时监控系统WEB客户端实现_第4页
工业实时监控系统WEB客户端实现_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、工业实时监控系统 WEB客户端实现摘要：本文介绍了如何利用HTML5 WebSocket和SVG技术解决采用浏览器 方式监控动态工业数据如何满足实时性需求的问题，简述了使用 WebSocket和 SVG实现工业实时监控 Web客户端。关键词 ：WebSocket SVG矢量图 实时监控 WEB客户端PWEB系统以实时数据库为核心，实现工业现场实时数据采集、处理、存储和显示。系统架构为B/S结构，数据采集处理运行在服务器端，主要使用VC+开发，客户操作接口为通用浏览器（现 PC上通过测试的浏览器有IE9.0以上， Google Chrome45, FireFox43，移动端浏览器测试均可正常显示

2、和操作），浏览 器与服务器数据交换采用 WEBSOCK技术，画面显示采用SVG技术。系统框架如 下图1所示图1系统框架采用 WebSocket的原因，Web应用的信息交互过程通常是客户端通过浏览器发出一个请求，服务器端接收和审核完请求后进行处理并返回结果给客户端， 然后客户端浏览器将信息呈 现出来，这种机制对于实时性要求不高的应用尚能相安无事，但是对于工业现场实时数据监控，保持客户端和服务器端的信息实时同步是数据监控的关键要素， 对Web开发人员来说也是一个难题。Web应用的信息交互过程通常是客户端通过浏览器发出一个请求，服务器端接收和审核完请求后进行处理并返回结果给客户端， 然后客户端浏览器

3、将信息呈 现出来，这种机制对于实时性要求不高的应用尚能相安无事，但是对于那些实时要求比较高的应用来说，比如说在线证券、设备监控等等，要求在客户端浏览器 浏览的设备或数据信息与实际产生的数据是即时同步的。所以保持客户端和服务器端的信息同步是实时 Web应用的关键要素，对Web开发人员来说也是一个难 题。在WebSocket规范出来之前，开发人员想实现这些实时的 Web应用，不得 不采用一些折衷的方案，其中最常用的就是轮询（Polling）和Comet技术，而Comet技术实际上是轮询技术的改进，又可细分为两种实现方式，一种是长轮询 机制，一种称为流技术。下面我们简单介绍一下这几种技术：轮询：这是

4、最早的一种实现实时 Web应用的方案。客户端以一定的时间间 隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。这种同步方案的最大问题是，当客户端以固定频率向服务器发起请求的时候，服务器端的数据可能并没有更新，这样会带来很多无谓的网络传输，所以这是一种非常 低效的实时方案。长轮询：长轮询是对定时轮询的改进和提高，目地是为了降低无效的网络传 输。当服务器端没有数据更新的时候，连接会保持一段时间周期直到数据或状态 改变或者时间过期，通过这种机制来减少无效的客户端和服务器间的交互。当然， 如果服务端的数据变更非常频繁的话，这种机制和定时轮询比较起来没有本质上 的性能的提高。流：流技术方

5、案通常就是在客户端的页面使用一个隐藏的窗口向服务端发出 一个长连接的请求。服务器端接到这个请求后作出回应并不断更新连接状态以保 证客户端和服务器端的连接不过期。通过这种机制可以将服务器端的信息源源不 断地推向客户端。这种机制在用户体验上有一点问题，需要针对不同的浏览器设 计不同的方案来改进用户体验，同时这种机制在并发比较大的情况下， 对服务器 端的资源是一个极大的考验。综合这几种方案，您会发现这些目前我们所使用的所谓的实时技术并不是真 正的实时技术，它们只是在用Ajax方式来模拟实时的效果，在每次客户端和服 务器端交互的时候都是一次HTTP的请求和应答的过程，而每一次的HTTP请求 和应答都带

6、有完整的HTTP头信息，这就增加了每次传输的数据量，而且这些方 案中客户端和服务器端的编程实现都比较复杂，在实际的应用中，为了模拟比较真实的实时效果，开发人员往往需要构造两个HTTP连接来模拟客户端和服务器 之间的双向通讯，一个连接用来处理客户端到服务器端的数据传输，一个连接用来处理服务器端到客户端的数据传输，这不可避免地增加了编程实现的复杂度， 也增加了服务器端的负载，制约了应用系统的扩展性。我们过考虑使用Java Applet技术实现数据的实时性，但是基于安全考虑， 浏览器对Java Applet的支持在减少，采用Java Applet时会在浏览器客户端对 Java Applet做安全设置

7、，因此放弃使用 Java Applet。HTML5 WebSocke设计出来的目的就是要使客户端浏览器具备像C/S架构下桌面系统的实时通讯能力。浏览器通过JavaScript 向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。因为WebSocket连接本质上就是一个TCP连接，所以在数据 传输的稳定性和数据传输量的大小方面，具有很大的性能优势。我们在建设工业实时监控系统时考虑免去客户安装客户端软件，同时满足工业数据监控对实时性的要求，确定自己开发构建一个实现了WebSocket规范的服务器，完成基于浏览器的实现 WebSocket连接

8、的客户端程序，用户只需要被允 许接入工厂网络，通过PC机和移动设备的浏览器就可以查看实时的工业数据。 如下图所示。.htm文件（H 精旧 直音凹 收蘇1代 工M生产装置流程不意图HHP氢气外送轻榮油li.75峨进科捕提逬料目銭进科氯气4151 骷工厂总貌公丿抽余07“5:=?.$5Sm729ILH2H5-4K飢QWVSIQ23JLSK20* 皿K50) isuE601 imi醴北进料混脅碳四丁二烯捷T®-1«冷箱I .Wj r LiK45.M乙二醇工厂流程总貌图KHK3i* uk n低孤at事as时ra1 F 11111411H1114F .PVii jnn jjn0.00

9、a.oa.Ol/ -04 CM? 1B:Tj-B:0-2 ldC-101JBtClC2!«Mdi3F11Q22-PVH ： Il li：. 111>000*ia»a-3iKij/la-Oil .' Lk4 II: IM -.m IIS5 G7过程数据趋势图WebSocket 规范WebSocket协议本质上是一个基于TCP的协议。为了建立一个WebSocket连接，客户端浏览器首先要向服务器发起一个HTTP请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息，其中附加头信息” Upgrade: WebSockef 表明这是一个申请协议升级的 HTTP请

10、求，服务器端解析这些附加的头信息然后 产生应答信息返回给客户端，客户端和服务器端的WebSocket连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。我们在服务器端实现了 WebSocket服务器，在客户端编写JS脚本语言，实 现WebSocket客户端与服务器的连接，数据请求，消息处理等函数，通过在WEB页面中引入JS脚本文件，在页面被打开时执行 WebSocket函数，连接服务器上 运行的WebSocket服务，实现数据的实时显示。<head>工厂实时数提显实现连接的脚本文彳牛<script t

11、ype=vtext/javascript" src=#jg/Fwftbg.Js*> </scrlpt> <.style type='ttxt/css" eisport urL(css/Pwebs, css)；</styl e><gcript>打开网址时开始window, onload = functionO var WebSocketsExlst = true； if (window-WebSocket1:笄"a 1 WebSocket 连接WebSocketsExlst = false;alert L您的浏

12、览器不支持WSockct*请迭择直他的浏览器再尝试连接服务图3 .部分HTML文件当页面初次加载的时候，首先会检测当前的浏览器是否支持WebSocket并给出相应的提示信息。页面会初始化一个到服务器的WebSocekt连接，初始化成功以后，页面会加载缺省的 SVG文件和WebSocket事件处理函数，将装置实 时运行状态的流程总貌图呈现给客户，客户端JavaScript 代码如下所示：eonneetOK false;var ws;Var SackctCreat c?d = fal sc,function WSConnect ()if CSocketCreat ed && (ws

13、. readlyState = 0| | ws. readyStsite = 1)SocketCxeat ed. = false;ws close C)； else try ”vazr iMS_ad<ir =i /+ documient, localiori« hostname 十 : 2003/dispXJr;if (WebSocket x in wlndo ws = new W'ebSockiet (ws_adcLr); else if C*xMozWebSocke±in window) ws 二 new MozWebSo-cket Cws_addjr);

14、SocketCreat ed = true ; cat cki(ex) aler*t (x/WebSocket Connect: Fail 1;网寻.onopen = WSonDpen;网s： crunessage = WSoiiMessage;网s： oncl ose = WSonClose;闪h oneT'ror = WSonErT'or1;funct i on ws_send Cst r) i f CcosrmectOK) 电d send (st;1图4.JS脚本文件中 WebSocket函数1fi iT-u-ftT A fin WMcmClpm CJ £c o

15、niie-c."tCiK txjlc-;/wts_ts tsi icJ. t n ti I. kickXkjuI /01 /U1 joui丄"*1,-ri!-L±'TL十 -B E -1l-li.-i -r a di _J ±11_J r-JlT-01 si o-t-a Jo 严 ntn- to lot n-c 0( va.£ 1 匸 cl1?匸曰LJr 匸 TrLI- £u=3r此十七耳丈工十丈uu-tr:七tf 0 ± X ± K a =t s = ?. =T s 丁 K-TTU =c DC ? Bcc

16、< E < t 0 e -Jc c-t曰 u tej” = 0"tr-rirD 壬Sil 匚r丄91.|51宁i 1 7 Iri +-±.)-2 HEt « = v-rth -Hklr ! 2: n-_J nLR丁 亍T-t* ±s e r+ -1U 匸 Htrsz斗 L-ly tip: s 0U 益.-f”s 二 wr-l 人工 me£ _j« 10 IB *-tu 1 L匸 亠一一 I _-z一 _一匸 一一 n E ±-二一1=二r一一 斗s/ ; E > >-tf 如 ：rl 2 C»

17、;_L IITlx 1-tQMt -a.J nri.L弋 x on W>on<L= 1 口二 e C ) i <：iririT-irrc-：-rOK = Fisl 口畦： MHTTUHO 匸 C> ；Svh._L'I'ujk. L C ¥* !. iix心 上 J :J"r_u ji-ct x Oil WSrji jiExi-Rjx" 15(.c.oinieo-tOK fal ce-:AJ W nl> Jn nirxil-T r： itCTnnncf：十 F.-r'-trmr图5.JS脚本文件中 WebSock

18、et函数2画面显示采用SV（技术的原因目前在计算机上主要有两种形式来表现图形，一种是栅格图形，另一种是矢量图形。在栅格图形中，图像用像元或者像素的矩形阵列来表示，每个像素代表一个 RGB颜色值或者是一个指向颜色列表的索引。通常以一种压缩格式来存储（如 JPEG, GIF, PNG等），由于现在大部分的显示设备都是栅格设备，所以显示这些 图形只需要做解压处理就可以了。在矢量图形系统中，图形被描述为一些列的形状，它是特定坐标的集合。显 示矢量图形需要按照特定的命令来绘制这些坐标，然后显示在屏幕上。矢量图形 是对象，而不是一系列的像素。它们可以改变颜色、形状还有大小，图形中的文字都是可以被检索的，这

19、些与栅格图形都有很大的不同。绝大部分情况下，我们都在使用栅格图形，而且创建栅格图形的工具更容易 获得和使用。但是矢量图形有一个栅格图形无法替代的优势：无论如何的缩放， 矢量图形都不会失真。这使得当我们需要具有精确测量以及看清图形细节的放大 能力时，矢量图形显得尤其重要。SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML，用于描述二维矢量图形的一种图形格式。SVG是 W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量 图形格式。由于

20、SVG也是一种XML文件，所以SVG也继承了 XML的开放性、可移 植性和交互性的优点。SVG图像由浏览器渲染，可以以编程方式绘制。SVG图像 可动态地更改，这使它们尤其适合数据驱动的应用程序，源文件大小可能更小，所以SVG图形比其他光栅图形的加载速度更快，使用的带宽更少。目前所有主 流的浏览器都支持SVG因此我们在制作流程图时使用 SVG作为流程图的格式，使用SVG制作软件完 成流程图的制作，将流程存储为SVG文件，同时将实时显示数据的过程参数位号 位置信息存储在XML文件中，利于在数据实时通讯的前后台处理。在JS脚本中实现SVG图的动态加载和位号的数据在 SVGffl中定位和实时显示。|&

21、lt; ?vejrs±orl= |Lrl . 0 f|Locl_rrGB2 3 丄2 " a t aiid a 1 one= rriio Fr ? >ag-Iji at>-Nan a rrl/ F J 1161 , PVti V a 七匕 Colou.c w D e 3C=Format #." Hyp = "D h 七 a. " font- ajtii 1 y= iz i a 丄"七一s±ec= r,16 ,r fan 七一m 七 yl e= "normal rr 3t= ,rJ_B 3" y

22、= ,rlD 4 . O ,r/></Tag><Tcig- Name frl/FJLlLZEZLA. PV rT>-va-he Colozr=tF”丄/F 丄工它总：LA . Rd "?o viuat= # #* O " Type="Da-ta ,r fan 七一 fwruJ丄 y=j. 0 J. " tont-si2e= Fr16 f ont-stvl e= "normal Fr, O "y=,r13 6 . O *r/><Tag Name= / F 1 J.2 J. B . PVW>

23、-Aeti vate Col o e= "blue " Desc= ,rl/F112£lE- PV"F o rmat= r*# , 0 Typ c= MCn t n F|L f cm七一£ hjelzL JLy="旦匸：L * 丄" f ont3±se=r, £ on 七一 m 七yd et=urns. J.”r,183 . O M. O "/>-5? 0 g->Name= ,R1/ F113 61AT fVCActi v a.七u Colo iz rFlzi 1 u.c r1, Z

24、)e scr Fr 1 / F1!丄3 E丄具.377 "Format rt # # . O w Type= rtDate. *r f on 七一 £ 且追:L ：L匕：L 乞七一s± = e- r, J 6 ,r tont-styl a- "normal,rS3 - C y=,rZOO . O ,r/>-位号位置数据以XML格式存储JVILI'- X 丄 u:Cuidu -t 1I 口 ddi1-1 X e- Cl 1 &>曰0UP J1 1 e：=±TX 1 &-+* - s-vh； ;KTff：EF 二

25、 1_ uJTZ 1 1:*_ X MU XJ2丁 i _! ( ''' lDia. n1 n'O j%.* > r r <irir3 i:x* "R < > «> +-<-£ibid T i' JTf < > irJla = 3-c ”w I + "Im . n <r> i3 k k; -1 fr.1i 貝 11- 1i Z> C'J J5 R «-> c "II- - -r jnni1 1 T dn-bc ii

26、n. w|_ O _"v-arQthJ douijwfc dtt."!： 0 0"t tn： J_Diwenit Hy JL d<.* UTM-HDa.-yr* _> 二ols J . s; "t y 丄 uai = it st > i_ui d X m. -a ® e i_inr JL C"1" * 小 ：寸0工" 1< :-«&cl-:- : t-im- 口c-itlU A cl C li 吕二 JBedh-二;"ViiarI?.<: X - -zliJ

27、- X LW :-cXe-c-;wl-xS- 1 e-_ J-Tiwt lrL A O> Fto>口"t _ ite-m.«z*ve-C7i7il 1 d Cnders rOT "> ,< 1 m TBL 在播 <e O> ：3<X* > L F '« >lr El _Jalc £：>! : r I I - I： ； I P. 1 M Z Hl 113 I 'Fb T U Ji C. y " *， _«>. 9 « r -vl r-：

28、. ><-=l wir-oi an HIT nn »t jit-1 <-X 1 r20*? rN = JTi Xt述：L 亡口 ipUHUiidai =. 1 < ii±lESr ScO X" C ZWBlESZlT SF" Z *'>I y4 -f SVO O :,w 凸_uuriutt 十 m 曰"tNiwi 丄 e IX -:- a.clL>VC； -a. = CM.J_ < > ;VUJ JL"xiffir -TJzj *FIWCT 1 .5TVC»-'R o o -t-r a 1 1 _B=vEmm " ln-ir + ro r Z Zwv-w, wSSOOO:抚丄 linicris * nt -tjzh i Z Zww

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论