一、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.asp2.https://q.cnblogs.com/q/44793/