成人免费看黄网站无遮挡,caowo999,se94se欧美综合色,a级精品九九九大片免费看,欧美首页,波多野结衣一二三级,日韩亚洲欧美综合

基于HTML5的實(shí)時(shí)Web數據監測系統的設計與研究論文

時(shí)間:2022-08-30 13:16:32 論文 我要投稿
  • 相關(guān)推薦

基于HTML5的實(shí)時(shí)Web數據監測系統的設計與研究論文

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

基于HTML5的實(shí)時(shí)Web數據監測系統的設計與研究論文

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

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

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

  2)長(cháng)輪詢(xún)技術(shù)?蛻(hù)端向服務(wù)器發(fā)送請求后,在一段時(shí)間內服務(wù)器會(huì )保持打開(kāi)狀態(tài),在此期間,如果服務(wù)器收到發(fā)送消息通知,會(huì )發(fā)送數據到客戶(hù)端,客戶(hù)端接收到數據時(shí)重新發(fā)送請求信息。然而,當數據量較大時(shí),長(cháng)輪詢(xún)對于傳統輪詢(xún)方式并無(wú)性能改善。從以上分析可知,傳統實(shí)時(shí)Web存在的缺陷是服務(wù)器端和客戶(hù)端缺少全雙工、穩定的長(chá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超文本應用技術(shù)工作組)共同開(kāi)發(fā)的一個(gè)全新版本的HTML。WebSocket作為HTML5的一種新的協(xié)議,它提供了一種全新的服務(wù)器-客戶(hù)端的異步通信方法,彌補了傳統實(shí)時(shí)Web的缺陷,成為未來(lái)實(shí)時(shí)Web應用的首選方案。

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

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

  2.2 WebSocket服務(wù)器

  WebSocket協(xié)議基于B/S架構,因此要實(shí)現Web-Socket協(xié)議,必須要有WebSocket服務(wù)器。目前Web-Socket服務(wù)器的開(kāi)源實(shí)現有很多,例如:

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

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

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

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

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

  1)Node.js采用V8引擎,大大提升了JavaScript代碼的運行速度。

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

  3)Node.js充分考慮了數據的實(shí)時(shí)性,是一個(gè)為實(shí)時(shí)Web而誕生的平臺。通過(guò)Node.js與WebSocket的合作,可開(kāi)發(fā)實(shí)時(shí)性要求較高的Web應用。

  2.3 客戶(hù)端圖形實(shí)時(shí)呈現

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

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

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

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

  3 構建實(shí)時(shí)數據監測系統

  3.1 系統結構

  實(shí)時(shí)Web數據監測系統由服務(wù)器端和客戶(hù)端2部分構成,其系統結構如圖2所示。服務(wù)器端主要采集和推送數據,客戶(hù)端主要實(shí)現動(dòng)態(tài)數據接收控制和顯示等功能。

  3.2 系統流程圖

  基于WebSocket實(shí)時(shí)數據監測系統的流程圖如圖3所示。從圖3可看出,WebSocket服務(wù)器主要功能通過(guò)WebSocket接口來(lái)響應客戶(hù)端事件,客戶(hù)端通過(guò)WebSocket對象監聽(tīng)事件,通過(guò)觸發(fā)OnMessage接收數據并動(dòng)態(tài)顯示數據。

  3.3 基于Node.js的WebSocket服務(wù)器端實(shí)現Node.js-WebSocket是專(zhuān)門(mén)為WebSocket服務(wù)器開(kāi)發(fā)的Node.js模塊,通過(guò)直接調用Node.js-Web-Socket模塊封裝的方法可輕松構建屬于自己的Web-Socket服務(wù)器。Node.js-WebSocket模塊的使用及通過(guò)模塊中的相關(guān)函數構建WebSocket服務(wù)器過(guò)程為:

  1)在Node.js中通過(guò)NPM 包管理器執行程序

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

  2)通過(guò)Node.js提供的require函數調用Node.js-WebSocket模塊,并運用其中的createServer()創(chuàng )建服務(wù)器對象,開(kāi)始監聽(tīng)客戶(hù)端請求,客戶(hù)端發(fā)出請求后,WebSocket服務(wù)器端和客戶(hù)端開(kāi)始建立連接。

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

  //調用Node.js-WebSocket模塊

  var server= ws.createServer(function(conn){

 。).listen(8001);

  上述代碼創(chuàng )建WebSocket服務(wù)器對象并監聽(tīng)8001端口。

  3)注冊事件并為事件指定響應的函數。本代碼注冊了text、error、close三個(gè)事件:

  a)text,當服務(wù)器接收到客戶(hù)端字符串時(shí)觸發(fā);

  b)error,連接過(guò)程中發(fā)生錯誤時(shí)觸發(fā);

  c)close,當WebSocket連接關(guān)閉時(shí)觸發(fā)。

  WebSocket服務(wù)器接收到客戶(hù)端字符串時(shí)觸發(fā)text事件,進(jìn)而調用相應的函數,將Mysql數據庫中實(shí)時(shí)數據發(fā)送給客戶(hù)端。例如:

  conn.on("text",function(str){console.log(" 收到的信息為:" +str)

  sendmess()//發(fā)送實(shí)時(shí)數據到客戶(hù)端})

  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所在的目錄,執行node WebSocket.js命令即可運行WebSocket服務(wù)器。

  3.4 WebSocket客戶(hù)端與Echarts實(shí)時(shí)數據顯示W(wǎng)ebSocket客戶(hù)端只需要綁定相應地址和端口并與服務(wù)器建立連接,可接收服務(wù)器推送的數據,因此,WebSocket的客戶(hù)端很容易使用。具體步驟為:

  1)創(chuàng )建連接。首先需要新建一個(gè)WebSocket對象,并傳入相應的URL,WebSocket創(chuàng )建完成后,頁(yè)面可連接服務(wù)器。

  var ws=new WebSocket('ws://192.168.17.80:8001')

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

  2)監聽(tīng)事件。WebSocket對象擁有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ā)生錯誤時(shí)觸發(fā);

  d)onMessage:客戶(hù)端收到服務(wù)器端數據時(shí)觸發(fā)。

  WebSocket服務(wù)器發(fā)送數據給客戶(hù)端時(shí)觸發(fā)on-Message事件,通過(guò)onMessage事件將實(shí)時(shí)數據傳入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(" 連接出錯" );}

  ws.onmessage=function(e){data2=e.data;}

  3)數據顯示。Echarts擁有動(dòng)態(tài)數據接口,將數據庫動(dòng)態(tài)數據傳入動(dòng)態(tài)數據接口就可展示實(shí)時(shí)數據,例如:

  myChart.addData([//動(dòng)態(tài)數據接口addData

  [0//系列索引

  data2,

  //新增數據,data2為服務(wù)器發(fā)送給客戶(hù)端實(shí)時(shí)

  //數據

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

  false//是否增加隊列長(cháng)度

  4)主動(dòng)關(guān)閉連接。若客戶(hù)端認為通信已結束,可調用disconnect()函數關(guān)閉連接:ws.disconnect()。圖4為采用該實(shí)時(shí)數據監測系統開(kāi)發(fā)的實(shí)時(shí)溫度數據顯示圖。其中,X 軸為動(dòng)態(tài)并持續更新最新時(shí)間,Y 軸為對應時(shí)間的溫度值。由此可對溫度數據進(jìn)行實(shí)時(shí)監測。

  4 輪詢(xún)與WebSocket服務(wù)器推送方式的測試

  4.1 網(wǎng)絡(luò )延時(shí)

  圖5為Ajax長(cháng)輪詢(xún)與WebSocket服務(wù)器推送方式的網(wǎng)絡(luò )延時(shí)對比。從圖5可看出,Ajax輪詢(xún)方式下客戶(hù)端與服務(wù)器之間的平均延時(shí)為50ms,為了保持連接,服務(wù)器與客戶(hù)端需不斷進(jìn)行請求和響應的操作,從而造成多次延時(shí),并且延時(shí)中服務(wù)器無(wú)法向客戶(hù)端發(fā)送消息,從而造成資源浪費。WebSocket模式下,服務(wù)器和客戶(hù)端只在第一次握手連接時(shí)會(huì )造成延時(shí),握手連接成功后客戶(hù)端無(wú)需向服務(wù)器發(fā)送請求,服務(wù)器主動(dòng)發(fā)送消息到客戶(hù)端,從而減少了網(wǎng)絡(luò )延時(shí),提高了系統的實(shí)時(shí)性。

  4.2 網(wǎng)絡(luò )吞吐量

  本次實(shí)驗中,Ajax長(cháng)輪詢(xún)的請求和響應的報頭大小為734Byte,不包含任何數據。采用WebSocket技術(shù),消息為一個(gè)數據幀,開(kāi)銷(xiāo)為2Byte。3種情景下連接數增加時(shí)Ajax長(cháng)輪詢(xún)和采用WebSocket技術(shù)的網(wǎng)絡(luò )吞吐量對比情況如圖6所示,其中1000個(gè)用戶(hù)Ajax長(cháng)輪詢(xún)和Websocket的網(wǎng)絡(luò )吞吐量分別為5.6、0.015Mbit/s,10 000個(gè)用戶(hù)Ajax長(cháng)輪詢(xún)和Websocket的網(wǎng)絡(luò )吞吐量分別為56、0.15Mbit/s,100 000個(gè)用戶(hù)Ajax長(cháng)輪詢(xún)和Websocket_K]P_浹的網(wǎng)絡(luò )吞吐量分別為560、1.526Mbit/s?梢(jiàn),隨著(zhù)用戶(hù)的增加,WebSocket的吞吐量明顯低于A(yíng)jax長(cháng)輪詢(xún)。

  5 結束語(yǔ)

  構建了基于HTML5的實(shí)時(shí)Web數據監測系統,能將數據(如溫度、濕度、電壓、電流等)實(shí)時(shí)發(fā)送到客戶(hù)端,客戶(hù)端通過(guò)Echarts對數據進(jìn)行直觀(guān)顯示。與傳統實(shí)時(shí)Web技術(shù)Ajax輪詢(xún)對比測試結果表明,HTML5能大大減小網(wǎng)絡(luò )延時(shí)和吞吐量。隨著(zhù)HTML5協(xié)議的完善,基于HTML5的實(shí)時(shí)方案將會(huì )被大量應用。

【基于HTML5的實(shí)時(shí)Web數據監測系統的設計與研究論文】相關(guān)文章:

FPGA數據采集與回放系統設計論文04-24

基于系統設計的科研管理論文09-22

數據庫與課程設計結合教學(xué)模式研究論文06-23

基于CDI0理念下的《網(wǎng)頁(yè)設計》教學(xué)思考與研究的論文07-12

基于課堂的教師行動(dòng)研究的論文06-07

基于冗余PLC的井下排水自動(dòng)控制系統的設計的論文02-22

基于DSP整流器設計論文04-18

在線(xiàn)監測系統方案03-31

簡(jiǎn)議基于項目化教學(xué)的《機械設計基礎》與《課程設計》整合實(shí)踐研究論文07-12

基于SCOSM自適應教學(xué)模型設計論文07-12