基于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是否安裝成功。