简介
在 Web 应用程序中，实时数据推送是一个关键的需求，特别是对于需要不间断地获取最新信息的应用程序。而常见的 HTTP 请求-响应模型则无法满足这一需求，因为它需要客户端不断地发出请求，即使数据没有发生改变。这很浪费带宽和服务器资源。
为了解决这个问题，HTML5 引入了 Server-Sent Events（SSE）技术，使得服务器可以向客户端推送数据，免去了客户端不断发出请求的负担。SSE 是一个相对简单和易用的技术，很适合用于实现实时数据推送功能。
本文将介绍如何使用 SSE 实现实时数据推送，包括 SSE 的基本原理、实现方法、服务器端和客户端的代码示例。
SSE 基本原理
SSE 基于 HTTP 协议，使用 HTTP 连接，但不同于传统的 HTTP 请求-响应模型。它采用单向通信，即服务器向客户端发送数据，客户端只接收数据，不能向服务器发出请求。
在 SSE 中，服务器端需要使用特殊的响应格式：text/event-stream。这种格式的响应包含一个或多个事件（event），每个事件占据一行。事件有三种类型：
- 以
data:开头，后面跟着 JSON 格式的数据，表示发送的数据事件； - 以
event:开头，后面跟着事件名称，表示自定义事件； - 以
id:开头，后面跟着一个 ID 字符串，表示消息 ID。
客户端通过打开一个 SSE 连接，即可以接收服务端发送的事件数据。SSE 连接的建立和关闭都是通过 JavaScript 的 SSE API 实现的。
实现 SSE
下面是一个使用 Node.js 和 Express 框架的 SSE 服务器端代码示例。它实现了一个简单的计数器，并每秒向客户端发送计数器的当前值。
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/sse', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
let count = 0;
setInterval(() => {
res.write(`data: ${count}\n\n`);
count++;
}, 1000);
});
app.listen(3000, () => {
console.log('SSE server started on port 3000');
});在这个示例中，/sse 路由返回的是 SSE 格式的响应。在响应的头部中设置了 Content-Type、Cache-Control 和 Connection 等参数。其中，Connection 设置为 keep-alive 表示 SSE 连接不会在每次请求结束后断开。而 Cache-Control 则设置为 no-cache 表示不缓存响应。
另外，通过 setInterval 定时器，每秒发送一条数据事件，格式为 data: <count>\n\n，其中 <count> 表示当前计数器的值。
下面是一个使用 JavaScript 的 SSE API 的客户端代码示例。它创建了一个 SSE 连接，接收来自服务器的事件，并显示了计数器的值。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SSE Example</title>
</head>
<body>
<div id="counter">0</div>
<script>
const counterEl = document.querySelector('#counter');
const source = new EventSource('/sse');
source.addEventListener('message', event => {
const count = Number(event.data);
counterEl.textContent = count;
});
</script>
</body>
</html>在这个示例中，通过 EventSource 创建了一个 SSE 连接，将 /sse 路由指定为连接的 URL。然后，通过 addEventListener 注册了一个 message 事件监听器，当接收到服务器发送的事件时，就会更新计数器的值。
总结
本文介绍了如何使用 SSE 实现实时数据推送功能。SSE 是一种基于 HTTP 协议的简单易用的技术，非常适合用于实现实时通信，比如实时聊天、实时统计等。它不需要客户端不断地发出请求，减轻了服务器的负担，同时也节省了带宽和服务器资源。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65382d1d7d4982a6eb0d536e