随着用户需求的增加，Web应用程序需要更多及时性的数据更新。传统的基于轮询的数据刷新方式已经不能满足现代 Web 应用的的需求了。HTML5 中引入的推送技术——Server-sent Events，可以让 Web 应用程序实现实时推送数据给客户端，而无须轮询或者任何插件支持。
Server-sent Events 是什么？
Server-sent Events （以下简称 SSE）指的是一项基于 HTTP 的推送技术，它允许客户端接收来自服务器的实时事件，而无需手动发起 HTTP 请求。SSE 通过建立一个持久化的 HTTP 连接和服务器保持长时间通信，以实现服务器主动向客户端推送事件消息的能力。
SSE 的通信协议是 HTTP，因此 SSE 不需要任何插件或者第三方库。并且 SSE 使用的是普通的文本传输，可以通过浏览器的原生 API 接收，并且也可以通过 JavaScript 对传输的文本数据进行解析。
SSE 工作原理
SSE 的工作过程建立在 HTTP 的长连接机制上，它通过 HTTP 的头部信息 - “Content-Type：text/event-stream”来建立一条到服务器的长连接，并且保持该连接持久化保持通信。对客户端而言，SSE 连接是由 JavaScript 生成的，而对服务器而言它是由 HTTP 连接来实现通信。
SSE 分为两个部分：服务器端和客户端。服务器端需要发送数据，保持连接和在客户端断开连接时关闭持久化连接。 客户端使用 JavaScript 来建立 SSE 连接和监听来自服务器的消息。
如何在前端使用 SSE？
1. SSE 服务器端实现
在服务端，你需要发送 SSE 数据来响应 SSE 连接请求。一个 SSE 响应文本如下所示：
Content-Type: text/event-stream data: First message\n id: 1\n\n
响应 JSON 的格式解释：
- data - 事件数据，它以 "data: " 开头，接着是事件消息文本，以回车符和换行符作为消息结束标记。
- id - 事件 ID。你可以为每个事件赋予一个唯一 ID，这可以让客户端在客户端断线并重新连接时更好地处理事件消息。
以上是一个需传输的事件数据的示例，每条消息由一系列的行组成，并以空行结束。
2. SSE 客户端实现
在客户端，你可以使用 JavaScript 来建立和监听。它可以通过指定一个 URL 地址和参数的方式，与服务器建立 SSE 连接。以下是 SSE 的 JavaScript 代码示例：
const source = new EventSource('/sse');
source.onmessage = (event) => {
console.log(event.data);
};代码中，EventSource 是 SSE 的浏览器原生 API，用于创建 SSE 连接。EventSource 对象中的 onmessage 事件用于监听来自服务器的事件消息。
需要注意的是，SSE API 不支持跨域请求，因此 SSE 需要与服务器端运行在同一个域中。
SSE 的优点
与轮询相比，SSE 有以下优点：
- 服务器端可以主动推送数据。这意味着从服务器到客户端的方向更容易控制。
- 减小了网络请求。SSE 可以减少客户端到服务器的网络请求次数。
- 减小了服务器连接数。SSE 可以在一个长连接上处理多个客户端连接请求。
- 更容易实现。SSE 不需要像 WebSocket 一样处理二进制数据，在传输数据时更加方便。
结论
SSE 是一种轻量的、易于实现的推送技术，可以用来处理实时数据更新的场景，同时也减轻了服务器的负担。
随着 HTML5 技术的不断发展，SSE 已经成为实现实时数据模型的核心技术之一。如果你需要在 Web 应用程序中实现实时数据更新，请尝试使用 HTML5 的 Server-sent Events。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f27364a44b36ee5765f633