工業(yè)實(shí)時監(jiān)控系統(tǒng)WEB客戶端實(shí)現(xiàn)

1、工業(yè)實(shí)時監(jiān)控系統(tǒng)WEB客戶端實(shí)現(xiàn)摘 要：本文介紹了如何利用 HTML5 WebSocket 和SVG技術(shù)解決采用瀏覽器方式監(jiān)控動態(tài)工業(yè)數(shù)據(jù)如何滿足實(shí)時性需求的問題，簡述了使用 WebSocket 和SVG實(shí)現(xiàn)工業(yè)實(shí)時監(jiān)控 Web客戶端。關(guān)鍵詞 ：WebSocket SVG矢量圖 實(shí)時監(jiān)控 WEB客戶端PWEBS系統(tǒng)以實(shí)時數(shù)據(jù)庫為核心，實(shí)現(xiàn)工業(yè)現(xiàn)場實(shí)時數(shù)據(jù)采集、處理、存儲和顯示。系統(tǒng)架構(gòu)為B/S結(jié)構(gòu)，數(shù)據(jù)采集處理運(yùn)行在服務(wù)器端，主要使用VC+開發(fā)，客戶操作接口為通用瀏覽器（現(xiàn)PC上通過測試的瀏覽器有IE9.0以上，Google Chrome45，F(xiàn)ireFox43，移動端瀏覽器測試均可正常顯示和

2、操作），瀏覽器與服務(wù)器數(shù)據(jù)交換采用WEBSOCKET技術(shù)，畫面顯示采用SVG技術(shù)。系統(tǒng)框架如下圖1所示圖1 系統(tǒng)框架采用WebSocket的原因， Web應(yīng)用的信息交互過程通常是客戶端通過瀏覽器發(fā)出一個請求，服務(wù)器端接收和審核完請求后進(jìn)行處理并返回結(jié)果給客戶端，然后客戶端瀏覽器將信息呈現(xiàn)出來，這種機(jī)制對于實(shí)時性要求不高的應(yīng)用尚能相安無事，但是對于工業(yè)現(xiàn)場實(shí)時數(shù)據(jù)監(jiān)控，保持客戶端和服務(wù)器端的信息實(shí)時同步是數(shù)據(jù)監(jiān)控的關(guān)鍵要素，對 Web 開發(fā)人員來說也是一個難題。Web 應(yīng)用的信息交互過程通常是客戶端通過瀏覽器發(fā)出一個請求，服務(wù)器端接收和審核完請求后進(jìn)行處理并返回結(jié)果給客戶端，然后客戶端瀏覽器將信

3、息呈現(xiàn)出來，這種機(jī)制對于實(shí)時性要求不高的應(yīng)用尚能相安無事，但是對于那些實(shí)時要求比較高的應(yīng)用來說，比如說在線證券、設(shè)備監(jiān)控等等，要求在客戶端瀏覽器瀏覽的設(shè)備或數(shù)據(jù)信息與實(shí)際產(chǎn)生的數(shù)據(jù)是即時同步的。所以保持客戶端和服務(wù)器端的信息同步是實(shí)時 Web 應(yīng)用的關(guān)鍵要素，對 Web 開發(fā)人員來說也是一個難題。在 WebSocket 規(guī)范出來之前，開發(fā)人員想實(shí)現(xiàn)這些實(shí)時的 Web 應(yīng)用，不得不采用一些折衷的方案，其中最常用的就是輪詢 (Polling) 和 Comet 技術(shù)，而 Comet 技術(shù)實(shí)際上是輪詢技術(shù)的改進(jìn)，又可細(xì)分為兩種實(shí)現(xiàn)方式，一種是長輪詢機(jī)制，一種稱為流技術(shù)。下面我們簡單介紹一下這幾種技術(shù)：

4、輪詢：這是最早的一種實(shí)現(xiàn)實(shí)時 Web 應(yīng)用的方案?？蛻舳艘砸欢ǖ臅r間間隔向服務(wù)端發(fā)出請求，以頻繁請求的方式來保持客戶端和服務(wù)器端的同步。這種同步方案的最大問題是，當(dāng)客戶端以固定頻率向服務(wù)器發(fā)起請求的時候，服務(wù)器端的數(shù)據(jù)可能并沒有更新，這樣會帶來很多無謂的網(wǎng)絡(luò)傳輸，所以這是一種非常低效的實(shí)時方案。長輪詢：長輪詢是對定時輪詢的改進(jìn)和提高，目地是為了降低無效的網(wǎng)絡(luò)傳輸。當(dāng)服務(wù)器端沒有數(shù)據(jù)更新的時候，連接會保持一段時間周期直到數(shù)據(jù)或狀態(tài)改變或者時間過期，通過這種機(jī)制來減少無效的客戶端和服務(wù)器間的交互。當(dāng)然，如果服務(wù)端的數(shù)據(jù)變更非常頻繁的話，這種機(jī)制和定時輪詢比較起來沒有本質(zhì)上的性能的提高。流：流技術(shù)方

