基于HTML5的實(shí)時(shí)Web數(shù)據(jù)監(jiān)測系統(tǒng)的設(shè)計(jì)與研究論文

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

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

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

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

　　2)長輪詢技術(shù)。客戶端向服務(wù)器發(fā)送請求后，在一段時(shí)間內(nèi)服務(wù)器會保持打開狀態(tài)，在此期間，如果服務(wù)器收到發(fā)送消息通知，會發(fā)送數(shù)據(jù)到客戶端，客戶端接收到數(shù)據(jù)時(shí)重新發(fā)送請求信息。然而，當(dāng)數(shù)據(jù)量較大時(shí)，長輪詢對于傳統(tǒng)輪詢方式并無性能改善。從以上分析可知，傳統(tǒng)實(shí)時(shí)Web存在的缺陷是服務(wù)器端和客戶端缺少全雙工、穩(wěn)定的長連接。

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

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

　　WebSocket協(xié)議和WebSocket API分別為Web-Socket的理論和實(shí)踐部分。WebSocket協(xié)議由握手和數(shù)據(jù)傳輸2個階段構(gòu)成。TCP建立連接后首先要進(jìn)行WebSocket層的握手操作，這個階段非常簡單，客戶端給服務(wù)器發(fā)送HTTP請求，服務(wù)器響應(yīng)客戶端請求。

　　這個階段的數(shù)據(jù)傳輸都基于文本，與現(xiàn)有的HTTP1.1相兼容。握手成功后進(jìn)入數(shù)據(jù)傳輸階段，這個階段脫離了HTTP協(xié)議。WebSocket API由W3C制定，在WebSocket API中客戶端和服務(wù)器端只需一個交互信息，客戶端和服務(wù)器端就建立了一條全雙工的信息傳輸通道，可直接相互傳輸數(shù)據(jù)，類似于TCP/IP。這種技術(shù)不僅為實(shí)時(shí)Web應(yīng)用節(jié)省了大量的服務(wù)器帶寬和資源，而且能滿足實(shí)時(shí)性的需求。

　　2.2 WebSocket服務(wù)器

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

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

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

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

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

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

　　1)Node.js采用V8引擎，大大提升了JavaScript代碼的運(yùn)行速度。

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

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

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

　　如今，實(shí)時(shí)Web應(yīng)用的開發(fā)者越來越注重用戶的體驗(yàn)度，將繁雜的數(shù)據(jù)進(jìn)行可視化可向用戶更加簡單、直觀地展示數(shù)據(jù)的變化，減少用戶整理和思考的時(shí)間。目前，互聯(lián)網(wǎng)上的數(shù)據(jù)可視化工具有很多，例如Spss、Matlab、Excel、Tableau Desktop、Echarts等。其中，Spss更加注重統(tǒng)計(jì)分析，但圖表與其他軟件的兼容性較差;Matlab需要很強(qiáng)的編程能力，更偏向于科學(xué)方面的可視化處理;Excel輸出圖表無交互性，不能進(jìn)行動態(tài)數(shù)據(jù)的可視化處理;Tableau Desktop需要收取較高的費(fèi)用。

　　HTML5中的Canvas元素提供了可進(jìn)行繪圖的`平臺，采用JavaScript語言對其操作可繪制理想的圖形，通過Canvas元素可對系統(tǒng)的實(shí)時(shí)數(shù)據(jù)進(jìn)行可視化處理。Echarts(Enterprise Charts商業(yè)產(chǎn)品圖表庫)是基于Canvas使用JavaScript語言編寫的可視化圖表庫，而且擁有動態(tài)數(shù)據(jù)接口。通過Echarts的動態(tài)數(shù)據(jù)接口，可對系統(tǒng)的實(shí)時(shí)數(shù)據(jù)進(jìn)行可視化處理。

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

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