Web頁面實時刷新技術(shù)探討_第1頁
Web頁面實時刷新技術(shù)探討_第2頁
Web頁面實時刷新技術(shù)探討_第3頁
Web頁面實時刷新技術(shù)探討_第4頁
Web頁面實時刷新技術(shù)探討_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

Web頁面實時刷新技術(shù)探討一、總述隨著網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，使用B/S結(jié)構(gòu)來實現(xiàn)項目應(yīng)用已經(jīng)越來越多，而實時監(jiān)控一直都是多數(shù)行業(yè)軟件所必備的功能，由此使用Web頁面來實現(xiàn)實時監(jiān)控成了一種必然的需求。

二、實時刷新技術(shù)1、傳統(tǒng)的頁面刷新方式傳統(tǒng)的頁面刷新方式很多，常見的有頁面間隔一定的時間自動刷新、ActiveX控件、Applet等。采用頁面間隔一定的時間自動刷新的方式，是在網(wǎng)頁的頭部加入一下代碼：<metahttp-equiv="refresh"content="20;url=newPage">這里是經(jīng)過20秒跳轉(zhuǎn)到一個新頁面，可以將“newPage”設(shè)置為本頁面即為刷新本頁面，刷新間隔時間可以修改“20”為任意時間。通過這種方式如果并發(fā)和訪問量較大,服務(wù)器就有可能承受不了這種壓力，從而造成服務(wù)器死機。使用ActiveX控件的方式需要每個客戶端下載安裝ActiveX控件，并且客戶端瀏覽器只能使用Windows的IE瀏覽器。同樣使用Applet需要客戶端安裝Java運行時。這些傳統(tǒng)的頁面刷新方式都或多或少的存在著一些確定，在Web項目應(yīng)用中的使用也越來越少。

2、Ajax輪詢Ajax輪詢方式是使用客戶端腳本，通過XMLHttpRequest來定時發(fā)送請求，從而查詢頁面數(shù)據(jù)的更新情況。通過這種方式，程序?qū)崿F(xiàn)方便簡捷，但客戶端頻繁的發(fā)送請求會給服務(wù)器帶來很大的壓力和客戶端處理器負(fù)載，如果服務(wù)器端沒有更新時，這種輪詢訪問服務(wù)器便是無意義的，并且耗費了網(wǎng)絡(luò)資源與CPU處理資源。實例說明：服務(wù)器端通過手動控制按鈕產(chǎn)生一張圖片，客戶端顯示最新圖片及圖片的信息內(nèi)容。服務(wù)器端通過一個按鈕btnGet產(chǎn)生圖片，按鈕事件代碼如下所示。代碼清單1：protectedvoidbtnGet_Click(objectsender,EventArgse){//通過改寫一張父圖片上的文字來產(chǎn)生新圖片System.Drawing.Imageimage=System.Drawing.Image.FromFile(HttpContext.Current.Server.MapPath("parent.jpg"));stringcurrTime=System.DateTime.Now.ToString("yyMMddHHmmssffffff");

Graphicsg=Graphics.FromImage(image);g.DrawImage(image,0,0,image.Width,image.Height);g.DrawString(currTime,newFont("Arial",28),newSolidBrush(Color.Red),10,10);g.Dispose();

stringsavePath="Pic/"+currTime+".jpg";image.Save(HttpContext.Current.Server.MapPath(savePath));

//將最新圖片文件名寫入到XML文件中XmlDocumentxmlDoc=newXmlDocument();xmlDoc.Load(HttpContext.Current.Server.MapPath("newPic.xml"));XmlNodeListnodeList=xmlDoc.SelectSingleNode("Items").ChildNodes;

XmlElementelement=(XmlElement)nodeList[0];element.SetAttribute("code",currTime);xmlDoc.Save(HttpContext.Current.Server.MapPath("newPic.xml"));}顯示圖片頁面通過兩個頁面分別顯示圖片信息與圖片內(nèi)容，顯示圖片頁面內(nèi)容如下所示。代碼清單2：<htmlxmlns="/1999/xhtml"><headrunat="server"><title></title><metahttp-equiv="Content-Type"content="text/html;Charset=gb2312"/><scripttype="text/javascript">varxmlHttp;functionCreateXMLHttp(){if(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}elseif(window.ActiveXObject){try{xmlHttp=newActiveXObject("Msxml2.XMLHTTP");}catch(e){try{xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}catch(e){}}}xmlHttp=newActiveXObject("Msxml2.XMLHTTP.5.0");}

