基於HTML5的實時Web數據監測系統的設計與研究論文

隨着人們對信息實時性需求的不斷提高，實時Web技術越來越受到人們的重視。例如，實時在線版網絡遊戲、在線購票系統等都是實時Web的典型代表。有國外媒體稱“實時Web的時代即將到來，實時Web不僅僅是一種時尚也是一種技術趨勢”。客户端數據的實時性要求服務器能主動向客户端實時發送數據，將最新的消息通知用户。傳統的Web應用中，服務器都是響應瀏覽器請求發送數據給客户端，而客户端並不知道服務器數據何時變化，因此，無法做到真正的實時性。隨着HTML5技術的發展，通過HTML5的WebSocket技術和Canvas可實現真正實時Web的需求。為此，構建基於HTML5的實時Web數據監測系統，與傳統實時Web技術相比，有效地減少了網絡延時和吞吐量。

1 傳統實時Web技術

傳統實時Web技術是基於HTTP協議(超文本傳輸協議)，HTTP協議下的服務器和客户端的信息交互方式為：客户端發送請求到服務器端，服務器端接收並處理客户端請求後返回結果給客户端，然後斷開連接。由於HTTP協議是無狀態協議，對於實時性要求比較高的Web應用，當客户端準備呈現服務器端的響應數據時數據可能已經過時，如果用户想要獲得實時性信息需要不停地刷新頁面，這顯然是不明智的。目前，實時Web的實現形式主要是輪詢和其他服務器推送，最常用的主要是輪詢和長輪詢技術。

1)輪詢技術。客户端以固定頻率向服務器發送HTTP請求，通過服務器端響應請求實現實時性。顯然，消息傳遞之間如果有準確的時間間隔，輪詢是一個很好的方法，但是通常實時數據之間的時間間隔是不可預知的，實時數據何時發生改變無法預測，若頻率過高會加重服務器負載和網絡負擔，頻率過低會丟失重要數據，並且每次連接需要發送HTTP報頭而產生網絡噪聲。因此，輪詢技術是一種很低效的實時通信方案。

2)長輪詢技術。客户端向服務器發送請求後，在一段時間內服務器會保持打開狀態，在此期間，如果服務器收到發送消息通知，會發送數據到客户端，客户端接收到數據時重新發送請求信息。然而，當數據量較大時，長輪詢對於傳統輪詢方式並無性能改善。從以上分析可知，傳統實時Web存在的缺陷是服務器端和客户端缺少全雙工、穩定的長連接。

2 相關技術與開發環境

2.1 WebSocket技術HTML5為繼HTML4.01後由W3C(萬維網聯盟)和WHATWG(Web超文本應用技術工作組)共同開發的一個全新版本的HTML。WebSocket作為HTML5的一種新的協議，它提供了一種全新的服務器-客户端的異步通信方法，彌補了傳統實時Web的缺陷，成為未來實時Web應用的首選方案。

WebSocket協議和WebSocket API分別為Web-Socket的理論和實踐部分。WebSocket協議由握手和數據傳輸2個階段構成。TCP建立連接後首先要進行WebSocket層的握手操作，這個階段非常簡單，客户端給服務器發送HTTP請求，服務器響應客户端請求。

這個階段的數據傳輸都基於文本，與現有的HTTP1.1相兼容。握手成功後進入數據傳輸階段，這個階段脱離了HTTP協議。WebSocket API由W3C制定，在WebSocket API中客户端和服務器端只需一個交互信息，客户端和服務器端就建立了一條全雙工的信息傳輸通道，可直接相互傳輸數據，類似於TCP/IP。這種技術不僅為實時Web應用節省了大量的服務器帶寬和資源，而且能滿足實時性的'需求。

2.2 WebSocket服務器

WebSocket協議基於B/S架構，因此要實現Web-Socket協議，必須要有WebSocket服務器。目前Web-Socket服務器的開源實現有很多，例如：

1)Kaazing WebSocket Gateway(Java實現的Web-Socket服務器);

2)Netty 3.0+(Java實現的WebSocket服務器);

