HTML5服务器推送消息之Server-Sent Events

来源：互联网发布：mac版剪辑视频软件编辑：程序博客网时间：2024/05/29 16:46

一、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/

阅读全文

0 0