functionstartXMLHttp(){CreateXMLHttp();xmlHttp.onreadystatechange=retDeal;xmlHttp.open("post","imgInfo.aspx",true);xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencodedcharset=gb2312");xmlHttp.send();}functionretDeal(){if(xmlHttp.readystate==4){if(xmlHttp.status==200){hid1.value=xmlHttp.responseText;if(hid1.value!=hid2.value){hid2.value=hid1.value;ifrImg.location.reload();document.getElementById("Content").innerHTML=hid1.value;}}setTimeout(startXMLHttp,2000);}}</script></head><bodyonload='Javascript:startXMLHttp()'><div></div><spanid="Content"></span><inputtype="hidden"id="hid1"/><inputtype="hidden"id="hid2"/><iframeid="ifrImg"src="img.aspx"width="800"height="500"></iframe></body></html>

3、DWR服務(wù)器PushDWR的反轉(zhuǎn)AJAX功能允許我們從服務(wù)器端來控制客服端，而不需要客戶端的請求，服務(wù)器可以自動把消息發(fā)給指定的客戶端。DWR的Push技術(shù)是讓服務(wù)器每次發(fā)送廣播時，把這個廣播推送給客戶端，而不用客戶端去刷新，DWR的推送是基于長連接的，性能優(yōu)越。以服務(wù)器端通過手動控制按鈕產(chǎn)生一張圖片，客戶端顯示最新圖片及圖片的信息內(nèi)容作為實例加以說明。服務(wù)器端通過一個按鈕產(chǎn)生圖片，頁面代碼如下所示。代碼清單3：<%@pagelanguage="java"pageEncoding="UTF-8"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1"><title></title><scripttype='text/javascript'src='<%=request.getContextPath()%>/dwr/interface/getPic.js'></script><scripttype='text/javascript'src='<%=request.getContextPath()%>/dwr/engine.js'></script><scripttype='text/javascript'src='<%=request.getContextPath()%>/dwr/util.js'></script><scripttype="text/javascript">Dtotype.format=function(format){varo={"M+":this.getMonth()+1,//month"d+":this.getDate(),//day"h+":this.getHours(),//hour"m+":this.getMinutes(),//minute"s+":this.getSeconds(),//second"q+":Math.floor((this.getMonth()+3)/3),//quarter"S":this.getMilliseconds()//millisecond}if(/(y+)/.test(format))format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4-RegExp.$1.length));for(varkino)if(newRegExp("("+k+")").test(format))format=format.replace(RegExp.$1,RegExp.$1.length==1?o[k]:("00"+o[k]).substr((""+o[k]).length));returnformat;}

functiongetNewPic(){varcurrTime=newDate().format("yyMMddhhmmssS");varcurrPath="D:/Program/Java/JavaSpace/ajaxTest/WebContent/";getPic.createStringMark(currPath+"parent.jpg",currTime,currPath+"Pic/"+currTime+".jpg");getPic.getNewPicId(currTime);}</script></head><body><inputtype="button"value="產(chǎn)生新圖片"onclick="getNewPic();"/></body></html>顯示圖片頁面通過兩個頁面分別顯示圖片信息與圖片內(nèi)容，顯示圖片頁面內(nèi)容如下所示。代碼清單4：<%@pagelanguage="java"pageEncoding="UTF-8"%><jsp:useBeanid="aGetNewPic"scope="page"class="com.getNewPic"/><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1"><title></title><scripttype='text/javascript'src='<%=request.getContextPath()%>/dwr/interface/getPic.js'></script><scripttype='text/javascript'src='<%=request.getContextPath()%>/dwr/engine.js'></script><scripttype='text/javascript'src='<%=request.getContextPath()%>/dwr/util.js'></script><scripttype="text/javascript">functioninit(){dwr.engine.setActiveReverseAjax(true);//激活反轉(zhuǎn)}window.onload=init;//頁面初始化方法functionrefreshImg(){ifrImg.location.reload();}</script></head><body><divstyle="float:left">最新圖片：</div><spanid="divNewPicId"><%=aGetNewPic.currPicId%></span><iframeid="ifrImg"src="img.jsp?id=<%=aGetNewPic.currPicId%>"width="800"height="500"></iframe></body></html>另外，getNewPic類用于產(chǎn)生新圖片、Push處理。代碼清單5：publicclassgetNewPic{ publicstaticStringcurrPicId="100413101427820"; publicStringgetNewPicId(StringpicId,HttpServletRequestrequest){ if(currPicId==picId)returncurrPicId; if(picId!=null)currPicId=picId; //獲得DWR上下文 ServletContextsc=request.getSession().getServletContext(); ServerContextsctx=ServerContextFactory.get(sc); //獲得當(dāng)前瀏覽client.jsp頁面的所有腳本session Collectionsessions=sctx.getScriptSessionsByPage("/ajaxTest/client.jsp"); Utilutil=newUtil(sessions); //處理這些頁面中的一些元素 util.setValue("divNewPicId",currPicId); util.addFunctionCall("refreshImg",null); returncurrPicId; } publicbooleancreateStringMark(StringfilePath,StringmarkContent,StringsavePath) { ImageIconimgIcon=newImageIcon(filePath); ImagetheImg=imgIcon.getImage(); intwidth=theImg.getWidth(null); intheight=theImg.getHeight(null); //System.out.println(theImg); BufferedImagebimage=newBufferedImage(width,height,BufferedImage.TYPE_INT_RGB); Graphics2Dg=bimage.createGraphics(); g.setColor(Color.red); g.setBackground(Color.white); g.drawImage(theImg,0,0,null); g.setFont(newFont("Arial",Font.PLAIN,28));//字體、字型、字號 g.drawString(markContent,10,10);//畫文字 g.dispose(); try { FileOutputStreamout=newFileOutputStream(savePath);//輸出文件名 JPEGImageEncoderencoder=JPEGCodec.createJPEGEncoder(out); JPEGEncodeParamparam=encoder.getDefaultJPEGEncodeParam(bimage); param.setQuality(1,true); encoder.encode(bimage,param); out.close(); } catch(Exceptione) {returnfalse;} returntrue; }

}

