扣丁学堂浅谈HTML5 服务器推送事件(Server-sent Events)

关于服务器推送事件(Server-sent Events)不论是已经就业的HTML5开发工程师还是对HTML5开发感兴趣或者是参加学习的小伙伴，多多少少应该都会知道一些，本篇文章扣丁学堂HTML5培训小编就具体和大家探讨一下关于HTML5 服务器推送事件(Server-sent Events)的有关问题。

扣丁学堂HTML5培训

服务器推送事件（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";

data = "data:" + data_str + "";

}

string retry = "retry:" + 1000 + "";//连接断开后重连时间（毫秒），其实可以理解为轮询时间 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：表示该行用来声明事件的标识符（即数据的编号），不常用。

要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5开发环境搭建视频，HTML5培训后的前景无限，行业薪资和未来的发展会越来越好的，通过千锋扣丁学堂金牌讲师在线录制的，让你快速掌握开发实战技能。