html5实现服务器发送事件

最新推荐文章于 2024-07-09 22:15:00 发布

duo002

最新推荐文章于 2024-07-09 22:15:00 发布

阅读量437

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/duo002/article/details/43705677

版权

页面

<!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();
            }

duo002

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5实现服务器发送事件

页面 Document Status: Server Data js代码创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）每接收到一次更新，就会发生 onmessage 事件当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中v
复制链接

扫一扫