- 相關推薦
基于HTML5的實時Web數(shù)據(jù)監(jiān)測系統(tǒng)的設計與研究論文
隨著人們對信息實時性需求的不斷提高，實時Web技術越來越受到人們的重視。例如，實時在線版網絡游戲、在線購票系統(tǒng)等都是實時Web的典型代表。有國外媒體稱“實時Web的時代即將到來，實時Web不僅僅是一種時尚也是一種技術趨勢”�？蛻舳藬�(shù)據(jù)的實時性要求服務器能主動向客戶端實時發(fā)送數(shù)據(jù)，將最新的消息通知用戶。傳統(tǒng)的Web應用中，服務器都是響應瀏覽器請求發(fā)送數(shù)據(jù)給客戶端，而客戶端并不知道服務器數(shù)據(jù)何時變化，因此，無法做到真正的實時性。隨著HTML5技術的發(fā)展，通過HTML5的WebSocket技術和Canvas可實現(xiàn)真正實時Web的需求。為此，構建基于HTML5的實時Web數(shù)據(jù)監(jiān)測系統(tǒng)，與傳統(tǒng)實時Web技術相比，有效地減少了網絡延時和吞吐量。
1 傳統(tǒng)實時Web技術
傳統(tǒng)實時Web技術是基于HTTP協(xié)議(超文本傳輸協(xié)議)，HTTP協(xié)議下的服務器和客戶端的信息交互方式為：客戶端發(fā)送請求到服務器端，服務器端接收并處理客戶端請求后返回結果給客戶端，然后斷開連接。由于HTTP協(xié)議是無狀態(tài)協(xié)議，對于實時性要求比較高的Web應用，當客戶端準備呈現(xiàn)服務器端的響應數(shù)據(jù)時數(shù)據(jù)可能已經過時，如果用戶想要獲得實時性信息需要不停地刷新頁面，這顯然是不明智的。目前，實時Web的實現(xiàn)形式主要是輪詢和其他服務器推送，最常用的主要是輪詢和長輪詢技術。
1)輪詢技術�？蛻舳艘怨潭l率向服務器發(fā)送HTTP請求，通過服務器端響應請求實現(xiàn)實時性。顯然，消息傳遞之間如果有準確的時間間隔，輪詢是一個很好的方法，但是通常實時數(shù)據(jù)之間的時間間隔是不可預知的，實時數(shù)據(jù)何時發(fā)生改變無法預測，若頻率過高會加重服務器負載和網絡負擔，頻率過低會丟失重要數(shù)據(jù)，并且每次連接需要發(fā)送HTTP報頭而產生網絡噪聲。因此，輪詢技術是一種很低效的實時通信方案。
2)長輪詢技術�？蛻舳讼蚍⻊掌靼l(fā)送請求后，在一段時間內服務器會保持打開狀態(tài)，在此期間，如果服務器收到發(fā)送消息通知，會發(fā)送數(shù)據(jù)到客戶端，客戶端接收到數(shù)據(jù)時重新發(fā)送請求信息。然而，當數(shù)據(jù)量較大時，長輪詢對于傳統(tǒng)輪詢方式并無性能改善。從以上分析可知，傳統(tǒng)實時Web存在的缺陷是服務器端和客戶端缺少全雙工、穩(wěn)定的長連接。
2 相關技術與開發(fā)環(huán)境
2.1 WebSocket技術HTML5為繼HTML4.01后由W3C(萬維網聯(lián)盟)和WHATWG(Web超文本應用技術工作組)共同開發(fā)的一個全新版本的HTML。WebSocket作為HTML5的一種新的協(xié)議，它提供了一種全新的服務器-客戶端的異步通信方法，彌補了傳統(tǒng)實時Web的缺陷，成為未來實時Web應用的首選方案。
WebSocket協(xié)議和WebSocket API分別為Web-Socket的理論和實踐部分。WebSocket協(xié)議由握手和數(shù)據(jù)傳輸2個階段構成。TCP建立連接后首先要進行WebSocket層的握手操作，這個階段非常簡單，客戶端給服務器發(fā)送HTTP請求，服務器響應客戶端請求。
這個階段的數(shù)據(jù)傳輸都基于文本，與現(xiàn)有的HTTP1.1相兼容。握手成功后進入數(shù)據(jù)傳輸階段，這個階段脫離了HTTP協(xié)議。WebSocket API由W3C制定，在WebSocket API中客戶端和服務器端只需一個交互信息，客戶端和服務器端就建立了一條全雙工的信息傳輸通道，可直接相互傳輸數(shù)據(jù)，類似于TCP/IP。這種技術不僅為實時Web應用節(jié)省了大量的服務器帶寬和資源，而且能滿足實時性的需求。
2.2 WebSocket服務器
WebSocket協(xié)議基于B/S架構，因此要實現(xiàn)Web-Socket協(xié)議，必須要有WebSocket服務器。目前Web-Socket服務器的開源實現(xiàn)有很多，例如：
1)Kaazing WebSocket Gateway(Java實現(xiàn)的Web-Socket服務器);
2)Netty 3.0+(Java實現(xiàn)的WebSocket服務器);
3)Node.js(JavaScript實現(xiàn)的WebSocket服務器);
4)mod_pywebsocket(Python實現(xiàn)的WebSocket服務器);
Node.js是由Ryan Dahl發(fā)起的開源項目，現(xiàn)由Joyent公司管理維護。Node.js是可以讓JavaScript在服務器端運行的平臺，它可以讓JavaScript既可在瀏覽器端又可在服務器環(huán)境下運行。Node.js與其他服務器語言相比優(yōu)勢有以下幾點：
1)Node.js采用V8引擎，大大提升了JavaScript代碼的運行速度。
2)Node.js摒棄了傳統(tǒng)平臺采用多線程實現(xiàn)高并發(fā)的方法，采用了單線程、異步式I/O、事件驅動的方式，不僅擺脫了多線程所帶來的困擾，也使性能得到了巨大的提升，提高了開發(fā)效率。
3)Node.js充分考慮了數(shù)據(jù)的實時性，是一個為實時Web而誕生的平臺。通過Node.js與WebSocket的合作，可開發(fā)實時性要求較高的Web應用。
2.3 客戶端圖形實時呈現(xiàn)
如今，實時Web應用的開發(fā)者越來越注重用戶的體驗度，將繁雜的數(shù)據(jù)進行可視化可向用戶更加簡單、直觀地展示數(shù)據(jù)的變化，減少用戶整理和思考的時間。目前，互聯(lián)網上的數(shù)據(jù)可視化工具有很多，例如Spss、Matlab、Excel、Tableau Desktop、Echarts等。其中，Spss更加注重統(tǒng)計分析，但圖表與其他軟件的兼容性較差;Matlab需要很強的編程能力，更偏向于科學方面的可視化處理;Excel輸出圖表無交互性，不能進行動態(tài)數(shù)據(jù)的可視化處理;Tableau Desktop需要收取較高的費用。
HTML5中的Canvas元素提供了可進行繪圖的平臺，采用JavaScript語言對其操作可繪制理想的圖形，通過Canvas元素可對系統(tǒng)的實時數(shù)據(jù)進行可視化處理。Echarts(Enterprise Charts商業(yè)產品圖表庫)是基于Canvas使用JavaScript語言編寫的可視化圖表庫，而且擁有動態(tài)數(shù)據(jù)接口。通過Echarts的動態(tài)數(shù)據(jù)接口，可對系統(tǒng)的實時數(shù)據(jù)進行可視化處理。
2.4 開發(fā)工具及開發(fā)環(huán)境
Web程序主要是在瀏覽器上觀看運行效果，在后端服務器和瀏覽器中完成調試和運行Web程序，選用Editplus作為編輯器，可在編碼過程中對代碼進行高亮顯示，提高編程效率。目前瀏覽器對HTML5的支持程度良莠不齊，系統(tǒng)選用Google Chrome瀏覽器(版本35.0.1916.114m)作為開發(fā)和測試環(huán)境，與其他瀏覽器相比，Chrome打開速度快，用戶體驗好。服務器端安裝Node.js(版本0.10.26)及Node.js的包管理器NPM(版本1.4.3)。在Windows系統(tǒng)中安裝Node.js非常簡單，訪問http：//nodejs.org下載安裝包后點擊Next就可以自動完成安裝，通過這種方式還自動安裝了Node.js的包管理器NPM。另外，在命令提示符中輸入node，即可測試Node.js是否安裝成功。
3 構建實時數(shù)據(jù)監(jiān)測系統(tǒng)
3.1 系統(tǒng)結構
實時Web數(shù)據(jù)監(jiān)測系統(tǒng)由服務器端和客戶端2部分構成，其系統(tǒng)結構如圖2所示。服務器端主要采集和推送數(shù)據(jù)，客戶端主要實現(xiàn)動態(tài)數(shù)據(jù)接收控制和顯示等功能。
3.2 系統(tǒng)流程圖
基于WebSocket實時數(shù)據(jù)監(jiān)測系統(tǒng)的流程圖如圖3所示。從圖3可看出，WebSocket服務器主要功能通過WebSocket接口來響應客戶端事件，客戶端通過WebSocket對象監(jiān)聽事件，通過觸發(fā)OnMessage接收數(shù)據(jù)并動態(tài)顯示數(shù)據(jù)。
3.3 基于Node.js的WebSocket服務器端實現(xiàn)Node.js-WebSocket是專門為WebSocket服務器開發(fā)的Node.js模塊，通過直接調用Node.js-Web-Socket模塊封裝的方法可輕松構建屬于自己的Web-Socket服務器。Node.js-WebSocket模塊的使用及通過模塊中的相關函數(shù)構建WebSocket服務器過程為：
1)在Node.js中通過NPM 包管理器執(zhí)行程序
“NPM install Node.js-WebSocket”安裝Node.js-Web-Socket模塊。
2)通過Node.js提供的require函數(shù)調用Node.js-WebSocket模塊，并運用其中的createServer()創(chuàng)建服務器對象，開始監(jiān)聽客戶端請求，客戶端發(fā)出請求后，WebSocket服務器端和客戶端開始建立連接。
var ws=require("nodejs-websocket");
//調用Node.js-WebSocket模塊
var server= ws.createServer(function(conn){
�。�).listen(8001);
上述代碼創(chuàng)建WebSocket服務器對象并監(jiān)聽8001端口。
3)注冊事件并為事件指定響應的函數(shù)。本代碼注冊了text、error、close三個事件：
a)text，當服務器接收到客戶端字符串時觸發(fā);
b)error，連接過程中發(fā)生錯誤時觸發(fā);
c)close，當WebSocket連接關閉時觸發(fā)。
WebSocket服務器接收到客戶端字符串時觸發(fā)text事件，進而調用相應的函數(shù)，將Mysql數(shù)據(jù)庫中實時數(shù)據(jù)發(fā)送給客戶端。例如：
conn.on("text"，function(str){console.log(" 收到的信息為：" +str)
sendmess()//發(fā)送實時數(shù)據(jù)到客戶端｝)
conn.on("close"，function(code，reason){
console._浹鉥K]log(" 關閉連接" )｝)
conn.on("error"，function(code，reason){
console.log(" 異常關閉" )｝)
WebSocket服務器編寫完畢后保存文檔為Web-Socket.js，打開終端，進入WebSocket.js所在的目錄，執(zhí)行node WebSocket.js命令即可運行WebSocket服務器。
3.4 WebSocket客戶端與Echarts實時數(shù)據(jù)顯示WebSocket客戶端只需要綁定相應地址和端口并與服務器建立連接，可接收服務器推送的數(shù)據(jù)，因此，WebSocket的客戶端很容易使用。具體步驟為：
1)創(chuàng)建連接。首先需要新建一個WebSocket對象，并傳入相應的URL，WebSocket創(chuàng)建完成后，頁面可連接服務器。
var ws=new WebSocket('ws：//192.168.17.80：8001')
上述代碼創(chuàng)建了WebSocket對象，其中URL由3部分組成，分別為通信標記(ws)、主機IP和端口號。
2)監(jiān)聽事件。WebSocket對象擁有4個事件：on-Open、onClose、onError和onMessage。
a)onOpen：WebSocket服務器建立完成時觸發(fā);
b)onClose：WebSocket服務器關閉時觸發(fā);
c)onError：WebSocket服務器創(chuàng)建過程中發(fā)生錯誤時觸發(fā);
d)onMessage：客戶端收到服務器端數(shù)據(jù)時觸發(fā)。
WebSocket服務器發(fā)送數(shù)據(jù)給客戶端時觸發(fā)on-Message事件，通過onMessage事件將實時數(shù)據(jù)傳入Echarts圖表的動態(tài)接口。例如：
ws.onopen=function(e){console.log(" 連接服務器成功" )
ws.send("game1");｝
ws.onclose=function(e){console.log(" 服務器關閉" );｝
ws.onerror=function(e){console.log(" 連接出錯" );｝
ws.onmessage=function(e){data2=e.data;｝
3)數(shù)據(jù)顯示。Echarts擁有動態(tài)數(shù)據(jù)接口，將數(shù)據(jù)庫動態(tài)數(shù)據(jù)傳入動態(tài)數(shù)據(jù)接口就可展示實時數(shù)據(jù)，例如：
myChart.addData([//動態(tài)數(shù)據(jù)接口addData
[0//系列索引
data2，
//新增數(shù)據(jù)，data2為服務器發(fā)送給客戶端實時
//數(shù)據(jù)
False//新增數(shù)據(jù)是否從隊列頭部插入
false//是否增加隊列長度
4)主動關閉連接。若客戶端認為通信已結束，可調用disconnect()函數(shù)關閉連接：ws.disconnect()。圖4為采用該實時數(shù)據(jù)監(jiān)測系統(tǒng)開發(fā)的實時溫度數(shù)據(jù)顯示圖。其中，X 軸為動態(tài)并持續(xù)更新最新時間，Y 軸為對應時間的溫度值。由此可對溫度數(shù)據(jù)進行實時監(jiān)測。
4 輪詢與WebSocket服務器推送方式的測試
4.1 網絡延時
圖5為Ajax長輪詢與WebSocket服務器推送方式的網絡延時對比。從圖5可看出，Ajax輪詢方式下客戶端與服務器之間的平均延時為50ms，為了保持連接，服務器與客戶端需不斷進行請求和響應的操作，從而造成多次延時，并且延時中服務器無法向客戶端發(fā)送消息，從而造成資源浪費。WebSocket模式下，服務器和客戶端只在第一次握手連接時會造成延時，握手連接成功后客戶端無需向服務器發(fā)送請求，服務器主動發(fā)送消息到客戶端，從而減少了網絡延時，提高了系統(tǒng)的實時性。
4.2 網絡吞吐量
本次實驗中，Ajax長輪詢的請求和響應的報頭大小為734Byte，不包含任何數(shù)據(jù)。采用WebSocket技術，消息為一個數(shù)據(jù)幀，開銷為2Byte。3種情景下連接數(shù)增加時Ajax長輪詢和采用WebSocket技術的網絡吞吐量對比情況如圖6所示，其中1000個用戶Ajax長輪詢和Websocket的網絡吞吐量分別為5.6、0.015Mbit/s，10 000個用戶Ajax長輪詢和Websocket的網絡吞吐量分別為56、0.15Mbit/s，100 000個用戶Ajax長輪詢和Websocket_K]P_浹的網絡吞吐量分別為560、1.526Mbit/s。可見，隨著用戶的增加，WebSocket的吞吐量明顯低于Ajax長輪詢。
5 結束語
構建了基于HTML5的實時Web數(shù)據(jù)監(jiān)測系統(tǒng)，能將數(shù)據(jù)(如溫度、濕度、電壓、電流等)實時發(fā)送到客戶端，客戶端通過Echarts對數(shù)據(jù)進行直觀顯示。與傳統(tǒng)實時Web技術Ajax輪詢對比測試結果表明，HTML5能大大減小網絡延時和吞吐量。隨著HTML5協(xié)議的完善，基于HTML5的實時方案將會被大量應用。
【基于HTML5的實時Web數(shù)據(jù)監(jiān)測系統(tǒng)的設計與研究論文】相關文章：
FPGA數(shù)據(jù)采集與回放系統(tǒng)設計論文04-24
基于系統(tǒng)設計的科研管理論文09-22
數(shù)據(jù)庫與課程設計結合教學模式研究論文06-23
基于CDI0理念下的《網頁設計》教學思考與研究的論文07-12
基于課堂的教師行動研究的論文06-07
基于冗余PLC的井下排水自動控制系統(tǒng)的設計的論文02-22
基于DSP整流器設計論文04-18
在線監(jiān)測系統(tǒng)方案03-31
簡議基于項目化教學的《機械設計基礎》與《課程設計》整合實踐研究論文07-12
基于SCOSM自適應教學模型設計論文07-12