基于HTML5的實時Web數(shù)據(jù)監(jiān)測系統(tǒng)

楊建業(yè),耿建平

(桂林電子科技大學電子工程與自動化學院,廣西桂林 541004)

基于HTML5的實時Web數(shù)據(jù)監(jiān)測系統(tǒng)

楊建業(yè),耿建平

(桂林電子科技大學電子工程與自動化學院,廣西桂林 541004)

針對傳統(tǒng)實時Web技術(shù)存在實時性差、吞吐量大等缺點,構(gòu)建一種基于HTML5的實時Web數(shù)據(jù)監(jiān)測系統(tǒng),并與傳統(tǒng)Ajax輪詢方式進行了對比。該系統(tǒng)通過Node.js搭建WebSocket服務(wù)器,將實時數(shù)據(jù)(如溫度、濕度、電壓、電流等)通過Web-Socket技術(shù)實時推送到客戶端,客戶端通過Echarts對實時數(shù)據(jù)進行直觀顯示。結(jié)果表明:Websocket服務(wù)器推送技術(shù)實時性更強,并有效地減少了網(wǎng)絡(luò)吞吐量,具有很強的實用性。

實時數(shù)據(jù);HTML5;WebSocket;Node.js;Echarts

隨著人們對信息實時性需求的不斷提高,實時Web技術(shù)越來越受到人們的重視。例如,實時在線版網(wǎng)絡(luò)游戲、在線購票系統(tǒng)等都是實時Web的典型代表。有國外媒體稱“實時Web的時代即將到來,實時Web不僅僅是一種時尚也是一種技術(shù)趨勢”。客戶端數(shù)據(jù)的實時性要求服務(wù)器能主動向客戶端實時發(fā)送數(shù)據(jù),將最新的消息通知用戶。傳統(tǒng)的Web應(yīng)用中,服務(wù)器都是響應(yīng)瀏覽器請求發(fā)送數(shù)據(jù)給客戶端,而客戶端并不知道服務(wù)器數(shù)據(jù)何時變化,因此,無法做到真正的實時性。隨著HTML5技術(shù)的發(fā)展,通過HTML5的WebSocket技術(shù)和Canvas可實現(xiàn)真正實時Web的需求。為此,構(gòu)建基于HTML5的實時Web數(shù)據(jù)監(jiān)測系統(tǒng),與傳統(tǒng)實時Web技術(shù)相比,有效地減少了網(wǎng)絡(luò)延時和吞吐量。

1 傳統(tǒng)實時Web技術(shù)

傳統(tǒng)實時Web技術(shù)[1]是基于HTTP協(xié)議(超文本傳輸協(xié)議),HTTP協(xié)議下的服務(wù)器和客戶端的信息交互方式為:客戶端發(fā)送請求到服務(wù)器端,服務(wù)器端接收并處理客戶端請求后返回結(jié)果給客戶端,然后斷開連接。由于HTTP協(xié)議是無狀態(tài)協(xié)議,對于實時性要求比較高的Web應(yīng)用,當客戶端準備呈現(xiàn)服務(wù)器端的響應(yīng)數(shù)據(jù)時數(shù)據(jù)可能已經(jīng)過時,如果用戶想要獲得實時性信息需要不停地刷新頁面,這顯然是不明智的。目前,實時Web的實現(xiàn)形式主要是輪詢和其他服務(wù)器推送,最常用的主要是輪詢和長輪詢技術(shù)。

1)輪詢技術(shù)?？蛻舳艘怨潭l率向服務(wù)器發(fā)送HTTP請求,通過服務(wù)器端響應(yīng)請求實現(xiàn)實時性。顯然,消息傳遞之間如果有準確的時間間隔,輪詢是一個很好的方法,但是通常實時數(shù)據(jù)之間的時間間隔是不可預知的,實時數(shù)據(jù)何時發(fā)生改變無法預測,若頻率過高會加重服務(wù)器負載和網(wǎng)絡(luò)負擔,頻率過低會丟失重要數(shù)據(jù),并且每次連接需要發(fā)送HTTP報頭而產(chǎn)生網(wǎng)絡(luò)噪聲。因此,輪詢技術(shù)是一種很低效的實時通信方案。