4、與服務(wù)端建立長連接與服務(wù)器建立長連接，也就是在顯示數(shù)據(jù)頁面中嵌入一個隱藏頁面，該隱藏頁面主要完成取服務(wù)器端所要顯示的數(shù)據(jù)，并且將該頁面顯示數(shù)據(jù)的方法寫成一個死循環(huán)，以此來保持與服務(wù)器端的長連接。同樣以服務(wù)器端通過手動控制按鈕產(chǎn)生一張圖片，客戶端顯示最新圖片及圖片的信息內(nèi)容作為實例加以說明。服務(wù)器端通過一個按鈕btnGet產(chǎn)生圖片，按鈕事件代碼同代碼清單1。顯示圖片頁面通過兩個頁面分別顯示圖片信息與圖片內(nèi)容，顯示圖片頁面內(nèi)容如下所示。代碼清單6：<htmlxmlns="/1999/xhtml"><headrunat="server"><title></title><scripttype="text/javascript">functionwritePicInfo(str){if(window.document.getElementById("divNewPicId").innerText!=str){window.document.getElementById("divNewPicId").innerText=str;ifrImg.location.reload();}}functiononload(){varifrpush=newActiveXObject("htmlfile");//創(chuàng)建對象ifrpush.open();varifrDiv=ifrpush.createElement("div");//添加一個DIVifrpush.appendChild(ifrDiv);//添加到htmlfileifrpush.parentWindow.writePicInfo=writePicInfo;//注冊javascript方法ifrDiv.innerHTML="<iframesrc='getNew.aspx'></iframe>";//在div里添加iframeifrpush.close();}onload();</script></head><body><divstyle="float:left">最新圖片：</div><divid="divNewPicId"></div><iframeid="ifrImg"src="img.aspx"width="800"height="500"></iframe></body></html>其中，隱藏頁面getNew.aspx代碼如下所示。代碼清單7：protectedoverridevoidRender(HtmlTextWriteroutput){stringstr;while(true)//死循環(huán)保持長鏈接{//讀取最新圖片信息XmlDocumentxmlDoc=newXmlDocument();xmlDoc.Load(HttpContext.Current.Server.MapPath("newPic.xml"));XmlNodeListnodeList=xmlDoc.SelectSingleNode("Items").ChildNodes;XmlElementelement=(XmlElement)nodeList[0];stringnewPicId=element.GetAttribute("code");

str="<script>window.parent.writePicInfo('"+newPicId+"')</script>";this.Context.Response.Write(str);this.Context.Response.Flush();System.Threading.Thread.Sleep(2000);}}代碼中的“htmlfile”是一個類似JavaScript中Window對象的一個ActiveXObject，它內(nèi)部也是DOM結(jié)構(gòu)，將作為隱藏幀的IFrame寫入這個對象中，這樣可以解決進度條一直為讀取狀態(tài)的問題。

