大众计算机学习网欢迎诸位!收藏本站注 册登 陆
常用教程:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 教程 > 文章页

完整的ashx EventSource示例

Admin | 2016-12-23 21:08:41 | ReadNums | 805 | 标签 asp.net | 打印本页
     

  简单的说就是:利用EventSource可以实现服务器端到客户端消息的推送,也就是说,在客户端不需要频繁请求的情况下,如果服务器端有新的消息,那么,会自动推送给客户端,而客户端也会自动接收。下面看实例代码吧。

  一、网页前台JS代码

<script type="text/javascript">
if(typeof(EventSource)!=="undefined")
{
    var source=new EventSource("EventAshx.ashx");
    var stat="";
    source.onopen = function (e)
    {
        //document.getElementById("result").innerHTML += "<br/>" + "onopen" + "<br/>";
        switch (e.target.readyState)
        {
            case EventSource.CONNECTING:
                stat = "正在连接…";
                break;
            case EventSource.OPEN:
                stat = "连接成功!";
                break;
            case EventSource.CLOSED:
                stat = "连接已关闭";
                break;
            default:
                stat = "n/a";
                break;
        }
        document.getElementById("result").innerHTML += "联机状态:" + stat + "<br/>"
    };
    source.onmessage = function (e)
    {
        var data = e.data;//服务器端传回的数据(文本格式)
     var origin = e.origin;//服务器端URL的域名部分,即协议、域名和端口
     var lastEventId = e.lastEventId;//数据的编号,由服务器端发送。如果没有编号,这个属性为空
        document.getElementById("result").innerHTML += "获取消息:" + e.data + "<br/>";
    };
     //e.data在onerror事件里是undefined
    source.onerror = function (e)
    {
        switch (e.target.readyState)
        {
            case EventSource.CONNECTING:
                stat = "等待重新联机";
                break;
            case EventSource.CLOSED:
                stat = "联机失败,停止联机";
                break;
        }
        document.getElementById("result").innerHTML += "连接状态:" + stat +"<br/>";
    };
}
else
{
    document.getElementById("result").innerHTML="很遗憾,您的浏览器不支持EventSource!";
}
</script>

  另外,网页中需要一个DIV容器:即<div id="result"></div>

  二、服务器端ASHX文件代码

  服务器端的代码何其简单,当初我也不相信,试验了才知道,真的非常简单。

  代码如下:

   public void ProcessRequest (HttpContext context)
  {
          context.Response.ContentType = "text/event-stream";
          //禁止页面缓存的可行2种形式
          context.Response.Cache.SetNoStore();//Cache-Control:private, no-store//可以
          string MyTime = "data:" + "大众计算机学习网" + "\n\n";//数据前面必须以data:开头,后面必须有两个换行
          context.Response.Write(MyTime);
  }

  运行效果图如下:



问题未解决:在线咨询我要在线咨询问题

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日