HTML5伺服器推送訊息之Server-Sent Events
阿新 • • 發佈:2018-12-31
一、Server-Sent 事件定義:
Server-Sent 事件指的是網頁自動從伺服器獲得更新。
以前也可能做到這一點,前提是網頁不得不詢問是否有可用的更新。通過 Server-Sent 事件,更新能夠自動到達。
二、例子:
1.Html:
2.C#:@{ ViewBag.Title = "測試"; } <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">測試</h1> </header> <div class="mui-content"> <button id="btnTestServerSentStart" class="mui-btn mui-btn-success">開始測試訊息推送</button> <div id="result"></div> </div> <script type="text/javascript"> $(function () { var source; var stat = ""; //測試訊息推送 $("#btnTestServerSentStart").click(function () { if (typeof (EventSource) !== "undefined") { var es = new window.EventSource("/BuyerMobile/Login/TestServerSent"); source = es; es.onopen = function (e) { switch (e.target.readyState) { case EventSource.CONNECTING: stat = "Connecting"; break; case EventSource.OPEN: stat = "Open"; break; case EventSource.CLOSED: stat = "Closed"; break; default: stat = "啊啊啊n/a"; break; } document.getElementById("result").innerHTML += stat + "<br>"; } es.onmessage = function (event) { //alert(event.data); document.getElementById("result").innerHTML += event.data + "<br>"; }; es.onerror = function (e) { switch (e.target.readyState) { case EventSource.CONNECTING: stat = "等待重新聯機"; break; case EventSource.CLOSED: stat = "聯機失敗,停止聯機"; break; } document.getElementById("result").innerHTML += stat + "<br>"; } } else { mui.alert("抱歉,您的瀏覽器不支援 server-sent 事件 ..."); } }); //停止聯機 $("#btnTestServerSentStart").click(function () { //source.close(); }); }); </script>
/// <summary> /// 測試訊息推送之Server-Sent /// </summary> /// <returns></returns> [UnAuthorize] public void TestServerSent() { if (true == Request.AcceptTypes.Any<string>(accept => accept.Equals("text/event-stream"))) { Response.ContentType = "text/event-stream"; Response.CacheControl = "no-cache"; //Response.BufferOutput = false; //Response.Buffer = false; Response.Write("retry: 3000\n"); Response.Write("data: {\"msg\": \"keep-alive\"}\n\n"); Response.Flush(); if (false == Response.IsClientConnected) { Response.Close(); } } else { Response.Write("不支援事件流(event-stream)"); } }
三、缺點:
1.不支援IE;2.支援少量的資料傳遞,大量的資料傳遞需要使用WebSocket。
四、參考:
1.http://www.w3school.com.cn/html/html5_serversentevents.asp2.https://q.cnblogs.com/q/44793/