笔记大全

服务器推送事件的详细介绍

更新时间：2023-11-28

什么是服务器推送事件？

服务器推送事件（Server-Sent Events，SSE）是一种允许服务器向客户端推送数据的HTML5 Web API。它允许浏览器单向地从服务器接收自动更新的事件。这意味着服务器可以通过一个持久性HTTP连接不断地向客户端发送数据而不必等待客户端请求数据。这与WebSockets相比，更适用于单向数据流的应用程序。

如何使用SSE？

要使用SSE，首先需要建立一个EventSource对象。可以使用EventSource()构造函数创建该对象，如果服务器端脚本发生错误，将触发error事件。

	var source=new EventSource('/path/to/sse.php');
	source.onerror=function(event) {
		// 处理错误
	}

如何从服务器发送事件？

在服务器端，可以使用Content-Type头将数据类型设置为text/event-stream表示SSE响应，然后发送事件。每个事件都由一个ID和一个消息数据组成。当没有新数据可以发送到客户端时，服务器应该发送一个空的注释。以下是一个PHP示例脚本：

	header('Content-Type: text/event-stream');
	header('Cache-Control: no-cache');
	header('Access-Control-Allow-Origin: *');

	$data=[
		'id'=> '123',
		'data'=> 'Hello, SSE!'
	];

	echo "id: {$data['id']}\n";
	echo "data: {$data['data']}\n\n";
	ob_flush();
	flush();

如何使用SSE进行实时通信？

SSE可以用于实时通信，例如显示实时股票价格、天气预报等数据。以下是一个简单的HTML和JavaScript示例，用于显示从服务器接收到的事件数据：

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="UTF-8">
		<title>Real-time Communication with SSE</title>
	</head>
	<body>
		<p id="data"></p>
		<script>
			var source=new EventSource('/path/to/sse.php');
			source.onmessage=function(event) {
				var data=JSON.parse(event.data);
				document.getElementById('data').innerHTML=data.data;
			};
		</script>
	</body>
	</html>

总结

服务器推送事件（SSE）是一种HTML5 Web API，允许服务器单向向客户端发送自动更新的数据。在客户端，可以使用EventSource对象来接收来自服务器的事件。服务器可以通过将Content-Type头设置为text/event-stream并发送事件来向客户端发送数据。SSE适用于单向数据流的应用程序，例如实时股票价格、天气预报等。

c语言编程笔录