本文摘自PHP中文网,作者巴扎黑,侵删。
这篇文章主要介绍了浅谈HTML5 服务器推送事件(Server-sent Events) ,具有一定的参考价值,有兴趣的可以了解一下服务器推送事件(Server-sent Events)是基于WebSocket 协议的一种服务器向客户端发送事件&数据的单向通讯。目前所有主流浏览器均支持服务器发送事件,当然除了 Internet Explorer 。2333...
WebSocket 协议是继HTTP协议后又一服务器客户端通讯协议,不同于HTTP单纯的客户端请求服务器响应单向通讯模式的是它支持了服务端客户端的双向通讯。
Server-sent Events 的使用
Server-sent Events(以下简称SSE)作为服务器=>客户端通讯方式那必然客户端要有相应的服务地址和响应方法,服务端要有相应的数据发送方法;废话不多说,上代码!
客户端JS代码
H5页面需添加如下JS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <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()
};
eventSource.addEventListener( 'sentMessage' , function (event) {
var data = eval( '(' +event.data+ ')' );
var origin = event.origin;
var lastEventId = event.lastEventId;
console.log(data); }, false );
} else {
document.getElementById( "result" ).innerHTML = "Sorry, your browser does not support server-sent events..." ;
}
</script>
|
服务端
服务端应当返回怎样的数据格式?应当以什么样的响应给客户端呢?先来个.Net 的样例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | /// <summary>
/// 推送消息
/// </summary>
/// <returns></returns>
[HttpGet]
public HttpResponseMessage SentNews()
{
HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
try
{
string data_str = “推送至客户端的数据”;
string even = "" , data = "" ;
if (! string .IsNullOrWhiteSpace(data_str))
{
even = "event:sentMessage\n" ;
data = "data:" + data_str + "\n\n" ;
}
string retry = "retry:" + 1000 + "\n" ;
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的简单应用,实现效果我就不再展示了,有兴趣可以亲自操作实现效果!
以上就是有关HTML5服务器推送事件的讲解的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5中重新加载音频/视频元素的方法load()
HTML5标准学习-编码详解
h5怎样做出日历校验功能
h5移动端页面点击input重复弹出键盘的实现方法
HTML5原生拖拽操作实例讲解
使用h5做出添加禁止缩放
用HTML5实现画虚线效果代码
h5中在拖动的元素或选择的文本进入到有效的放置目标时触发的事件ondragenter
HTML5与html的区别有哪些
HTML5与html区别是什么
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 有关HTML5服务器推送事件的讲解