3)(JavaScript實現的WebSocket服務器);

4)mod_pywebsocket(Python實現的WebSocket服務器);

是由Ryan Dahl發起的開源項目，現由Joyent公司管理維護。是可以讓JavaScript在服務器端運行的平台，它可以讓JavaScript既可在瀏覽器端又可在服務器環境下運行。與其他服務器語言相比優勢有以下幾點：

1)採用V8引擎，大大提升了JavaScript代碼的運行速度。

2)摒棄了傳統平台採用多線程實現高併發的方法，採用了單線程、異步式I/O、事件驅動的方式，不僅擺脱了多線程所帶來的困擾，也使性能得到了巨大的提升，提高了開發效率。

3)充分考慮了數據的實時性，是一個為實時Web而誕生的平台。通過與WebSocket的合作，可開發實時性要求較高的Web應用。

2.3 客户端圖形實時呈現

如今，實時Web應用的開發者越來越注重用户的體驗度，將繁雜的數據進行可視化可向用户更加簡單、直觀地展示數據的變化，減少用户整理和思考的時間。目前，互聯網上的數據可視化工具有很多，例如Spss、Matlab、Excel、Tableau Desktop、Echarts等。其中，Spss更加註重統計分析，但圖表與其他軟件的兼容性較差;Matlab需要很強的編程能力，更偏向於科學方面的可視化處理;Excel輸出圖表無交互性，不能進行動態數據的可視化處理;Tableau Desktop需要收取較高的費用。

HTML5中的Canvas元素提供了可進行繪圖的平台，採用JavaScript語言對其操作可繪製理想的圖形，通過Canvas元素可對系統的實時數據進行可視化處理。Echarts(Enterprise Charts商業產品圖表庫)是基於Canvas使用JavaScript語言編寫的可視化圖表庫，而且擁有動態數據接口。通過Echarts的動態數據接口，可對系統的實時數據進行可視化處理。

2.4 開發工具及開發環境

Web程序主要是在瀏覽器上觀看運行效果，在後端服務器和瀏覽器中完成調試和運行Web程序，選用Editplus作為編輯器，可在編碼過程中對代碼進行高亮顯示，提高編程效率。目前瀏覽器對HTML5的支持程度良莠不齊，系統選用Google Chrome瀏覽器(版本35.0.1916.114m)作為開發和測試環境，與其他瀏覽器相比，Chrome打開速度快，用户體驗好。服務器端安裝(版本0.10.26)及的包管理器NPM(版本1.4.3)。在Windows系統中安裝非常簡單，訪問http：//下載安裝包後點擊Next就可以自動完成安裝，通過這種方式還自動安裝了的包管理器NPM。另外，在命令提示符中輸入node，即可測試是否安裝成功。

3 構建實時數據監測系統

3.1 系統結構

實時Web數據監測系統由服務器端和客户端2部分構成，其系統結構如圖2所示。服務器端主要採集和推送數據，客户端主要實現動態數據接收控制和顯示等功能。

3.2 系統流程圖

基於WebSocket實時數據監測系統的流程圖如圖3所示。從圖3可看出，WebSocket服務器主要功能通過WebSocket接口來響應客户端事件，客户端通過WebSocket對象監聽事件，通過觸發OnMessage接收數據並動態顯示數據。

3.3 基於的WebSocket服務器端實現-WebSocket是專門為WebSocket服務器開發的模塊，通過直接調用-Web-Socket模塊封裝的方法可輕鬆構建屬於自己的Web-Socket服務器。-WebSocket模塊的使用及通過模塊中的相關函數構建WebSocket服務器過程為：

1)在中通過NPM 包管理器執行程序

“NPM install -WebSocket”安裝-Web-Socket模塊。

2)通過提供的require函數調用-WebSocket模塊，並運用其中的createServer()創建服務器對象，開始監聽客户端請求，客户端發出請求後，WebSocket服務器端和客户端開始建立連接。

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

//調用-WebSocket模塊

