浅谈HTML5 服务器推送事件(Server-sent Events)


Posted in HTML / CSS onAugust 01, 2017

服务器推送事件(Server-sent Events)是基于WebSocket 协议的一种服务器向客户端发送事件&数据的单向通讯。目前所有主流浏览器均支持服务器发送事件,当然除了 Internet Explorer 。2333...

WebSocket 协议是继HTTP协议后又一服务器客户端通讯协议,不同于HTTP单纯的客户端请求服务器响应单向通讯模式的是它支持了服务端客户端的双向通讯。

Server-sent Events 的使用

Server-sent Events(以下简称SSE)作为服务器=>客户端通讯方式那必然客户端要有相应的服务地址和响应方法,服务端要有相应的数据发送方法;废话不多说,上代码!

客户端JS代码

 H5页面需添加如下JS代码:

<script>
         if (typeof (EventSource) !== "undefined") {
             //推送服务接口地址
             var eventSource = new EventSource("http://localhost:2242/webservice/ServerSent/SentNews");
             //当通往服务器的连接被打开
             eventSource.onopen = function () {
                 console.log("连接打开...");
             }
              //当错误发生
              eventSource.onerror= function (e) {
                  console.log(e);
              };
              //当接收到消息,此事件为默认事件
              eventSource.onmessage = function (event) {
                  console.log("onmessage...");
          
 eventSource.close()//关闭SSE链接
              };
              //服务器推送sentMessage事件
              eventSource.addEventListener('sentMessage', function (event) { 
                  var data = eval('('+event.data+')');//服务器端推送的数据,eval装换Json对象
                  var origin = event.origin;//服务器 URL 的域名部分,即协议、域名和端口,表示消息的来源。
                  var lastEventId = event.lastEventId;////数据的编号,由服务器端发送。如果没有编号,这个属性为空。
                  //此处根据需求编写业务逻辑
                  console.log(data);              }, false);
          } else {
              //浏览器不支持server-sent events 所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。
              document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
          }
      </script>

服务端

服务端应当返回怎样的数据格式?应当以什么样的响应给客户端呢?先来个.Net 的样例

/// <summary>
        /// 推送消息
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public HttpResponseMessage SentNews()
        {
            HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
            try
            {
                //response.Headers.Add("Access-Control-Allow-Origin", "*");//如需要跨域可配置
                string data_str = “推送至客户端的数据”;//当然可以是json字符串格式
                string even = "", data = "";
                if (!string.IsNullOrWhiteSpace(data_str))
                {
                    even = "event:sentMessage\n";
                    data = "data:" + data_str + "\n\n";
                }
                string retry = "retry:" + 1000 + "\n";//连接断开后重连时间(毫秒),其实可以理解为轮询时间 2333...
                byte[] array = Encoding.UTF8.GetBytes(even + data + retry);
                Stream stream_result = new MemoryStream(array);
                response.Content = new StreamContent(stream_result);
                response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/event-stream");//此处一定要配置
                response.Headers.CacheControl = new CacheControlHeaderValue();
                response.Headers.CacheControl.NoCache = false;
            }
            catch (Exception ex)
            {
                LogHelper.WriteWebLog(ex);
            }
            return response;
        }

看完以上代码我想你应该有个大概了,响应的方式还是HTTPResponse响应,但总是有点小小的要求的:

响应报头"Content-Type" 要设置为 "text/event-stream"

响应的数据格式也应该注意到了上述代码中的"data:"、"event:"和"retry:"这些标记:

1.event:表示该行用来声明事件的类型。浏览器在收到数据时,会产生对应类型的事件。

2.data:表示该行包含的是数据。以 data 开头的行可以出现多次。所有这些行都是该事件的数据。

3.retry:表示该行用来声明浏览器在连接断开之后进行再次连接之前的等待时间。

4.id:表示该行用来声明事件的标识符(即数据的编号),不常用。

以上就是Server-sent Events的简单应用,实现效果我就不再展示了,有兴趣可以亲自操作实现效果!

HTML / CSS 相关文章推荐
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
css3绘制天猫logo实现代码
Nov 06 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 #HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 #HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 #HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 #HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 #HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 #HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 #HTML / CSS
You might like
PHP4(windows版本)中的COM函数
2006/10/09 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
python通过文件头判断文件类型
2015/10/30 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
python获取本机所有IP地址的方法
2018/12/26 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
python中有帮助函数吗
2020/06/19 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
大学生毕业自我鉴定范文
2014/02/03 职场文书
离职信范文
2015/06/23 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
nginx七层负载均衡配置详解
2022/07/15 Servers
Python sklearn分类决策树方法详解
2022/09/23 Python