- 相關(guān)推薦
基于HTML5的實(shí)時(shí)Web數(shù)據(jù)監(jiān)測(cè)系統(tǒng)的設(shè)計(jì)與研究論文
隨著人們對(duì)信息實(shí)時(shí)性需求的不斷提高，實(shí)時(shí)Web技術(shù)越來(lái)越受到人們的重視。例如，實(shí)時(shí)在線版網(wǎng)絡(luò)游戲、在線購(gòu)票系統(tǒng)等都是實(shí)時(shí)Web的典型代表。有國(guó)外媒體稱“實(shí)時(shí)Web的時(shí)代即將到來(lái)，實(shí)時(shí)Web不僅僅是一種時(shí)尚也是一種技術(shù)趨勢(shì)”�？蛻舳藬�(shù)據(jù)的實(shí)時(shí)性要求服務(wù)器能主動(dòng)向客戶端實(shí)時(shí)發(fā)送數(shù)據(jù)，將最新的消息通知用戶。傳統(tǒng)的Web應(yīng)用中，服務(wù)器都是響應(yīng)瀏覽器請(qǐng)求發(fā)送數(shù)據(jù)給客戶端，而客戶端并不知道服務(wù)器數(shù)據(jù)何時(shí)變化，因此，無(wú)法做到真正的實(shí)時(shí)性。隨著HTML5技術(shù)的發(fā)展，通過(guò)HTML5的WebSocket技術(shù)和Canvas可實(shí)現(xiàn)真正實(shí)時(shí)Web的需求。為此，構(gòu)建基于HTML5的實(shí)時(shí)Web數(shù)據(jù)監(jiān)測(cè)系統(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ā)送請(qǐng)求到服務(wù)器端，服務(wù)器端接收并處理客戶端請(qǐng)求后返回結(jié)果給客戶端，然后斷開(kāi)連接。由于HTTP協(xié)議是無(wú)狀態(tài)協(xié)議，對(duì)于實(shí)時(shí)性要求比較高的Web應(yīng)用，當(dāng)客戶端準(zhǔn)備呈現(xiàn)服務(wù)器端的響應(yīng)數(shù)據(jù)時(shí)數(shù)據(jù)可能已經(jīng)過(guò)時(shí)，如果用戶想要獲得實(shí)時(shí)性信息需要不停地刷新頁(yè)面，這顯然是不明智的。目前，實(shí)時(shí)Web的實(shí)現(xiàn)形式主要是輪詢和其他服務(wù)器推送，最常用的主要是輪詢和長(zhǎng)輪詢技術(shù)。
1)輪詢技術(shù)�？蛻舳艘怨潭l率向服務(wù)器發(fā)送HTTP請(qǐng)求，通過(guò)服務(wù)器端響應(yīng)請(qǐng)求實(shí)現(xiàn)實(shí)時(shí)性。顯然，消息傳遞之間如果有準(zhǔn)確的時(shí)間間隔，輪詢是一個(gè)很好的方法，但是通常實(shí)時(shí)數(shù)據(jù)之間的時(shí)間間隔是不可預(yù)知的，實(shí)時(shí)數(shù)據(jù)何時(shí)發(fā)生改變無(wú)法預(yù)測(cè)，若頻率過(guò)高會(huì)加重服務(wù)器負(fù)載和網(wǎng)絡(luò)負(fù)擔(dān)，頻率過(guò)低會(huì)丟失重要數(shù)據(jù)，并且每次連接需要發(fā)送HTTP報(bào)頭而產(chǎn)生網(wǎng)絡(luò)噪聲。因此，輪詢技術(shù)是一種很低效的實(shí)時(shí)通信方案。
2)長(zhǎng)輪詢技術(shù)�？蛻舳讼蚍⻊�(wù)器發(fā)送請(qǐng)求后，在一段時(shí)間內(nèi)服務(wù)器會(huì)保持打開(kāi)狀態(tài)，在此期間，如果服務(wù)器收到發(fā)送消息通知，會(huì)發(fā)送數(shù)據(jù)到客戶端，客戶端接收到數(shù)據(jù)時(shí)重新發(fā)送請(qǐng)求信息。然而，當(dāng)數(shù)據(jù)量較大時(shí)，長(zhǎng)輪詢對(duì)于傳統(tǒng)輪詢方式并無(wú)性能改善。從以上分析可知，傳統(tǒng)實(shí)時(shí)Web存在的缺陷是服務(wù)器端和客戶端缺少全雙工、穩(wěn)定的長(zhǎng)連接。
2 相關(guān)技術(shù)與開(kāi)發(fā)環(huán)境
2.1 WebSocket技術(shù)HTML5為繼HTML4.01后由W3C(萬(wàn)維網(wǎng)聯(lián)盟)和WHATWG(Web超文本應(yīng)用技術(shù)工作組)共同開(kāi)發(fā)的一個(gè)全新版本的HTML。WebSocket作為HTML5的一種新的協(xié)議，它提供了一種全新的服務(wù)器-客戶端的異步通信方法，彌補(bǔ)了傳統(tǒng)實(shí)時(shí)Web的缺陷，成為未來(lái)實(shí)時(shí)Web應(yīng)用的首選方案。
WebSocket協(xié)議和WebSocket API分別為Web-Socket的理論和實(shí)踐部分。WebSocket協(xié)議由握手和數(shù)據(jù)傳輸2個(gè)階段構(gòu)成。TCP建立連接后首先要進(jìn)行WebSocket層的握手操作，這個(gè)階段非常簡(jiǎn)單，客戶端給服務(wù)器發(fā)送HTTP請(qǐng)求，服務(wù)器響應(yīng)客戶端請(qǐng)求。
這個(gè)階段的數(shù)據(jù)傳輸都基于文本，與現(xiàn)有的HTTP1.1相兼容。握手成功后進(jìn)入數(shù)據(jù)傳輸階段，這個(gè)階段脫離了HTTP協(xié)議。WebSocket API由W3C制定，在WebSocket API中客戶端和服務(wù)器端只需一個(gè)交互信息，客戶端和服務(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ù)器的開(kāi)源實(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ā)起的開(kāi)源項(xiàng)目，現(xiàn)由Joyent公司管理維護(hù)。Node.js是可以讓JavaScript在服務(wù)器端運(yùn)行的平臺(tái)，它可以讓JavaScript既可在瀏覽器端又可在服務(wù)器環(huán)境下運(yùn)行。Node.js與其他服務(wù)器語(yǔ)言相比優(yōu)勢(shì)有以下幾點(diǎn)：
1)Node.js采用V8引擎，大大提升了JavaScript代碼的運(yùn)行速度。
2)Node.js摒棄了傳統(tǒng)平臺(tái)采用多線程實(shí)現(xiàn)高并發(fā)的方法，采用了單線程、異步式I/O、事件驅(qū)動(dòng)的方式，不僅擺脫了多線程所帶來(lái)的困擾，也使性能得到了巨大的提升，提高了開(kāi)發(fā)效率。
3)Node.js充分考慮了數(shù)據(jù)的實(shí)時(shí)性，是一個(gè)為實(shí)時(shí)Web而誕生的平臺(tái)。通過(guò)Node.js與WebSocket的合作，可開(kāi)發(fā)實(shí)時(shí)性要求較高的Web應(yīng)用。
2.3 客戶端圖形實(shí)時(shí)呈現(xiàn)
如今，實(shí)時(shí)Web應(yīng)用的開(kāi)發(fā)者越來(lái)越注重用戶的體驗(yàn)度，將繁雜的數(shù)據(jù)進(jìn)行可視化可向用戶更加簡(jiǎ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輸出圖表無(wú)交互性，不能進(jìn)行動(dòng)態(tài)數(shù)據(jù)的可視化處理;Tableau Desktop需要收取較高的費(fèi)用。
HTML5中的Canvas元素提供了可進(jìn)行繪圖的平臺(tái)，采用JavaScript語(yǔ)言對(duì)其操作可繪制理想的圖形，通過(guò)Canvas元素可對(duì)系統(tǒng)的實(shí)時(shí)數(shù)據(jù)進(jìn)行可視化處理。Echarts(Enterprise Charts商業(yè)產(chǎn)品圖表庫(kù))是基于Canvas使用JavaScript語(yǔ)言編寫(xiě)的可視化圖表庫(kù)，而且擁有動(dòng)態(tài)數(shù)據(jù)接口。通過(guò)Echarts的動(dòng)態(tài)數(shù)據(jù)接口，可對(duì)系統(tǒng)的實(shí)時(shí)數(shù)據(jù)進(jìn)行可視化處理。
2.4 開(kāi)發(fā)工具及開(kāi)發(fā)環(huán)境
Web程序主要是在瀏覽器上觀看運(yùn)行效果，在后端服務(wù)器和瀏覽器中完成調(diào)試和運(yùn)行Web程序，選用Editplus作為編輯器，可在編碼過(guò)程中對(duì)代碼進(jìn)行高亮顯示，提高編程效率。目前瀏覽器對(duì)HTML5的支持程度良莠不齊，系統(tǒng)選用Google Chrome瀏覽器(版本35.0.1916.114m)作為開(kāi)發(fā)和測(cè)試環(huán)境，與其他瀏覽器相比，Chrome打開(kāi)速度快，用戶體驗(yàn)好。服務(wù)器端安裝Node.js(版本0.10.26)及Node.js的包管理器NPM(版本1.4.3)。在Windows系統(tǒng)中安裝Node.js非常簡(jiǎn)單，訪問(wèn)http：//nodejs.org下載安裝包后點(diǎn)擊Next就可以自動(dòng)完成安裝，通過(guò)這種方式還自動(dòng)安裝了Node.js的包管理器NPM。另外，在命令提示符中輸入node，即可測(cè)試Node.js是否安裝成功。
3 構(gòu)建實(shí)時(shí)數(shù)據(jù)監(jiān)測(cè)系統(tǒng)
3.1 系統(tǒng)結(jié)構(gòu)
實(shí)時(shí)Web數(shù)據(jù)監(jiān)測(cè)系統(tǒng)由服務(wù)器端和客戶端2部分構(gòu)成，其系統(tǒng)結(jié)構(gòu)如圖2所示。服務(wù)器端主要采集和推送數(shù)據(jù)，客戶端主要實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)接收控制和顯示等功能。
3.2 系統(tǒng)流程圖
基于WebSocket實(shí)時(shí)數(shù)據(jù)監(jiān)測(cè)系統(tǒng)的流程圖如圖3所示。從圖3可看出，WebSocket服務(wù)器主要功能通過(guò)WebSocket接口來(lái)響應(yīng)客戶端事件，客戶端通過(guò)WebSocket對(duì)象監(jiān)聽(tīng)事件，通過(guò)觸發(fā)OnMessage接收數(shù)據(jù)并動(dòng)態(tài)顯示數(shù)據(jù)。
3.3 基于Node.js的WebSocket服務(wù)器端實(shí)現(xiàn)Node.js-WebSocket是專門(mén)為WebSocket服務(wù)器開(kāi)發(fā)的Node.js模塊，通過(guò)直接調(diào)用Node.js-Web-Socket模塊封裝的方法可輕松構(gòu)建屬于自己的Web-Socket服務(wù)器。Node.js-WebSocket模塊的使用及通過(guò)模塊中的相關(guān)函數(shù)構(gòu)建WebSocket服務(wù)器過(guò)程為：
1)在Node.js中通過(guò)NPM 包管理器執(zhí)行程序
“NPM install Node.js-WebSocket”安裝Node.js-Web-Socket模塊。
2)通過(guò)Node.js提供的require函數(shù)調(diào)用Node.js-WebSocket模塊，并運(yùn)用其中的createServer()創(chuàng)建服務(wù)器對(duì)象，開(kāi)始監(jiān)聽(tīng)客戶端請(qǐng)求，客戶端發(fā)出請(qǐng)求后，WebSocket服務(wù)器端和客戶端開(kāi)始建立連接。
var ws=require("nodejs-websocket");
//調(diào)用Node.js-WebSocket模塊
var server= ws.createServer(function(conn){
�。�).listen(8001);
上述代碼創(chuàng)建WebSocket服務(wù)器對(duì)象并監(jiān)聽(tīng)8001端口。
3)注冊(cè)事件并為事件指定響應(yīng)的函數(shù)。本代碼注冊(cè)了text、error、close三個(gè)事件：
a)text，當(dāng)服務(wù)器接收到客戶端字符串時(shí)觸發(fā);
b)error，連接過(guò)程中發(fā)生錯(cuò)誤時(shí)觸發(fā);
c)close，當(dāng)WebSocket連接關(guān)閉時(shí)觸發(fā)。
WebSocket服務(wù)器接收到客戶端字符串時(shí)觸發(fā)text事件，進(jìn)而調(diào)用相應(yīng)的函數(shù)，將Mysql數(shù)據(jù)庫(kù)中實(shí)時(shí)數(shù)據(jù)發(fā)送給客戶端。例如：
conn.on("text"，function(str){console.log(" 收到的信息為：" +str)
sendmess()//發(fā)送實(shí)時(shí)數(shù)據(jù)到客戶端｝)
conn.on("close"，function(code，reason){
console._浹鉥K]log(" 關(guān)閉連接" )｝)
conn.on("error"，function(code，reason){
console.log(" 異常關(guān)閉" )｝)
WebSocket服務(wù)器編寫(xiě)完畢后保存文檔為Web-Socket.js，打開(kāi)終端，進(jìn)入WebSocket.js所在的目錄，執(zhí)行node WebSocket.js命令即可運(yùn)行WebSocket服務(wù)器。
3.4 WebSocket客戶端與Echarts實(shí)時(shí)數(shù)據(jù)顯示W(wǎng)ebSocket客戶端只需要綁定相應(yīng)地址和端口并與服務(wù)器建立連接，可接收服務(wù)器推送的數(shù)據(jù)，因此，WebSocket的客戶端很容易使用。具體步驟為：
1)創(chuàng)建連接。首先需要新建一個(gè)WebSocket對(duì)象，并傳入相應(yīng)的URL，WebSocket創(chuàng)建完成后，頁(yè)面可連接服務(wù)器。
var ws=new WebSocket('ws：//192.168.17.80：8001')
上述代碼創(chuàng)建了WebSocket對(duì)象，其中URL由3部分組成，分別為通信標(biāo)記(ws)、主機(jī)IP和端口號(hào)。
2)監(jiān)聽(tīng)事件。WebSocket對(duì)象擁有4個(gè)事件：on-Open、onClose、onError和onMessage。
a)onOpen：WebSocket服務(wù)器建立完成時(shí)觸發(fā);
b)onClose：WebSocket服務(wù)器關(guān)閉時(shí)觸發(fā);
c)onError：WebSocket服務(wù)器創(chuàng)建過(guò)程中發(fā)生錯(cuò)誤時(shí)觸發(fā);
d)onMessage：客戶端收到服務(wù)器端數(shù)據(jù)時(shí)觸發(fā)。
WebSocket服務(wù)器發(fā)送數(shù)據(jù)給客戶端時(shí)觸發(fā)on-Message事件，通過(guò)onMessage事件將實(shí)時(shí)數(shù)據(jù)傳入Echarts圖表的動(dòng)態(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(" 連接出錯(cuò)" );｝
ws.onmessage=function(e){data2=e.data;｝
3)數(shù)據(jù)顯示。Echarts擁有動(dòng)態(tài)數(shù)據(jù)接口，將數(shù)據(jù)庫(kù)動(dòng)態(tài)數(shù)據(jù)傳入動(dòng)態(tài)數(shù)據(jù)接口就可展示實(shí)時(shí)數(shù)據(jù)，例如：
myChart.addData([//動(dòng)態(tài)數(shù)據(jù)接口addData
[0//系列索引
data2，
//新增數(shù)據(jù)，data2為服務(wù)器發(fā)送給客戶端實(shí)時(shí)
//數(shù)據(jù)
False//新增數(shù)據(jù)是否從隊(duì)列頭部插入
false//是否增加隊(duì)列長(zhǎng)度
4)主動(dòng)關(guān)閉連接。若客戶端認(rèn)為通信已結(jié)束，可調(diào)用disconnect()函數(shù)關(guān)閉連接：ws.disconnect()。圖4為采用該實(shí)時(shí)數(shù)據(jù)監(jiān)測(cè)系統(tǒng)開(kāi)發(fā)的實(shí)時(shí)溫度數(shù)據(jù)顯示圖。其中，X 軸為動(dòng)態(tài)并持續(xù)更新最新時(shí)間，Y 軸為對(duì)應(yīng)時(shí)間的溫度值。由此可對(duì)溫度數(shù)據(jù)進(jìn)行實(shí)時(shí)監(jiān)測(cè)。
4 輪詢與WebSocket服務(wù)器推送方式的測(cè)試
4.1 網(wǎng)絡(luò)延時(shí)
圖5為Ajax長(zhǎng)輪詢與WebSocket服務(wù)器推送方式的網(wǎng)絡(luò)延時(shí)對(duì)比。從圖5可看出，Ajax輪詢方式下客戶端與服務(wù)器之間的平均延時(shí)為50ms，為了保持連接，服務(wù)器與客戶端需不斷進(jìn)行請(qǐng)求和響應(yīng)的操作，從而造成多次延時(shí)，并且延時(shí)中服務(wù)器無(wú)法向客戶端發(fā)送消息，從而造成資源浪費(fèi)。WebSocket模式下，服務(wù)器和客戶端只在第一次握手連接時(shí)會(huì)造成延時(shí)，握手連接成功后客戶端無(wú)需向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器主動(dòng)發(fā)送消息到客戶端，從而減少了網(wǎng)絡(luò)延時(shí)，提高了系統(tǒng)的實(shí)時(shí)性。
4.2 網(wǎng)絡(luò)吞吐量
本次實(shí)驗(yàn)中，Ajax長(zhǎng)輪詢的請(qǐng)求和響應(yīng)的報(bào)頭大小為734Byte，不包含任何數(shù)據(jù)。采用WebSocket技術(shù)，消息為一個(gè)數(shù)據(jù)幀，開(kāi)銷為2Byte。3種情景下連接數(shù)增加時(shí)Ajax長(zhǎng)輪詢和采用WebSocket技術(shù)的網(wǎng)絡(luò)吞吐量對(duì)比情況如圖6所示，其中1000個(gè)用戶Ajax長(zhǎng)輪詢和Websocket的網(wǎng)絡(luò)吞吐量分別為5.6、0.015Mbit/s，10 000個(gè)用戶Ajax長(zhǎng)輪詢和Websocket的網(wǎng)絡(luò)吞吐量分別為56、0.15Mbit/s，100 000個(gè)用戶Ajax長(zhǎng)輪詢和Websocket_K]P_浹的網(wǎng)絡(luò)吞吐量分別為560、1.526Mbit/s。可見(jiàn)，隨著用戶的增加，WebSocket的吞吐量明顯低于Ajax長(zhǎng)輪詢。
5 結(jié)束語(yǔ)
構(gòu)建了基于HTML5的實(shí)時(shí)Web數(shù)據(jù)監(jiān)測(cè)系統(tǒng)，能將數(shù)據(jù)(如溫度、濕度、電壓、電流等)實(shí)時(shí)發(fā)送到客戶端，客戶端通過(guò)Echarts對(duì)數(shù)據(jù)進(jìn)行直觀顯示。與傳統(tǒng)實(shí)時(shí)Web技術(shù)Ajax輪詢對(duì)比測(cè)試結(jié)果表明，HTML5能大大減小網(wǎng)絡(luò)延時(shí)和吞吐量。隨著HTML5協(xié)議的完善，基于HTML5的實(shí)時(shí)方案將會(huì)被大量應(yīng)用。
【基于HTML5的實(shí)時(shí)Web數(shù)據(jù)監(jiān)測(cè)系統(tǒng)的設(shè)計(jì)與研究論文】相關(guān)文章：
FPGA數(shù)據(jù)采集與回放系統(tǒng)設(shè)計(jì)論文04-24
基于系統(tǒng)設(shè)計(jì)的科研管理論文09-22
數(shù)據(jù)庫(kù)與課程設(shè)計(jì)結(jié)合教學(xué)模式研究論文06-23
基于CDI0理念下的《網(wǎng)頁(yè)設(shè)計(jì)》教學(xué)思考與研究的論文07-12
基于課堂的教師行動(dòng)研究的論文06-07
基于冗余PLC的井下排水自動(dòng)控制系統(tǒng)的設(shè)計(jì)的論文02-22
簡(jiǎn)議基于項(xiàng)目化教學(xué)的《機(jī)械設(shè)計(jì)基礎(chǔ)》與《課程設(shè)計(jì)》整合實(shí)踐研究論文07-12