基於HTML5的實時Web資料監測系統的設計與研究論文
基於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)Node.js(JavaScript實現的WebSocket伺服器);
4)mod_pywebsocket(Python實現的WebSocket伺服器);
Node.js是由Ryan Dahl發起的開源專案，現由Joyent公司管理維護。Node.js是可以讓JavaScript在伺服器端執行的平臺，它可以讓JavaScript既可在瀏覽器端又可在伺服器環境下執行。Node.js與其他伺服器語言相比優勢有以下幾點：
1)Node.js採用V8引擎，大大提升了JavaScript程式碼的執行速度。
2)Node.js摒棄了傳統平臺採用多執行緒實現高併發的方法，採用了單執行緒、非同步式I/O、事件驅動的方式，不僅擺脫了多執行緒所帶來的困擾，也使效能得到了巨大的提升，提高了開發效率。
3)Node.js充分考慮了資料的實時性，是一個為實時Web而誕生的平臺。透過Node.js與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開啟速度快，使用者體驗好。伺服器端安裝Node.js(版本0.10.26)及Node.js的包管理器NPM(版本1.4.3)。在Windows系統中安裝Node.js非常簡單，訪問http：//nodejs.org下載安裝包後點擊Next就可以自動完成安裝，透過這種方式還自動安裝了Node.js的包管理器NPM。另外，在命令提示符中輸入node，即可測試Node.js是否安裝成功。
3 構建實時資料監測系統
3.1 系統結構
實時Web資料監測系統由伺服器端和客戶端2部分構成，其系統結構如圖2所示。伺服器端主要採集和推送資料，客戶端主要實現動態資料接收控制和顯示等功能。
3.2 系統流程圖
基於WebSocket實時資料監測系統的流程圖如圖3所示。從圖3可看出，WebSocket伺服器主要功能透過WebSocket介面來響應客戶端事件，客戶端透過WebSocket物件監聽事件，透過觸發OnMessage接收資料並動態顯示資料。
3.3 基於Node.js的WebSocket伺服器端實現Node.js-WebSocket是專門為WebSocket伺服器開發的Node.js模組，透過直接呼叫Node.js-Web-Socket模組封裝的方法可輕鬆構建屬於自己的`Web-Socket伺服器。Node.js-WebSocket模組的使用及透過模組中的相關函式構建WebSocket伺服器過程為：
1)在Node.js中透過NPM 包管理器執行程式
“NPM install Node.js-WebSocket”安裝Node.js-Web-Socket模組。
2)透過Node.js提供的require函式呼叫Node.js-WebSocket模組，並運用其中的createServer()建立伺服器物件，開始監聽客戶端請求，客戶端發出請求後，WebSocket伺服器端和客戶端開始建立連線。
var ws=require("nodejs-websocket");
//呼叫Node.js-WebSocket模組
var server= ws.createServer(function(conn){
｝).listen(8001);
上述程式碼建立WebSocket伺服器物件並監聽8001埠。
3)註冊事件併為事件指定響應的函式。本程式碼註冊了text、error、close三個事件：
a)text，當伺服器接收到客戶端字串時觸發;
b)error，連線過程中發生錯誤時觸發;
c)close，當WebSocket連線關閉時觸發。
WebSocket伺服器接收到客戶端字串時觸發text事件，進而呼叫相應的函式，將Mysql資料庫中實時資料傳送給客戶端。例如：
conn.on("text"，function(str){console.log(" 收到的資訊為：" +str)
sendmess()//傳送實時資料到客戶端｝)
conn.on("close"，function(code，reason){
console._浹鉥K]log(" 關閉連線" )｝)
conn.on("error"，function(code，reason){
console.log(" 異常關閉" )｝)
WebSocket伺服器編寫完畢後儲存文件為Web-Socket.js，開啟終端，進入WebSocket.js所在的目錄，執行node WebSocket.js命令即可執行WebSocket伺服器。
3.4 WebSocket客戶端與Echarts實時資料顯示WebSocket客戶端只需要繫結相應地址和埠並與伺服器建立連線，可接收伺服器推送的資料，因此，WebSocket的客戶端很容易使用。具體步驟為：
1)建立連線。首先需要新建一個WebSocket物件，並傳入相應的URL，WebSocket建立完成後，頁面可連線伺服器。
var ws=new WebSocket('ws：//192.168.17.80：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圖表的動態介面。例如：
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)資料顯示。Echarts擁有動態資料介面，將資料庫動態資料傳入動態資料介面就可展示實時資料，例如：
myChart.addData([//動態資料介面addData
[0//系列索引
data2，
//新增資料，data2為伺服器傳送給客戶端實時
//資料
False//新增資料是否從佇列頭部插入
false//是否增加佇列長度
4)主動關閉連線。若客戶端認為通訊已結束，可呼叫disconnect()函式關閉連線：ws.disconnect()。圖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的實時方案將會被大量應用。