一、服务器推送事件（SSE）是个啥玩意儿？
SSE，就是服务器偷偷给你发信息，只不过换了个名字显得高级点罢了。之前咱们上网都是浏览器天天找服务器问，”有啥新玩意儿?”，现在能让服务器主动告诉你，”看这儿，新鲜事来咯!”，就像有了特权似的，消息立马到眼前。
这个技术主要是用WebSocket协议做的，不过是单向的，就是说只有服务器能给客户端发信息，客户端可不行。虽然看起来有点不公平，但是对于那些需要实时更新的情况来说，这可是个大有用处的功能！
二、为啥要用SSE？它有啥好处？
为啥用SSE？就是说，用这个比老套的轮询快多。以前为了实时更新数据，得一直烦着服务器问“有啥新消息没？”这样不仅费劲儿，还容易拖慢速度。现在有了SSE，服务器会主动把消息推给你，简单快捷。
首先，SSE的设置比较轻松，不像WebSocket得搞那么多复杂的握手和状态管理，大大减轻了咱们开发和维护的压力。再说，主流浏览器大多数都能用上就那个名字长到记不住的InternetExplorer可能得换个版本才行。
三、SSE的客户端准备
用SSE的话，你这边先把H5页面上的那个JS代码搞上去。这代码就能跟服务器搭个桥，说：“哥们儿，咱们可以来聊聊天！”
这代码好容易懂~简单来说，就是搞个EventSource对象，告诉它你要听听哪台服务器有啥八卦。然后，只需要留意一下，就能接收到服务器发来的消息。是不是有点像在偷听别人讲话哩？
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...";
}
四、服务端的数据格式是怎样的？
要让服务端和客户端能正常说话，我们得约定好一些规则。比如说，回应的“Content-Type”必须设定成”text/event-stream”，这样就能告诉浏览器后面要送来的就是SSE（服务器到浏览器）数据了。
这些数据格式，有点像我们聊天时用的表情包，”data:”就是个像素头像，表示这是要传输的数据；”event:”像是在跟你传递某种信息，告诉你这是什么种类的事件；而”retry:”听起来好像比较重要，因为它表示的是网络断了之后需要等待的时间。浏览器知道哪个部分是什么意思！
五、.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:sentMessagen"; data = "data:" + data_str + "nn"; } 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; }
简单来说，这只是一段.Net的示范代码，帮你了解一下如何通过服务器发送消息以及对信息进行什么样的格式处理罢了。看上去很长，其实只要明白是干什么的就行了。
这个程序里，我们搞清楚怎么设定响应头和生成数据格式。这样才能让SSE跑得顺畅。可能开始看着眼花缭乱，时间久点熟悉了就好了。
六、注意事项：别让小细节绊倒你
虽然SSE功能强，但是使用的时候可得多注意。比如说，”Content-Type”千万别搞错了，输入数据时要按规则来哟。然后，因为网路时常不稳，所以”retry”时间要设好了，别让程序白忙活。
这些小事情看似平常,但是没留神的话，可能让你的消息发不出，还影响体验。所以，真的是细节决定胜负！
七、实战案例：让理论落地
看了这么多理论，还真不如一个实际例子好使。比如像这样，我们要做个实时更新新闻的功能，就利用下SSE（Server-SentEvent）。那么一旦有新闻出来，服务器就能立刻把信息发给所有在线用户。
当用不着我们消费者手动刷，新闻能自动跳出来！感觉挺炫的？其实这只是简单的开始，SSE的能力远在这儿之上。
八、总结：SSE的未来展望
看了这篇文章，你应该对SSE有了更深的了解？它不只是个技术，还是提高用户体验的好帮手！随着科技进步，SSE的用处肯定会越来越多。
最后，我问你个问题。假如你是个程序员，你会用SSE（服务器端推送事件）做什么？
评论0