服务器推送事件(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") { 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) { origin = event.origin;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 的样例
推送消息 [HttpGet] public HttpResponseMessage SentNews() { HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK); try { data_str = “推送至客户端的数据”;even = "", data = ""; if (!string.IsNullOrWhiteSpace(data_str)) { even = ; data = + data_str + ; } + ;[] array = Encoding.UTF8.GetBytes(even + data + retry); Stream stream_result = new MemoryStream(array); response.Content = new StreamContent(stream_result); response.Content.Headers.ContentType = );//此处一定要配置 response.Headers.CacheControl = new CacheControlHeaderValue(); response.Headers.CacheControl.NoCache = false; } catch (Exception ex) { LogHelper.WriteWebLog(ex); } return response; }
看完以上代码我想你应该有个大概了,响应的方式还是HTTPResponse响应,但总是有点小小的要求的:
响应的数据格式也应该注意到了上述代码中的"data:"、"event:"和"retry:"这些标记:
以上就是Server-sent Events的简单应用,实现效果我就不再展示了,有兴趣可以亲自操作实现效果!