最近看了一些关于pushlet技术的文章,但大多数都是java的实现,在.net上实现的却很少,索性自己写一个小小的Demo贴出来与大家分享一下。
环境:asp.net mvc 1.0
用到的技术:asp.net mvc 、jquery、ajax
原理:要实现服务器推技术有很多解决方案,比较适用的有两种:一是客户端轮询(polling),再就是http长连接。前者是在客户端建立一个时钟,每个一段时间ajax 调用一次服务器端的方法,以达到动态把Server端的数据Push到Client。后者是通过一个嵌套的Iframe,把这个Iframe的http返回在Server端不断的循环,以达 到Server拥有主动向Client发送数据的目的。今天只实现第一种,轮询的方式。
项目介绍:在新建完asp.net mvc后,在Views/Home/下建立一个content.aspx视图。在HomeController下添加相关ActionResult,同时添加一个void keepinvoke()函数用来返回ajax调用。
代码:
HomeController:
public string keepinvoke() { Thread.Sleep(3000); return "<mce:script language='javascript' type='text/javascript'><!-- parent.push('.NET PUSHLET') // --></mce:script>"; }
content.aspx:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %> <%@ Import Namespace="System.Threading"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>content</title> <mce:script language="javascript" type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.3.2.js" mce_src="http://www.cnblogs.com/Scripts/jquery-1.3.2.js"></mce:script> </head> <body style="background-color:#AAAAAA;" mce_style="background-color:#AAAAAA;"> <mce:script language="javascript" type="text/javascript"><!-- $(document).ready(function() { setInterval(invoke, 3000); }); function invoke() { var xhr = $.ajax({ type: "POST", url: "/Home/keepinvoke", data: "", success: function() { var jsonstr = xhr.responseText; $(jsonstr).appendTo("body"); } }); } // --></mce:script> <div></div> </body> </html>
Index.aspx:
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server"> Home Page </asp:Content> <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server"> <mce:script language="javascript" type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.3.2.js" mce_src="http://www.cnblogs.com/Scripts/jquery-1.3.2.js"></mce:script> <mce:script language="javascript" type="text/javascript"><!-- function push(i) { $("#history").attr("innerHTML", ($("#history").attr("innerHTML") + i.toString()+"<br/>")); } // --></mce:script> <h2>CHAT ROOM</h2> <fieldset> <legend>CHAT CONTENT:</legend> <div id="history"></div> </fieldset> <div> <input type="text" name="chat" style="width:200px;" /><input type="button" value="SENT" /> </div> <iframe src="/Home/content" mce_src="Home/content"></iframe> </asp:Content>
说明总结:content.aspx定时ajax调用keepinvoke函数,得到一段javascript代码并把其放到content的body 下,而content作为iframe嵌入到Index中,而那段javascript代码是调用index中的js函数的,所以实现了从Server端 Push数据到Client端的目的。 个人所见难免不足,欢迎大家提建议。