html5实现服务器发送事件
2015-02-10 17:28
260 查看
页面
js代码
创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
每接收到一次更新,就会发生 onmessage 事件
当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中
net 后台代码
把报头 "Content-Type" 设置为 "text/event-stream"
规定不对页面进行缓存
输出发送日期(始终以 "data: " 开头)
向网页刷新输出数据
<!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(); }
相关文章推荐
- HTML5 服务器发送事件(Server-Sent Events)介绍
- HTML5 服务器发送事件(Server-Sent Events)
- HTML5 服务器发送事件
- 关于HTML5服务器发送事件(SSE)
- HTML5--服务器发送事件
- ?HTML5 | 服务器发送事件(Server-Sent Events)
- HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送(C#示例)
- HTML5 服务器发送事件(server-sent event)
- 【HTML5】Server-Sent服务器发送事件
- HTML5学习(十一)---服务器发送事件
- html5服务器发送事件(server-sent event)
- HTML5学习(十一)---服务器发送事件
- HTML5服务器发送事件(Server-Send Events)
- [ASP.NET MVC] Real-time之HTML5 服务器发送事件(server-sent event)
- HTML5 服务器发送事件 Server-Send
- html5之sse服务器发送事件EventSource介绍
- HTML5 服务器发送事件(Server-Sent Events)
- HTML5_服务器发送事件
- HTML5之服务器发送事件
- HTML5-桌面式web应用-与web服务器通信( XHR, 服务器发送事件, Web Socket:)