📌  相关文章
📜  HTML5-服务器发送事件(1)

📅  最后修改于: 2023-12-03 15:01:18.644000             🧑  作者: Mango

HTML5 服务器发送事件（Server-Sent Events）

HTML5 服务器发送事件（Server-Sent Events，简称SSE）允许 Web 应用程序通过简单的 HTTP 连接单向地从服务器获取实时事件。SSE 建立在传统的 Comet 技术上，通过使用新的标准 API 来提供更简单、更稳定的实时通信解决方案。

优点

相比于 WebSockets 和轮询等其他实时通信解决方案，SSE 具有以下优点：

  • 建立于标准 HTTP 协议上，并支持 HTTPS 加密连接
  • 没有跨域安全限制
  • 更简单、更轻量级，不需要额外的库或框架
基本用法

SSE 的基本使用方法相对简单。首先在客户端创建一个 EventSource 对象，并通过其 onmessage 事件监听服务器发送的消息。然后在服务器端发送格式为 text/event-stream 的消息，客户端就能够接收到了。

下面是一个简单的例子，用于不断向客户端发送时间戳：

HTML
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML5 SSE 示例</title>
</head>
<body>
	<p id="output"></p>
	<script>
		if (typeof(EventSource) !== "undefined") {
			var source = new EventSource("sse.php");
			source.onmessage = function(event) {
				document.getElementById("output").innerHTML += event.data + "<br>";
			};
		} else {
			document.getElementById("output").innerHTML = "您的浏览器不支持 SSE。";
		}
	</script>
</body>
</html>
PHP
<?php 
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");

while(true) {
  	echo "data: " . time() . "\n\n";
  	ob_flush();
  	flush();
  	sleep(1);
}
?>
事件类型

SSE 支持三种类型的事件：Message Events、Server-Sent Events 和 Comment Events。其中，Message Events 是最常用的一种类型，用于发送数据和通知，其他两种类型较少使用。

下面是一个发送不同类型事件的示例：

<?php 
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");

echo "event: eventType1\ndata: This is message1\n\n";
echo "event: eventType2\ndata: This is message2\n\n";
echo ": This is a comment\n\n";

ob_flush();
flush();
?>
事件重试机制

SSE 还支持事件重试机制，可以通过服务器发送 retry 字段指定客户端在出现错误时的重试时间间隔。例如：

retry: 10000\n\n
总结

SSE 提供了一种简单、轻量级、稳定的实时通信解决方案，适用于不需要双向通信的场景。我们可以用它实现实时消息推送、实时数据展示等功能。