随着互联网的发展，实时数据展示与推送成为了越来越重要的需求。SSE（Server-Sent Events）技术可以帮助我们实现实时数据展示和推送，本文将介绍 SSE 技术的基本原理、实现方法和示例代码。
什么是 SSE 技术？
SSE 技术是一种在 Web 应用中实现服务器向客户端推送实时数据的技术。与传统的轮询方式不同，SSE 技术采用了单向通信的方式，即服务器向客户端推送数据，客户端只需等待接收即可。
SSE 技术基于 HTTP 协议，使用了 HTTP 的长连接机制，即客户端向服务器发送一个 HTTP 请求，服务器保持连接不关闭，并持续向客户端推送数据。这样就实现了服务器向客户端推送数据的功能。
如何实现 SSE 技术？
SSE 技术的实现需要使用到浏览器的 EventSource 对象和服务器的 SSE 接口。
EventSource 对象
EventSource 对象是浏览器原生提供的一个 API，用于接收服务器推送的事件流。使用 EventSource 对象可以方便地接收服务器推送的数据，并在客户端进行处理和展示。
EventSource 对象的用法如下：
var source = new EventSource(url);
source.onmessage = function(event) {
console.log(event.data);
};其中，url 是 SSE 接口的地址，onmessage 是接收服务器推送消息的回调函数。
SSE 接口
SSE 接口是服务器提供的用于向客户端推送实时数据的接口。SSE 接口需要满足以下条件：
- 使用 text/event-stream 作为 Content-Type。
- 接口返回的数据需要按照 SSE 协议格式发送。
SSE 协议格式如下：
event: <event-name> data: <event-data> id: <event-id> retry: <retry-time>
其中，event 表示事件名称，data 表示事件数据，id 表示事件 ID，retry 表示重新连接的时间间隔。每个事件必须以两个换行符结尾。
下面是 SSE 接口的示例代码：
// javascriptcn.com 代码示例
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
while (true) {
$data = fetchData(); // 获取数据
echo "data: $data\n\n";
flush(); // 刷新缓冲区
sleep(1); // 等待1秒钟
}在上面的代码中，我们使用了 PHP 的 flush 函数来刷新缓冲区，保证数据能够及时发送到客户端。
SSE 技术的示例代码
下面是一个使用 SSE 技术实现实时数据展示和推送的示例代码：
客户端代码
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SSE 技术示例</title>
</head>
<body>
<h1>SSE 技术示例</h1>
<div id="result"></div>
<script>
var source = new EventSource('sse.php');
source.onmessage = function(event) {
document.getElementById('result').innerHTML += event.data + '<br>';
};
</script>
</body>
</html>服务器端代码
// javascriptcn.com 代码示例
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$i = 0;
while (true) {
$data = '数据 ' . $i++; // 生成数据
echo "data: $data\n\n";
flush(); // 刷新缓冲区
sleep(1); // 等待1秒钟
}在上面的代码中，我们使用了 PHP 来实现 SSE 接口，并不断生成数据并推送给客户端。客户端接收到数据后，将其展示在页面上。
总结
本文介绍了 SSE 技术的基本原理、实现方法和示例代码。SSE 技术可以帮助我们实现实时数据展示和推送，适用于需要实时展示和推送数据的场景，如在线聊天、股票行情等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6507659195b1f8cacd2d0285