2)長輪詢技術(shù)?？蛻舳讼蚍?wù)器發(fā)送請求后,在一段時間內(nèi)服務(wù)器會保持打開狀態(tài),在此期間,如果服務(wù)器收到發(fā)送消息通知,會發(fā)送數(shù)據(jù)到客戶端,客戶端接收到數(shù)據(jù)時重新發(fā)送請求信息。然而,當數(shù)據(jù)量較大時,長輪詢對于傳統(tǒng)輪詢方式并無性能改善。

從以上分析可知,傳統(tǒng)實時Web存在的缺陷是服務(wù)器端和客戶端缺少全雙工、穩(wěn)定的長連接。

2 相關(guān)技術(shù)與開發(fā)環(huán)境

2.1 WebSocket技術(shù)

HTML5[2]為繼HTML4.01后由W3C(萬維網(wǎng)聯(lián)盟)和WHATWG(Web超文本應(yīng)用技術(shù)工作組)共同開發(fā)的一個全新版本的HTML。WebSocket作為HTML5的一種新的協(xié)議,它提供了一種全新的服務(wù)器-客戶端的異步通信方法,彌補了傳統(tǒng)實時Web的缺陷,成為未來實時Web應(yīng)用的首選方案。

WebSocket[3]協(xié)議和WebSocket API分別為Web-Socket的理論和實踐部分。WebSocket協(xié)議由握手和數(shù)據(jù)傳輸2個階段構(gòu)成。TCP建立連接后首先要進行WebSocket層的握手操作,這個階段非常簡單,客戶端給服務(wù)器發(fā)送HTTP請求,服務(wù)器響應(yīng)客戶端請求。這個階段的數(shù)據(jù)傳輸都基于文本,與現(xiàn)有的HTTP1.1相兼容。握手成功后進入數(shù)據(jù)傳輸階段,這個階段脫離了HTTP協(xié)議。WebSocket API由W3C制定,如圖1所示。在WebSocket API中客戶端和服務(wù)器端只需一個交互信息[4],客戶端和服務(wù)器端就建立了一條全雙工的信息傳輸通道,可直接相互傳輸數(shù)據(jù),類似于TCP/IP。這種技術(shù)不僅為實時Web應(yīng)用節(jié)省了大量的服務(wù)器帶寬和資源,而且能滿足實時性的需求。

圖1 WebSocket通信原理Fig.1 The communication principle of WebSocket

2.2 WebSocket服務(wù)器

WebSocket協(xié)議基于B/S架構(gòu),因此要實現(xiàn)Web-Socket協(xié)議,必須要有WebSocket服務(wù)器。目前Web-Socket服務(wù)器的開源實現(xiàn)有很多,例如:

1)Kaazing WebSocket Gateway(Java實現(xiàn)的Web-Socket服務(wù)器);

2)Netty 3.0+(Java實現(xiàn)的WebSocket服務(wù)器);

3)Node.js(JavaScript實現(xiàn)的WebSocket服務(wù)器);

4)mod_pywebsocket(Python實現(xiàn)的WebSocket服務(wù)器);

Node.js[5]是由Ryan Dahl發(fā)起的開源項目,現(xiàn)由Joyent公司管理維護。Node.js是可以讓JavaScript在服務(wù)器端運行的平臺,它可以讓JavaScript既可在瀏覽器端又可在服務(wù)器環(huán)境下運行。Node.js與其他服務(wù)器語言相比優(yōu)勢有以下幾點:

1)Node.js采用V8引擎,大大提升了JavaScript代碼的運行速度。

2)Node.js摒棄了傳統(tǒng)平臺采用多線程實現(xiàn)高并發(fā)的方法,采用了單線程、異步式I/O、事件驅(qū)動的方式,不僅擺脫了多線程所帶來的困擾,也使性能得到了巨大的提升,提高了開發(fā)效率。

