頁面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="Scripts/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Status:</h1>
<div id="statusDiv"></div>
<h1>Server Data</h1>
<div id="serverData"></div>
</body>
</html>js代碼
- 創建一個新的 EventSource 對象，然後規定發送更新的頁面的 URL（本例中是 "demo_sse.php"）
- 每接收到一次更新，就會發生 onmessage 事件
- 當 onmessage 事件發生時，把已接收的數據推入 id 爲 "result" 的元素中
var servarData ,statusDiv;
var SERVER_URL= "WebForm1.aspx";
window.onload =function(){
servarData = document.getElementById("serverData");
statusDiv = document.getElementById("statusDiv")
startlistenServer();
}
function startlistenServer () {
statusDiv.innerHTML = "start connect"
var es = new EventSource(SERVER_URL);
es.onopen =openHandler;
es.onerror = erroHandler;
es.onmessage =messgeHandler;
}
function openHandler (e) {
statusDiv.innerHTML = "server open"
}
function erroHandler (e) {
statusDiv.innerHTML ="Error"
}
function messgeHandler (e) {
servarData.innerHTML = e.data;
}net 後臺代碼
- 把報頭 "Content-Type" 設置爲 "text/event-stream"
- 規定不對頁面進行緩存
- 輸出發送日期（始終以 "data: " 開頭）
- 向網頁刷新輸出數據
Response.ContentType = "text/event-stream";
Response.Expires = -1;
string str;
for (int i = 0; i < 100; i++)
{
str = "data:" + DateTime.Now.ToLongTimeString() + "\n\n";
Response.Write(str);
Thread.Sleep(1000);
Response.Flush();
}