前言
在前端开发中，我们经常需要通过一些方式来获取服务端推送的数据，比如实时消息、实时数据等。过去我们可能会使用一些轮询的方式，但这种方式带来的效率和性能问题逐渐变得不再适用。在这种情况下，Server-Sent Events 协议成为了我们可以使用的一种更好的解决方案。
本文将从基础知识开始，深入浅出地介绍 Server-Sent Events 协议，帮助大家更好地理解它的原理，以及如何在自己的项目中进行实践。
什么是 Server-Sent Events 协议
在前端开发中，我们常常需要从服务端获取实时数据。在过去，最常见的实现方式是采用轮询的方式，但在轮询过程中，我们需要频繁地向服务器发起请求，这不仅耗费了大量的系统资源，还会在一定程度上影响系统的性能。Server-Sent Events （以下简称 SSE）协议则为我们提供了一种更加高效和优雅的解决方式。
SSE 协议是一种 HTML5 新推出的协议，实现了服务器端向客户端主动推送数据的功能。SSE 基于标准的 HTTP 协议，通过发送一个 GET 请求来建立客户端和服务端之间的连接，随着时间的推移，服务端可以向客户端发送不断更新的数据。
SSE 协议的工作原理
在 SSE 协议中，首先需要建立一条 HTTP 长连接，以保证客户端和服务端之间的连接不会意外丢失，从而能够实现协议规定的实时数据推送。当客户端向服务端发起 SSE 请求（即发送一个 GET 请求）时，服务端需要在响应头信息中添加 Content-Type: text/event-stream 这个字段，表示这个响应传输的是 Server-Sent Events 数据。
在 SSE 协议中，服务端发出的数据被称为事件（Event）。每个事件包含以下三个部分：
event：事件类型，可以为空。data：事件数据，可以为空。id：事件 ID，可以为空。
事件类型和事件数据是 SSE 协议传输的核心内容，而事件 ID 则可以用来标识特定的事件，以便客户端能够在重连时重新获取之前未接收到的数据。
事件类型和事件数据的格式如下：
event: [事件名]\n data: [事件内容]\n\n
其中，event、data 和 id 都可以省略，但两个\n符号意味着一个事件结束，SSE 接收到这个事件后会将其解析并触发对应的事件处理函数。
在服务端向客户端推送事件时，需要通过 send() 方法来实现。下面是一个简单的服务端示例代码，用于以 2 秒的间隔向客户端推送当前时间：
-- -------------------- ---- -------
----- ---------- - ----- ---- -- -
------------------ -
--------------- ----------------------------------
---------------- -----------
------------- -------------
---
----- ----- - -------------- -- -
----- ---- - --- -------
----------------- ---------
---------------- -------------------------------
-- ------
--------------- -- -- -
---------------------
---
--在上面的代码中，我们使用 setInterval 方法每 2 秒钟向客户端发送一个包含当前时间的事件，客户端可以在接收到这个事件后进行进一步处理。
如何在前端中使用 SSE 协议
在前端中使用 SSE 协议也非常简单，只需要使用 EventSource 对象即可。EventSource 是一个原生的 JavaScript 对象，它允许客户端建立 SSE 连接并接收服务端推送的实时数据。使用 EventSource 对象时，需要在构造函数中传入服务端的 URL 地址，并通过 addEventListener 方法注册事件处理函数，以便接收服务端推送的数据。
下面是一个简单的客户端示例代码：
const sseHandler = () => {
const es = new EventSource('/api/sse');
es.addEventListener('time', function (event) {
console.log(event.data);
});
};在上面的代码中，我们使用 EventSource 对象创建了一个 SSE 连接，并在事件处理函数中输出服务端推送的数据。
总结
本文从基础知识开始，介绍了 SSE 协议的工作原理以及如何在自己的项目中进行实践。通过学习本文，相信大家已经对 SSE 协议有了更深入的理解，可以更加灵活地运用它来实现前端实时数据推送的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64882a1048841e98946aba28