HTML5技术

HTML5 服务器推送事件(Server-sent Events) - 北海肥猫

字号+ 作者:H5之家 来源:H5之家 2017-07-14 09:00 我要评论( )

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

服务器推送事件(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") { 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) { origin = event.origin;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 的样例

     推送消息 [HttpGet] public HttpResponseMessage SentNews() { HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK); try { data_str = “推送至客户端的数据”;even = "", data = ""; if (!string.IsNullOrWhiteSpace(data_str)) { even = ; data = + data_str + ; } + ;[] array = Encoding.UTF8.GetBytes(even + data + retry); Stream stream_result = new MemoryStream(array); response.Content = new StreamContent(stream_result); response.Content.Headers.ContentType = );//此处一定要配置 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:"这些标记:

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

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • HTML5新增标签 - 小君君的博客

      HTML5新增标签 - 小君君的博客

      2017-07-12 12:00

    • HTML5开发,背后的事情你知道吗? - 箜喒

      HTML5开发,背后的事情你知道吗? - 箜喒

      2017-07-12 10:03

    • 带来全新的网络格局---html5 - 箜喒

      带来全新的网络格局---html5 - 箜喒

      2017-07-11 09:00

    • html5图片上传时IOS和Android均显示摄像头拍照和图片选择 - 出岫无心

      html5图片上传时IOS和Android均显示摄像头拍照和图片选择 - 出岫无心

      2017-07-10 10:00

    网友点评
    "