3)Node.js充分考慮了數(shù)據(jù)的實時性,是一個為實時Web而誕生的平臺。通過Node.js與WebSocket的合作,可開發(fā)實時性要求較高的Web應(yīng)用。

2.3 客戶端圖形實時呈現(xiàn)

如今,實時Web應(yīng)用的開發(fā)者越來越注重用戶的體驗度,將繁雜的數(shù)據(jù)進行可視化可向用戶更加簡單、直觀地展示數(shù)據(jù)的變化,減少用戶整理和思考的時間。目前,互聯(lián)網(wǎng)上的數(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è)產(chǎn)品圖表庫)是基于Canvas使用JavaScript語言編寫的可視化圖表庫,而且擁有動態(tài)數(shù)據(jù)接口。通過Echarts的動態(tài)數(shù)據(jù)接口,可對系統(tǒng)的實時數(shù)據(jù)進行可視化處理。

2.4 開發(fā)工具及開發(fā)環(huán)境

Web程序主要是在瀏覽器上觀看運行效果,在后端服務(wù)器和瀏覽器中完成調(diào)試和運行Web程序,選用Editplus作為編輯器,可在編碼過程中對代碼進行高亮顯示,提高編程效率。目前瀏覽器對HTML5的支持程度良莠不齊,系統(tǒng)選用Google Chrome瀏覽器(版本35.0.1916.114m)作為開發(fā)和測試環(huán)境,與其他瀏覽器相比,Chrome打開速度快,用戶體驗好。服務(wù)器端安裝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 構(gòu)建實時數(shù)據(jù)監(jiān)測系統(tǒng)

3.1 系統(tǒng)結(jié)構(gòu)

實時Web數(shù)據(jù)監(jiān)測系統(tǒng)由服務(wù)器端和客戶端2部分構(gòu)成,其系統(tǒng)結(jié)構(gòu)如圖2所示。服務(wù)器端主要采集和推送數(shù)據(jù),客戶端主要實現(xiàn)動態(tài)數(shù)據(jù)接收控制和顯示等功能。

圖2 實時數(shù)據(jù)監(jiān)測系統(tǒng)結(jié)構(gòu)Fig.2 The structure of real-time data monitoring system

3.2 系統(tǒng)流程圖

基于WebSocket實時數(shù)據(jù)監(jiān)測系統(tǒng)的流程圖如圖3所示。從圖3可看出,WebSocket服務(wù)器主要功能通過WebSocket接口來響應(yīng)客戶端事件,客戶端通過WebSocket對象監(jiān)聽事件,通過觸發(fā)OnMessage接收數(shù)據(jù)并動態(tài)顯示數(shù)據(jù)。

圖3 實時數(shù)據(jù)監(jiān)測系統(tǒng)流程圖Fig.3 The flow chart of real-time monitoring system

3.3 基于Node.js的WebSocket服務(wù)器端實現(xiàn)

Node.js-WebSocket是專門為WebSocket服務(wù)器開發(fā)的Node.js[4]模塊,通過直接調(diào)用Node.js-Web-Socket模塊封裝的方法可輕松構(gòu)建屬于自己的Web-Socket服務(wù)器。Node.js-WebSocket模塊的使用及通過模塊中的相關(guān)函數(shù)構(gòu)建WebSocket服務(wù)器過程為:

1)在Node.js中通過NPM包管理器執(zhí)行程序“NPM install Node.js-WebSocket”安裝Node.js-Web-Socket模塊。

2)通過Node.js提供的require函數(shù)調(diào)用Node.js-WebSocket模塊,并運用其中的createServer()創(chuàng)建服務(wù)器對象,開始監(jiān)聽客戶端請求,客戶端發(fā)出請求后, WebSocket服務(wù)器端和客戶端開始建立連接。

var ws=require("nodejs-websocket");

//調(diào)用Node.js-WebSocket模塊

var server=ws.createServer(function(conn){

}).listen(8001);

上述代碼創(chuàng)建WebSocket服務(wù)器對象并監(jiān)聽8001端口。

