博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
java h5服务器推送事件_服务器推送事件的详细介绍
阅读量:6279 次
发布时间:2019-06-22

本文共 2150 字,大约阅读时间需要 7 分钟。

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

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

Server-sent Events 的使用

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

客户端JS代码

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

}; //服务器推送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..."; }

服务端

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

/// /// 推送消息/// /// [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:"这些标记:event:表示该行用来声明事件的类型。浏览器在收到数据时,会产生对应类型的事件。

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

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

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

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

转载地址:http://aznva.baihongyu.com/

你可能感兴趣的文章
关于再次查看已做的多选题状态逻辑问题
查看>>
动态下拉菜单,非hover
查看>>
政府安全资讯精选 2017年第十六期 工信部发布关于规范互联网信息服务使用域名的通知;俄罗斯拟建立备用DNS;Google打击安卓应用在未经同意情况下收集个人信...
查看>>
简单易懂的谈谈 javascript 中的继承
查看>>
iOS汇编基础(四)指针和macho文件
查看>>
Laravel 技巧锦集
查看>>
Android 使用 ViewPager+RecyclerView+SmartRefreshLayout 实现顶部图片下拉视差效果
查看>>
Flutter之基础Widget
查看>>
写给0-3岁产品经理的12封信(第08篇)——产品运营能力
查看>>
ArcGIS Engine 符号自动化配置工具实现
查看>>
小程序 · 跳转带参数写法,兼容url的出错
查看>>
flutter error
查看>>
Flask框架从入门到精通之模型数据库配置(十一)
查看>>
10年重新出发
查看>>
2019年-年终总结
查看>>
聊聊elasticsearch的RoutingService
查看>>
让人抓头的Java并发(一) 轻松认识多线程
查看>>
从源码剖析useState的执行过程
查看>>
地包天如何矫正?
查看>>
中间件
查看>>