全国服务热线:4008-888-888

技术知识

浅谈HTML5 服务器消息推送恶性事件(Server

服务器消息推送恶性事件(Server-sent Events)是根据WebSocket 协议书的1种服务器向顾客端推送恶性事件&数据信息的单边通信。现阶段全部流行访问器均适用服务器推送恶性事件,自然除 Internet Explorer 。2333...

WebSocket 协议书是继HTTP协议书后又1服务器顾客端通信协议书,不一样于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\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");//此处1定要配备
                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的简易运用,完成实际效果我就已不展现了,有兴趣爱好能够亲身实际操作完成实际效果!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服