5、RTMP協(xié)議傳輸隨著網(wǎng)絡(luò)技術(shù)的迅猛發(fā)展，視頻、音頻等多媒體通信需求越來越多，Adobe公司開放了RTMP（theReal-timeMessagingProtocol）協(xié)議規(guī)范，RTMP協(xié)議作為客戶端和服務(wù)器端的傳輸協(xié)議，這是一個專門為高效傳輸視頻、音頻和數(shù)據(jù)而設(shè)計的TCP/IP協(xié)議。其優(yōu)秀產(chǎn)品Flex是用于構(gòu)建和維護在所有主要瀏覽器、桌面和操作系統(tǒng)一致地部署的極具表現(xiàn)力的Web應(yīng)用程序的高效率的開放源碼框架。從目前的應(yīng)用來說，RTMP主要用于音、視頻的傳輸，流視頻服務(wù)器就是FMS（Flash

Media

Server），其原稱為FCS（Flash

Communication

Server），技術(shù)范疇能應(yīng)用到諸如Flash聊天室、視頻會議等領(lǐng)域。以一個實現(xiàn)聊天功能的Flex程序為例，顯示聊天內(nèi)容代碼如下所示。代碼清單8：<?xmlversion="1.0"encoding="utf-8"?><mx:Applicationxmlns:mx="/2006/mxml"layout="absolute"fontSize="12"creationComplete="init()">

<mx:Script> <![CDATA[ importvo.Message; importmx.collections.ArrayCollection; importmx.controls.Alert; privatevarmyNetConnection:NetConnection;//flex與fms鏈接用的對象 privatevarserverApp:String="rtmp:///Test"; privatevartalk_so:SharedObject;//fms下的SharedObject對象 privatefunctioninit():void { btn_send.addEventListener(MouseEvent.CLICK,btnSenClickHandler); myNetConnection=newNetConnection(); myNetConnection.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler); myNetConnection.connect(serverApp); } privatefunctionnetStatusHandler(evt:NetStatusEvent):void { trace(.code);//調(diào)試代碼用 if(.code=="NetConnection.Connect.Success") { talk_so=SharedObject.getRemote("talk",myNetConnection.uri,true); talk_so.addEventListener(SyncEvent.SYNC,talkSoSyncHandler); talk_so.connect(myNetConnection); } else { Alert.show("鏈接失敗"+.code); } } privatefunctiontalkSoSyncHandler(evt:SyncEvent):void { txt_content.text=""; if(talk_so.data.msgList!=null) { vartmp:ArrayCollection=newArrayCollection(); convertArrayCollection(tmp,talk_so.data.msgListasArrayCollection); for(vari:int=0;i<tmp.length;i++) { varmessage:Object=tmp.getItemAt(i); varfullMsg:String=message.nickname+"在"+message.time.toTimeString()+"說:"+message.msg; txt_content.text=txt_content.text+fullMsg+"/n"; } } } privatefunctionbtnSenClickHandler(evt:MouseEvent):void { vararr:ArrayCollection=newArrayCollection(); if(talk_so.data.msgL

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論