3)注冊事件并為事件指定響應(yīng)的函數(shù)。本代碼注冊了text、error、close三個事件:

a)text,當服務(wù)器接收到客戶端字符串時觸發(fā);

b)error,連接過程中發(fā)生錯誤時觸發(fā);

c)close,當WebSocket連接關(guān)閉時觸發(fā)。

WebSocket服務(wù)器接收到客戶端字符串時觸發(fā)text事件,進而調(diào)用相應(yīng)的函數(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.log("關(guān)閉連接")

})

conn.on("error",function(code,reason){

console.log("異常關(guān)閉")

})

WebSocket服務(wù)器編寫完畢后保存文檔為Web-Socket.js,打開終端,進入WebSocket.js所在的目錄,執(zhí)行node WebSocket.js命令即可運行WebSocket服務(wù)器。

3.4 WebSocket客戶端與Echarts實時數(shù)據(jù)顯示

WebSocket客戶端只需要綁定相應(yīng)地址和端口并與服務(wù)器建立連接,可接收服務(wù)器推送的數(shù)據(jù),因此, WebSocket的客戶端很容易使用。具體步驟為:

1)創(chuàng)建連接。首先需要新建一個WebSocket對象,并傳入相應(yīng)的URL,WebSocket創(chuàng)建完成后,頁面可連接服務(wù)器。

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和on Message。

a)on Open:WebSocket服務(wù)器建立完成時觸發(fā);

b)onClose:WebSocket服務(wù)器關(guān)閉時觸發(fā);

c)onError:WebSocket服務(wù)器創(chuàng)建過程中發(fā)生錯誤時觸發(fā);

d)on Message:客戶端收到服務(wù)器端數(shù)據(jù)時觸發(fā)。

WebSocket服務(wù)器發(fā)送數(shù)據(jù)給客戶端時觸發(fā)on-Message事件,通過on Message事件將實時數(shù)據(jù)傳入Echarts圖表的動態(tài)接口。例如:

ws.onopen=function(e){

console.log("連接服務(wù)器成功")

ws.send("game1");}

ws.onclose=function(e){console.log("服務(wù)器關(guān)閉");}

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為服務(wù)器發(fā)送給客戶端實時

//數(shù)據(jù)

False//新增數(shù)據(jù)是否從隊列頭部插入

false//是否增加隊列長度

]

]}

4)主動關(guān)閉連接。若客戶端認為通信已結(jié)束,可調(diào)用disconnect()函數(shù)關(guān)閉連接:ws.disconnect()。

圖4為采用該實時數(shù)據(jù)監(jiān)測系統(tǒng)開發(fā)的實時溫度數(shù)據(jù)顯示圖。其中,X軸為動態(tài)并持續(xù)更新最新時間, Y軸為對應(yīng)時間的溫度值。由此可對溫度數(shù)據(jù)進行實時監(jiān)測。

圖4 實時溫度數(shù)據(jù)顯示Fig.4 The display of real-time temperature data

4 輪詢與WebSocket服務(wù)器推送方式的測試

4.1 網(wǎng)絡(luò)延時

圖5為Ajax長輪詢[6]與WebSocket服務(wù)器推送方式的網(wǎng)絡(luò)延時對比[7]。從圖5可看出,Ajax輪詢方式下客戶端與服務(wù)器之間的平均延時為50 ms,為了保持連接,服務(wù)器與客戶端需不斷進行請求和響應(yīng)的操作,從而造成多次延時,并且延時中服務(wù)器無法向客戶端發(fā)送消息,從而造成資源浪費。WebSocket模式下,服務(wù)器和客戶端只在第一次握手連接時會造成延時,握手連接成功后客戶端無需向服務(wù)器發(fā)送請求,服務(wù)器主動發(fā)送消息到客戶端,從而減少了網(wǎng)絡(luò)延時,提高了系統(tǒng)的實時性。

圖5 WebSocket與Ajax輪詢網(wǎng)絡(luò)延時對比Fig.5 The network delay of WebSocket and Ajax