5、案通常就是在客戶端的頁面使用一個隱藏的窗口向服務(wù)端發(fā)出一個長連接的請求。服務(wù)器端接到這個請求后作出回應(yīng)并不斷更新連接狀態(tài)以保證客戶端和服務(wù)器端的連接不過期。通過這種機(jī)制可以將服務(wù)器端的信息源源不斷地推向客戶端。這種機(jī)制在用戶體驗(yàn)上有一點(diǎn)問題，需要針對不同的瀏覽器設(shè)計(jì)不同的方案來改進(jìn)用戶體驗(yàn)，同時這種機(jī)制在并發(fā)比較大的情況下，對服務(wù)器端的資源是一個極大的考驗(yàn)。綜合這幾種方案，您會發(fā)現(xiàn)這些目前我們所使用的所謂的實(shí)時技術(shù)并不是真正的實(shí)時技術(shù)，它們只是在用 Ajax 方式來模擬實(shí)時的效果，在每次客戶端和服務(wù)器端交互的時候都是一次 HTTP 的請求和應(yīng)答的過程，而每一次的 HTTP 請求和應(yīng)答都帶有完整

6、的 HTTP 頭信息，這就增加了每次傳輸?shù)臄?shù)據(jù)量，而且這些方案中客戶端和服務(wù)器端的編程實(shí)現(xiàn)都比較復(fù)雜，在實(shí)際的應(yīng)用中，為了模擬比較真實(shí)的實(shí)時效果，開發(fā)人員往往需要構(gòu)造兩個 HTTP 連接來模擬客戶端和服務(wù)器之間的雙向通訊，一個連接用來處理客戶端到服務(wù)器端的數(shù)據(jù)傳輸，一個連接用來處理服務(wù)器端到客戶端的數(shù)據(jù)傳輸，這不可避免地增加了編程實(shí)現(xiàn)的復(fù)雜度，也增加了服務(wù)器端的負(fù)載，制約了應(yīng)用系統(tǒng)的擴(kuò)展性。我們過考慮使用Java Applet技術(shù)實(shí)現(xiàn)數(shù)據(jù)的實(shí)時性，但是基于安全考慮，瀏覽器對Java Applet的支持在減少，采用Java Applet時會在瀏覽器客戶端對Java Applet做安全設(shè)置，因此放

7、棄使用Java Applet。HTML5 WebSocket 設(shè)計(jì)出來的目的就是要使客戶端瀏覽器具備像 C/S 架構(gòu)下桌面系統(tǒng)的實(shí)時通訊能力。 瀏覽器通過 JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務(wù)器端就可以通過 TCP 連接直接交換數(shù)據(jù)。因?yàn)?WebSocket 連接本質(zhì)上就是一個 TCP 連接，所以在數(shù)據(jù)傳輸?shù)姆€(wěn)定性和數(shù)據(jù)傳輸量的大小方面，具有很大的性能優(yōu)勢。我們在建設(shè)工業(yè)實(shí)時監(jiān)控系統(tǒng)時考慮免去客戶安裝客戶端軟件，同時滿足工業(yè)數(shù)據(jù)監(jiān)控對實(shí)時性的要求，確定自己開發(fā)構(gòu)建一個實(shí)現(xiàn)了 WebSocket 規(guī)范的服務(wù)器，完成基于瀏覽器的實(shí)現(xiàn)We

8、bSocket連接的客戶端程序，用戶只需要被允許接入工廠網(wǎng)絡(luò)，通過PC機(jī)和移動設(shè)備的瀏覽器就可以查看實(shí)時的工業(yè)數(shù)據(jù)。如下圖所示。工廠流程總貌圖過程數(shù)據(jù)趨勢圖WebSocket 規(guī)范WebSocket 協(xié)議本質(zhì)上是一個基于 TCP 的協(xié)議。為了建立一個 WebSocket 連接，客戶端瀏覽器首先要向服務(wù)器發(fā)起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭信息，其中附加頭信息”Upgrade: WebSocket”表明這是一個申請協(xié)議升級的 HTTP 請求，服務(wù)器端解析這些附加的頭信息然后產(chǎn)生應(yīng)答信息返回給客戶端，客戶端和服務(wù)器端的 WebSocket 連接就建立起來

