(Server-sent Events)浅谈H5 中的服务器推送事件
导读:收集整理的这篇文章主要介绍了(Server-sent Events)浅谈H5 中的服务器推送事件,觉得挺不错的,现在分享给大家,也给大家做个参考。服务器推送事件(Server-sent Events)是基于WebSocket 协议的一种服务...
收集整理的这篇文章主要介绍了(Server-sent Events)浅谈H5 中的服务器推送事件,觉得挺不错的,现在分享给大家,也给大家做个参考。服务器推送事件(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 的样例
看完以上代码我想你应该有个大概了,响应的方式还是HTTPResponse响应,但总是有点小小的要求的:
响应报头"Content-type" 要设置为 "text/event-stream"
响应的数据格式也应该注意到了上述代码中的"data:"、"event:"和"retry:"这些标记:
1.event:表示该行用来声明事件的类型。浏览器在收到数据时,会产生对应类型的事件。
2.data:表示该行包含的是数据。以 data 开头的行可以出现多次。所有这些行都是该事件的数据。
3.retry:表示该行用来声明浏览器在连接断开之后进行再次连接之前的等待时间。
4.id:表示该行用来声明事件的标识符(即数据的编号),不常用。
以上就是(Server-sent Events)浅谈H5 中的服务器推送事件的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: (Server-sent Events)浅谈H5 中的服务器推送事件
本文地址: https://pptw.com/jishu/583570.html