1. 程式人生 > >HTML5伺服器推送訊息之Server-Sent Events

HTML5伺服器推送訊息之Server-Sent Events

一、Server-Sent 事件定義:

Server-Sent 事件指的是網頁自動從伺服器獲得更新。
以前也可能做到這一點,前提是網頁不得不詢問是否有可用的更新。通過 Server-Sent 事件,更新能夠自動到達。

二、例子:

1.Html:

@{
    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>
2.C#:
        /// <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.asp

2.https://q.cnblogs.com/q/44793/