服务器推送事件(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的简单应用,实现效果我就不再展示了,有兴趣可以亲自操作实现效果!
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 老头杯第二届规则是什么 英雄联盟老头杯第二届规则介绍
- 王崴-爵士听堂.蓝色波萨(HQCD)[WAV+CUE]
- 群星《欧美动听情歌·柔情第5季》2CD【DTS-WAV分轨】
- [极品珍藏]德意志进行曲集卡拉扬SACD[WAV+CUE]
- 前暴雪制作人呼吁反击DEI 玩家:夺回文化!
- 腾讯证实子公司Sharkmob大规模裁员:整个市场很低迷
- 荣耀加冕 问鼎冠军 中国代表队获第四届东亚电竞锦标赛团体总冠军
- 污甩乐队.2024-Let.the.dirt.left【摩登天空】【FLAC分轨】
- 杜德伟.1994-ALL.FOR.YOU(英)【滚石】【WAV+CUE】
- 群星.2013-百代好声音ADMSCD1【EMI百代】【WAV+CUE】
- 群星《私人音乐精选示范碟》PRIVATEMUSIC 发烧唱片名碟[WAV+CUE][1.1G]
- 山口百惠《あなたへの子守唄》日本索尼钢刻字首版[WAV分轨][1.1G]
- 群星《宝丽金20周年特别发烧版》1:1母盘直刻限量编号[低速原抓WAV+CUE][1G]
- 凤飞飞.1984-仲夏(夏艳)[WAV]
- 常安《民歌红·江南燕》DTS-ES6.1[WAV]