谈谈HTML5中的服务器发送事件Server-sent events

HTML/CSS 2012-06-07 html5,服务器推送,server-sent

HTML5加了许多新功能,其中服务器发送事件Server-sent events是一个亮点,以下直接贴上代码示例

客户端a.html页面

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8" />
		<title>服务器推送SSE</title>
		<script type="text/javascript"> 
			$(document).ready(function(){ 
				//检查浏览器支持情况
				if(typeof(EventSource)!=="undefined") { 
					//定义个对象,用于初始化事件源,这里用c.php这个页面实现 
					var eSource = new EventSource("c.php"); 
					//detect message receipt 
					eSource.onmessage = function(event) { 
						//将收到的数据展示到页面的ID=content元素中 
						document.getElementById("content").innerHTML += event.data+'<br />'; 
					}; 
				}else { 
					document.getElementById("content").innerHTML="没有收到服务端Server-Sent数据."; 
				}
			});
		</script>
	</head>
	<body> 
		<div id="content"></div>
	</body> 
</html>

 

服务器端c.php 页面  

<?php
// 要声明头部
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
// 直接打印当前时间
echo "data: ".date('Y-m-d H:i:s').PHP_EOL; 
flush();
?>

 

运行效果截图

根据运行效果,发现是每三秒更新一次

赶紧用谷歌开发工具看了一下网络连接

结果发现每隔三秒有一个网络请求连接

虽然效果能实现,但感觉这跟Ajax没啥区别

感觉还不如WebSocket更有研究价值!

 

文字链接:《谈谈HTML5中的服务器发送事件Server-sent events

文章地址:http://www.qttc.net/20120674.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 10

  • GoEasy web三步轻松实现web实时推送 1. 引入goeasy.js 2. 客户端订阅, Var goeasy = new GoEasy({appkey:’your appkey’}); goeasy.subscribe(channel:”your channel”, onMessage:function(message){alert(‘received message’+ message.content)}) 3. 三种推送方式 Javascript: goeasy.publish({channel:’your channel’, message:’your publish msg’}); Java SDK: GoEasy goeasy = new GoEasy(“appkey”); goeasy.publish(“your channel”,”your msg”); RestAPI: https://goeasy.io/goeasy/publish 三步轻松实现web推送及接收。官网:https://goeasy.io,文档齐全
    2016-05-26 14:30:55 [ 跟帖 ]
    1 #
  • 虽然是每隔3秒会发一次请求,但是如果服务器主动刷新的话,也会被推送到浏览器断的,这个是轮询做不到的
    2015-12-05 18:00:36 [ 跟帖 ]
    2 #
  • 确实如此。 还以为HTML5支持长连接了呢。到头来还是轮询啊。
    2015-01-04 14:00:39 [ 跟帖 ]
    期待WebSocket吧,除非你守着古董的低端浏览器
    2015-01-11 22:16:05 [ 跟帖 ]
    3 #
  • 亲,你还没好好读SSE规范啊,SSE是长连接,服务端Response是不能关闭的。如果关闭了,SSE客户端会隔四秒重新连接。
    2013-09-29 22:02:41 [ 跟帖 ]
    非常感谢啊,目前为止我实际项目上还是没有采用此种方式,看下有机会也尝试下。
    2013-10-08 21:32:23 [ 跟帖 ]
    4 #
  • 就是要拿一个死循环来发的 date_default_timezone_set("America/New_York"); header("Content-Type: text/event-stream\n\n"); $counter = rand(1, 10); while (1) { // Every second, sent a "ping" event. echo "event: ping\n"; $curDate = date(DATE_ISO8601); echo 'data: {"time": "' . $curDate . '"}'; echo "\n\n"; // Send a simple message at random intervals. $counter--; if (!$counter) { echo 'data: This is a message at time ' . $curDate . "\n\n"; $counter = rand(1, 10); } ob_flush(); flush(); sleep(1); } 这是MDN上的简单例子(https://developer.mozilla.org/en/Server-sent_events/Using_server-sent_events) 真正用的时候要加跳出条件的 我自己做了个Demo,是没问题的,服务器的负载很稳定的,而且当一个长链时间过长或者包过大,他会自动断包重发的
    2012-06-20 14:04:16 [ 跟帖 ]
    你这是靠sleep函数来控制间隔,使用while来死循环。。。貌似也是一样的使用
    2012-06-20 14:13:54 [ 跟帖 ]
    效果是完全不一样的,确实是通过sleep来控制间隔,用while (true)来循环输出,但是只有一条GET请求,而且GET的包在不断增加,你试一下就知道了。其实跟Comet类似,这才是真正的服务器推送
    2012-06-20 16:23:19 [ 跟帖 ]
    5 #
  • 用法不对 服务器那里要有个 while(true)来循环发送才对
    2012-06-15 16:17:06 [ 跟帖 ]
    那不是死循环了吗?你有DEMO不?我看看
    2012-06-15 16:19:28 [ 跟帖 ]
    6 #