在 Web 开发中，我们经常需要服务器在客户端不断推送消息，以保证客户端实时更新。而 SSE（Server-Sent Events，服务器推送事件）是一种实现服务器端推送新闻事件到客户端的技术，在前端开发中发挥着很重要的作用。
SSE 与 WebSocket 不同，WebSocket 更适合于双向通信，可以用于传输任何数据类型，而 SSE 可以更高效地传输文本或二进制数据（如 JSON、XML、HTML 页面等），适用于单向通信的应用场景。
SSE 功能示例
在演示 SSE 功能之前，我们需要先了解一下 SSE 的两个概念：
EventSource 对象
在 SSE 中，客户端可以通过 JavaScript 的 EventSource 类创建 EventSource 对象，用于连接服务器。EventSource 对象是 SSE 核心 API 的一部分，它封装了服务器上的 EventStream，并在客户端通过 EventStream 与服务器进行消息通信。
EventStream
EventStream 是 SSE 中的数据传输方式，它是由多个 HTTP 数据包组成，每个数据包都含有一个或多个事件（event）和数据（data）。在客户端建立连接后，服务器端可以使用“Content-Type: text/event-stream”指令来告诉浏览器建立 EventSource 对象。
当 EventSource 对象建立连接后，服务器就可以通过 EventStream 推送消息到客户端。客户端通过 EventSource 对象的 onmessage 事件监听服务器推送的消息，从而进行相应的处理。
下面演示一个 SSE 推送新闻事件的例子：
// javascriptcn.com 代码示例
// 在客户端建立 EventSource 对象，连接服务器
let source = new EventSource('/news');
// 监听服务器端推送的消息
source.onmessage = function (event) {
let data = JSON.parse(event.data);
// 将推送的新闻事件显示在浏览器页面上
let newsDiv = document.getElementById('news');
newsDiv.innerHTML += '<div>' + data.title + '</div>';
};在上面的代码中，我们可以看到客户端通过 JavaScript 的 EventSource 类创建了 EventSource 对象，并连接到了服务器的 /news 接口。客户端通过监听 onmessage 事件，从服务器推送的消息中取出新闻事件的数据，并在页面上将推送的新闻事件显示出来。
接下来我们看一下服务端提供的 SSE 推送新闻事件接口的示例代码。假设我们已经有了一批新闻数据，我们可以通过 Node.js 的代码实现推送新闻事件的接口：
// javascriptcn.com 代码示例
// 服务器端 SSE 推送新闻事件
const http = require('http');
const querystring = require('querystring');
// 新闻数据
const newsData = [
{ title: '新闻 A', content: '这里是新闻 A 的内容' },
{ title: '新闻 B', content: '这里是新闻 B 的内容' },
{ title: '新闻 C', content: '这里是新闻 C 的内容' },
];
http.createServer((req, res) => {
// 设置 Content-Type 为 text/event-stream，表示使用 SSE 传输数据
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
// 向客户端推送新闻事件
let i = 0;
setInterval(() => {
let news = newsData[i % newsData.length];
let data = querystring.stringify(news);
res.write(`event: news\ndata: ${data}\n\n`);
i++;
}, 1000);
}).listen(8000);在上面的服务端代码中，我们创建了一个 Node.js 服务器，并设置 Content-Type 为 text/event-stream。在 setInterval 中，我们每隔 1 秒推送一条新闻事件到浏览器。推送的数据采用 querystring.stringift() 方法将 JSON 格式的新闻数据转化为字符串，然后使用 res.write() 方法通过 SSE 的数据传输方式向浏览器推送数据。
现在运行服务端代码，在浏览器中访问 http://localhost:8000，可以看到服务器通过 SSE 推送了新闻事件，实现了服务器端推送新闻事件到客户端的功能。
SSE 的优势与应用场景
相比于轮询的方式，SSE 的优势较为明显。首先 SSE 允许服务器向客户端推送消息，而轮询方式则需要客户端不断向服务器发送请求，从而占用服务器资源。
另外，SSE 中的 EventStream 比起 WebSocket 协议来说更加轻量级，因为它只能传输文本或二进制格式的数据。
在应用场景上，SSE 主要用于实现类似于即时通讯、新闻推送、股票资讯等单向通讯的场景，较少用于双向通讯的场景。
总结
SSE 技术是一种实现服务器端推送新闻事件到客户端的技术，通过 EventSource 对象和 EventStream，实现了服务器推送消息到客户端的功能。在应用场景上，SSE 主要用于单向通讯的场景，常见的应用场景有即时通讯、新闻推送、股票资讯等领域。
我们希望这篇文章能对你了解 SSE 技术以及实现服务器端推送新闻事件到客户端有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652d30937d4982a6ebe9b5eb