HTML - 服务器发送事件

服务器发送事件是一种将数据从服务器发送到网页的方法，而无需页面刷新或发出请求。这些事件对于创建实时应用程序（如聊天、新闻源或通知）非常有用。使用 SSE，我们可以将 DOM 事件从我们的 Web 服务器持续推送到访问者的浏览器。

事件流式处理方法打开与服务器的持久连接，在有新信息可用时将数据发送到客户端，无需连续轮询。服务器发送的事件标准化了我们将数据从服务器流式传输到客户端的方式。

如何在 Web 应用程序中使用 SSE？

要在 Web 应用程序中使用服务器发送的事件，我们需要向文档添加一个 <eventsource> 标签。<eventsource> 的 src 属性应指向一个 URL，该 URL 提供持久性 HTTP 连接，该连接发送包含事件的数据流。此外，URL 指向 PHP、PERL 或任何 Python 脚本，这些脚本将负责一致地发送事件数据。

实例

以下是需要服务器时间的 Web 应用程序的示例 HTML 代码。


<!DOCTYPE html>
<html>
<head>
	 <script type="text/javascript">
			/* Define event handling logic here */
	 </script>
</head>
<body>
	 <div id="sse">
			<eventsource src="/cgi-bin/ticker.cgi" />
	 </div>
	 <div id="ticker">
			<TIME>
	 </div>
</body>
</html>

SSE 的服务器端脚本

服务器端脚本应发送 Content-type 标头，指定类型 text/event-stream，如下所示。


 print "Content-Type: text/event-stream\n\n";

设置 Content-Type 后，服务器端脚本将发送一个 Event：标记，后跟事件名称。以下代码片段会将 Server-Time 作为事件名称发送，并以新行字符结尾。

 print "Event: server-time\n";

最后一步是使用 Data：标签发送事件数据，后跟以新行字符结尾的字符串值的整数，如下所示：


$time = localtime();
print "Data: $time\n";

最后，以下是用 Perl 编写的完整ticker.cgi −


#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true){
	 print "Event: server-time\n";
	 $time = localtime();
	 print "Data: $time\n";
	 sleep(5);
}

处理服务器发送的事件

让我们修改我们的 Web 应用程序以处理服务器发送的事件。以下是最后一个示例。


<!DOCTYPE html>
<html>
<head>
	 <script type="text/javascript">document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);
			function eventHandler(event) {
				 // 服务器发送的警报时间
				 document.querySelector('#ticker').innerHTML = event.data;
			}
	 </script>
</head>
<body>
	 <div id="sse">
			<eventsource src="/cgi-bin/ticker.cgi" />
	 </div>
	 <div id="ticker" name="ticker"> [TIME] </div>
</body>
</html>

在测试 Server-Sent 事件之前，我建议您确保 Web 浏览器支持此概念。

本页