var server= teServer(function(conn){

｝)en(8001);

上述代碼創建WebSocket服務器對象並監聽8001端口。

3)註冊事件併為事件指定響應的函數。本代碼註冊了text、error、close三個事件：

a)text，當服務器接收到客户端字符串時觸發;

b)error，連接過程中發生錯誤時觸發;

c)close，當WebSocket連接關閉時觸發。

WebSocket服務器接收到客户端字符串時觸發text事件，進而調用相應的函數，將Mysql數據庫中實時數據發送給客户端。例如：

("text"，function(str){(" 收到的信息為：" +str)

sendmess()//發送實時數據到客户端｝)

("close"，function(code，reason){

console._浹鉥K]log(" 關閉連接" )｝)

("error"，function(code，reason){

(" 異常關閉" )｝)

WebSocket服務器編寫完畢後保存文檔為，打開終端，進入所在的目錄，執行node 命令即可運行WebSocket服務器。

3.4 WebSocket客户端與Echarts實時數據顯示WebSocket客户端只需要綁定相應地址和端口並與服務器建立連接，可接收服務器推送的數據，因此，WebSocket的客户端很容易使用。具體步驟為：

1)創建連接。首先需要新建一個WebSocket對象，並傳入相應的URL，WebSocket創建完成後，頁面可連接服務器。

var ws=new WebSocket('ws：//：8001')

上述代碼創建了WebSocket對象，其中URL由3部分組成，分別為通信標記(ws)、主機IP和端口號。

2)監聽事件。WebSocket對象擁有4個事件：on-Open、onClose、onError和onMessage。

a)onOpen：WebSocket服務器建立完成時觸發;

b)onClose：WebSocket服務器關閉時觸發;

c)onError：WebSocket服務器創建過程中發生錯誤時觸發;

d)onMessage：客户端收到服務器端數據時觸發。

WebSocket服務器發送數據給客户端時觸發on-Message事件，通過onMessage事件將實時數據傳入Echarts圖表的動態接口。例如：

en=function(e){(" 連接服務器成功" )

("game1");｝

ose=function(e){(" 服務器關閉" );｝

ror=function(e){(" 連接出錯" );｝

ssage=function(e){data2=;｝

3)數據顯示。Echarts擁有動態數據接口，將數據庫動態數據傳入動態數據接口就可展示實時數據，例如：

ata([//動態數據接口addData

[0//系列索引

data2，

//新增數據，data2為服務器發送給客户端實時

//數據

False//新增數據是否從隊列頭部插入

false//是否增加隊列長度

4)主動關閉連接。若客户端認為通信已結束，可調用disconnect()函數關閉連接：onnect()。圖4為採用該實時數據監測系統開發的實時温度數據顯示圖。其中，X 軸為動態並持續更新最新時間，Y 軸為對應時間的温度值。由此可對温度數據進行實時監測。

4 輪詢與WebSocket服務器推送方式的測試

4.1 網絡延時

圖5為Ajax長輪詢與WebSocket服務器推送方式的網絡延時對比。從圖5可看出，Ajax輪詢方式下客户端與服務器之間的平均延時為50ms，為了保持連接，服務器與客户端需不斷進行請求和響應的操作，從而造成多次延時，並且延時中服務器無法向客户端發送消息，從而造成資源浪費。WebSocket模式下，服務器和客户端只在第一次握手連接時會造成延時，握手連接成功後客户端無需向服務器發送請求，服務器主動發送消息到客户端，從而減少了網絡延時，提高了系統的實時性。

4.2 網絡吞吐量

本次實驗中，Ajax長輪詢的請求和響應的報頭大小為734Byte，不包含任何數據。採用WebSocket技術，消息為一個數據幀，開銷為2Byte。3種情景下連接數增加時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數據監測系統，能將數據(如温度、濕度、電壓、電流等)實時發送到客户端，客户端通過Echarts對數據進行直觀顯示。與傳統實時Web技術Ajax輪詢對比測試結果表明，HTML5能大大減小網絡延時和吞吐量。隨着HTML5協議的完善，基於HTML5的實時方案將會被大量應用。