Web页面实时刷新技术探讨

Web 页面实时刷新技术探讨 一、总述随着网络技术的飞速发展，使用 B/S 结构来实现项目应用已经越来越多，而实时监控一直都是多数行业软件所必备的功能，由此使用 Web 页面来实现实时监控成了一种必然的需求。二、实时刷新技术1、传统的页面刷新方式传统的页面刷新方式很多，常见的有页面间隔一定的时间自动刷新、ActiveX 控件、Applet 等。采用页面间隔一定的时间自动刷新的方式，是在网页的头部加入一下代码：这里是经过 20 秒跳转到一个新页面，可以将“newPage”设置为本页面即为刷新本页面，刷新间隔时间可以修改“20”为任意时间。通过这种方式如果并发和访问量较大,服务器就有可能承受不了这种压力，从而造成服务器死机。使用 ActiveX 控件的方式需要每个客户端下载安装 ActiveX 控件，并且客户端浏览器只能使用 Windows 的 IE 浏览器。同样使用 Applet 需要客户端安装 Java 运行时。这些传统的页面刷新方式都或多或少的存在着一些确定，在 Web 项目应用中的使用也越来越少。2、Ajax 轮询Ajax 轮询方式是使用客户端脚本，通过 XMLHttpRequest 来定时发送请求，从而查询页面数据的更新情况。通过这种方式，程序实现方便简捷，但客户端频繁的发送请求会给服务器带来很大的压力和客户端处理器负载，如果服务器端没有更新时，这种轮询访问服务器便是无意义的，并且耗费了网络资源与CPU 处理资源。实例说明：服务器端通过手动控制按钮产生一张图片，客户端显示最新图片及图片的信息内容。服务器端通过一个按钮 btnGet产生图片，按钮事件代码如下所示。代码清单 1：protected void btnGet_Click(object sender, EventArgs e)/通过改写一张父图片上的文字来产生新图片System.Drawing.Image image = System.Drawing.Image.FromFile(HttpContext.Current.Server.MapPath(“parent.jpg“);string currTime = System.DateTime.Now.ToString(“yyMMddHHmmssffffff“);Graphics g = Graphics.FromImage(image);g.DrawImage(image, 0, 0, image.Width, image.Height);g.DrawString(currTime, new Font(“Arial“, 28), new SolidBrush(Color.Red), 10, 10);g.Dispose();string savePath = “Pic/“ + currTime + “.jpg“;image.Save(HttpContext.Current.Server.MapPath(savePath);/将最新图片文件名写入到 XML文件中XmlDocument xmlDoc = new XmlDocument();xmlDoc.Load(HttpContext.Current.Server.MapPath(“newPic.xml“);XmlNodeList nodeList = xmlDoc.SelectSingleNode(“Items“).ChildNodes;XmlElement element = (XmlElement)nodeList0;element.SetAttribute(“code“, currTime);xmlDoc.Save(HttpContext.Current.Server.MapPath(“newPic.xml“); 显示图片页面通过两个页面分别显示图片信息与图片内容，显示图片页面内容如下所示。代码清单 2：var xmlHttp;function CreateXMLHttp() if(window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();else if (window.ActiveXObject) try xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP“); catch(e) try xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP“); catch(e) xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP.5.0“);function startXMLHttp() CreateXMLHttp(); xmlHttp.onreadystatechange =retDeal;xmlHttp.open(“post“,“imgInfo.aspx“,true); xmlHttp.setRequestHeader(“Content-Type“,“application/x-www-form-urlencoded charset=gb2312“); xmlHttp.send(); function retDeal() 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);3、DWR 服务器 PushDWR 的反转 AJAX 功能允许我们从服务器端来控制客服端，而不需要客户端的请求，服务器可以自动把消息发给指定的客户端。DWR 的 Push 技术是让服务器每次发送广播时，把这个广播推送给客户端，而不用客户端去刷新，DWR 的推送是基于长连接的，性能优越。以服务器端通过手动控制按钮产生一张图片，客户端显示最新图片及图片的信息内容作为实例加以说明。服务器端通过一个按钮产生图片，页面代码如下所示。代码清单 3：/dwr/interface/getPic.js/dwr/engine.js/dwr/util.js Dtotype.format = function(format) var o = “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() /millisecondif(/(y+)/.test(format) format=format.replace(RegExp.$1,(this.getFullYear()+“).substr(4 - RegExp.$1.length);for(var k in o)if(new RegExp(“(“+ k +“)“).test(format)format = format.replace(RegExp.$1,RegExp.$1.length=1 ? ok :(“00“+ ok).substr(“+ ok).length);return format;function getNewPic() var currTime = new Date().format(“yyMMddhhmmssS“);var currPath = “D:/Program/Java/JavaSpace/ajaxTest/WebContent/“;getPic.createStringMark(currPath+“parent.jpg“,currTime,currPath+“Pic/“+currTime+“.jpg“);getPic.getNewPicId(currTime); 显示图片页面通过两个页面分别显示图片信息与图片内容，显示图片页面内容如下所示。代码清单 4：/dwr/interface/getPic.js/dwr/engine.js/dwr/util.jsfunction init() dwr.engine.setActiveReverseAjax(true); /激活反转window.onload = init;/页面初始化方法function refreshImg() ifrImg.location.reload();最新图片： “ width=“800“ height=“500“另外，getNewPic 类用于产生新图片、 Push 处理。代码清单 5：public class getNewPic public static String currPicId = “100413101427820“;public String getNewPicId(String picId, HttpServletRequest request)if(currPicId = picId)return currPicId;if(picId != null) currPicId = picId;/获得 DWR 上下文ServletContext sc = request.getSession().getServletContext();ServerContext sctx = ServerContextFactory.get(sc);/获得当前浏览 client.jsp 页面的所有脚本 sessionCollection sessions = sctx.getScriptSessionsByPage(“/ajaxTest/client.jsp“);Util util = new Util(sessions);/处理这些页面中的一些元素util.setValue(“divNewPicId“, currPicId);util.addFunctionCall(“refreshImg“,null);return currPicId;public boolean createStringMark(String filePath,String markContent,String savePath) ImageIcon imgIcon=new ImageIcon(filePath); Image theImg =imgIcon.getImage(); int width=theImg.getWidth(null); int height= theImg.getHeight(null); /System.out.println(theImg);BufferedImage bimage = new BufferedImage(width,height, BufferedImage.TYPE_INT_RGB); Graphics2D g=bimage.createGraphics(); g.setColor(Color.red); g.setBackground(Color.white); g.drawImage(theImg, 0, 0, null ); g.setFont(new Font(“Arial“,Font.PLAIN,28); /字体、字型、字号 g.drawString(markContent,10,10); /画文字 g.dispose(); try FileOutputStream out=new FileOutputStream(savePath); /输出文件名 JPEGImageEncoder encoder =JPEGCodec.createJPEGEncoder(out); JPEGEncodeParam param = encoder.getDefaultJPEGEncodeParam(bimage); param.setQuality(1, true); encoder.encode(bimage, param); out.close(); catch(Exception e) return false; return true; 4、与服务端建立长连接与服务器建立长连接，也就是在显示数据页面中嵌入一个隐藏页面，该隐藏页面主要完成取服务器端所要显示的数据，并且将该页面显示数据的方法写成一个死循环，以此来保持与服务器端的长连接。同样以服务器端通过手动控制按钮产生一张图片，客户端显示最新图片及图片的信息内容作为实例加以说明。服务器端通过一个按钮 btnGet 产生图片，按钮事件代码同代码清单 1。显示图片页面通过两个页面分别显示图片信息与图片内容，显示图片页面内容如下所示。代码清单 6：function writePicInfo(str) if (window.document.getElementById(“divNewPicId“).innerText != str) window.document.getElementById(“divNewPicId“).innerText = str;ifrImg.location.reload(); function onload() var ifrpush = new ActiveXObject(“htmlfile“); / 创建对象 ifrpush.open();var ifrDiv = ifrpush.createElement(“div“); /添加一个 DIVifrpush.appendChild(ifrDiv); /添加到 htmlfileifrpush.parentWindow.writePicInfo = writePicInfo; /注册 javascript方法ifrDiv.innerHTML = “; /在 div里添加 iframeifrpush.close(); onload(); 最新图片： 其中，隐藏页面 getNew.aspx 代码如下所示。代码清单 7：protected override void Render(HtmlTextWriter output)string str;while (true) /死循环保持长链接/读取最新图片信息XmlDocument xmlDoc = new XmlDocument();xmlDoc.Load(HttpContext.Current.Server.MapPath(“newPic.xml“);XmlNodeList nodeList = xmlDoc.SelectSingleNode(“Items“).ChildNodes;XmlElement element = (XmlElement)nodeList0;string newPicId = element.GetAttribute(“code“);str = “window.parent.writePicInfo(“ + newPicId + “)“;this.Context.Response.Write(str);this.Context.Response.Flush();System.Threading.Thread.Sleep(2000);代码中的“htmlfile ”是一个类似 JavaScript 中 Window 对象的一个 ActiveX Object，它内部也是 DOM 结构，将作为隐藏帧的 IFrame 写入这个对象中，这样可以解决进度条一直为读取状态的问题。5、R