4.2 網(wǎng)絡(luò)吞吐量

本次實驗中,Ajax長輪詢的請求和響應(yīng)的報頭大小為734 Byte,不包含任何數(shù)據(jù)。采用WebSocket技術(shù),消息為一個數(shù)據(jù)幀,開銷為2 Byte。3種情景下連接數(shù)增加時Ajax長輪詢和采用WebSocket技術(shù)的網(wǎng)絡(luò)吞吐量對比情況如圖6所示,其中1000個用戶Ajax長輪詢和Websocket的網(wǎng)絡(luò)吞吐量分別為5.6、0.015 Mbit/s,10 000個用戶Ajax長輪詢和Websocket的網(wǎng)絡(luò)吞吐量分別為56、0.15 Mbit/s,100 000個用戶Ajax長輪詢和Websocket的網(wǎng)絡(luò)吞吐量分別為560、1.526 Mbit/s?？梢?隨著用戶的增加,WebSocket的吞吐量明顯低于Ajax長輪詢。

圖6 Ajax和WebSocket的網(wǎng)絡(luò)吞吐量對比Fig.6 The network throughput of WebSocket and Ajax

5 結(jié)束語

構(gòu)建了基于HTML5的實時Web數(shù)據(jù)監(jiān)測系統(tǒng),能將數(shù)據(jù)(如溫度、濕度、電壓、電流等)實時發(fā)送到客戶端,客戶端通過Echarts對數(shù)據(jù)進行直觀顯示。與傳統(tǒng)實時Web技術(shù)Ajax輪詢對比測試結(jié)果表明,HTML5能大大減小網(wǎng)絡(luò)延時和吞吐量。隨著HTML5協(xié)議的完善,基于HTML5的實時方案將會被大量應(yīng)用。

[1] 肖在昌,楊文暉,劉兵.基于WebSocket實時技術(shù)[J].學術(shù)探討,2012,12:40-41.

[2] 明日科技.HTML5從入門到精通[M].北京:清華大學出版社,2012:4-15.

[3] Pimentel V,Nickerson B G.Communicating and displaying real-time data with WebSocket[J].Internet Computing, IEEE,2012,16(4):45-53.

[4] 吳曉東,王鵬.HTML5的通信機制及效率的研究[J].長春理工大學學報,2011,34(4):159-160.

[5] Void B Y.Node.js開發(fā)指南[M].北京:人民郵電出版社, 2012:2-7.

[6] 柯昌正,黃厚寬.Ajax技術(shù)的原理與應(yīng)用[J].鐵路計算機應(yīng)用,2007,16(1):1-2.

[7] 薛隴彬,劉釗遠.基于Websocket的網(wǎng)絡(luò)實時通信[J].計算機與數(shù)字工程,2014,42(3):478-481.

編輯:翁史振

A real-time Web data monitoring system based on HTML5

Yang Jianye,Geng Jianping
(School of Electronic Engineering and Automation,Guilin University of Electronic Technology,Guilin 541004,China)

Traditional real-time Web technology based on HTTP protocol has the shortcomings of big consumption and low efficiency.A new real-time data monitoring system based on HTML5 is built and compared with the Ajax.The proposed system sets up a WebSocket server through the Node.js,and pushes the real-time data(such as temperature,humidity,voltage,current)to the client via the WebSocket technology.Then the real-time data is displayed by the client through the Echarts.The simulation results show that the real-time Web technology based on WebSocket can reduce delay and network throughput.So it is practicable.

real-time data;HTML5;WebSocket;Node.js;Echarts

TP393

A

1673-808X(2015)02-0136-06

2014-11-04

廣西自然科學基金(2014GXNSFAA118393)

耿建平(1973—),男,山西平遙人,副教授,博士,研究方向為測控技術(shù)、虛擬儀器。E-mail:jianpinggeng@guet.edu.cn

楊建業(yè),耿建平.基于HTML5的實時Web數(shù)據(jù)監(jiān)測系統(tǒng)[J].桂林電子科技大學學報,2015,35(2):136-141.