9、了，雙方就可以通過這個連接通道自由的傳遞信息，并且這個連接會持續(xù)存在直到客戶端或者服務(wù)器端的某一方主動的關(guān)閉連接。我們在服務(wù)器端實(shí)現(xiàn)了WebSocket 服務(wù)器，在客戶端編寫JS腳本語言，實(shí)現(xiàn)WebSocket客戶端與服務(wù)器的連接，數(shù)據(jù)請求，消息處理等函數(shù)，通過在WEB頁面中引入JS腳本文件，在頁面被打開時執(zhí)行WebSocket函數(shù)，連接服務(wù)器上運(yùn)行的WebSocket 服務(wù)，實(shí)現(xiàn)數(shù)據(jù)的實(shí)時顯示。圖3 .部分HTML文件當(dāng)頁面初次加載的時候，首先會檢測當(dāng)前的瀏覽器是否支持 WebSocket 并給出相應(yīng)的提示信息。頁面會初始化一個到服務(wù)器的 WebSocekt 連接，初始化成功以后，頁面會加載

10、缺省的SVG文件和 WebSocket 事件處理函數(shù)，將裝置實(shí)時運(yùn)行狀態(tài)的流程總貌圖呈現(xiàn)給客戶，客戶端 JavaScript 代碼如下所示：圖4.JS腳本文件中WebSocket函數(shù)1圖5.JS腳本文件中WebSocket函數(shù)2畫面顯示采用SVG技術(shù)的原因目前在計(jì)算機(jī)上主要有兩種形式來表現(xiàn)圖形，一種是柵格圖形，另一種是矢量圖形。在柵格圖形中，圖像用像元或者像素的矩形陣列來表示，每個像素代表一個RGB顏色值或者是一個指向顏色列表的索引。通常以一種壓縮格式來存儲（如JPEG, GIF, PNG等），由于現(xiàn)在大部分的顯示設(shè)備都是柵格設(shè)備，所以顯示這些圖形只需要做解壓處理就可以了。在矢量圖形系統(tǒng)中，圖

11、形被描述為一些列的形狀，它是特定坐標(biāo)的集合。顯示矢量圖形需要按照特定的命令來繪制這些坐標(biāo)，然后顯示在屏幕上。矢量圖形是對象，而不是一系列的像素。它們可以改變顏色、形狀還有大小，圖形中的文字都是可以被檢索的，這些與柵格圖形都有很大的不同。絕大部分情況下，我們都在使用柵格圖形，而且創(chuàng)建柵格圖形的工具更容易獲得和使用。但是矢量圖形有一個柵格圖形無法替代的優(yōu)勢：無論如何的縮放，矢量圖形都不會失真。這使得當(dāng)我們需要具有精確測量以及看清圖形細(xì)節(jié)的放大能力時，矢量圖形顯得尤其重要。SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴(kuò)展標(biāo)記語言（XML），用于描述二維矢量圖形的一

12、種圖形格式。SVG是W3C制定的一種新的二維矢量圖形格式，也是規(guī)范中的網(wǎng)絡(luò)矢量圖形標(biāo)準(zhǔn)。SVG嚴(yán)格遵從XML語法，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式。由于SVG也是一種XML文件，所以SVG也繼承了XML的開放性、可移植性和交互性的優(yōu)點(diǎn)。SVG 圖像由瀏覽器渲染，可以以編程方式繪制。SVG 圖像可動態(tài)地更改，這使它們尤其適合數(shù)據(jù)驅(qū)動的應(yīng)用程序， 源文件大小可能更小，所以SVG 圖形比其他光柵圖形的加載速度更快，使用的帶寬更少。目前所有主流的瀏覽器都支持SVG。因此我們在制作流程圖時使用SVG作為流程圖的格式，使用SVG制作軟件完成流程圖的制作，將流程存儲為SVG文件，同時將實(shí)時顯示數(shù)據(jù)的過程參數(shù)位號位置信息存儲在XML文件中，利于在數(shù)據(jù)實(shí)時通訊的前后臺處理。在JS腳本中實(shí)現(xiàn)SVG圖的動態(tài)加載和位號的數(shù)據(jù)在SVG圖中定位和實(shí)時顯示。位號位置數(shù)據(jù)以XML格式存儲數(shù)據(jù)和圖像的動態(tài)加載在客戶端JS腳本中實(shí)現(xiàn)結(jié)束語本文首先簡單介紹了 WebSocket 規(guī)范在性能上的優(yōu)勢， 說明采用SVG制作流程圖的原因，針對如何利用 HTML5 WebSocket 和SVG技術(shù)解決采用瀏覽器方式監(jiān)控動態(tài)工業(yè)數(shù)據(jù)如何滿足實(shí)時性需求的問題，簡述了怎樣使用 WebSocket 和SVG構(gòu)建一個工業(yè)實(shí)時監(jiān)控 Web客戶端。參考文獻(xiàn)：1 IBM Web開發(fā)文檔