在现代 web 应用开发中，实时通信机制已经成为非常重要的一部分。它可以使 web 应用更加互动和动态化。服务器推送技术是一种实现实时通信的方式，它可以让服务器主动地向客户端发送消息而不需要客户端发起请求，从而实现了实时更新。
本文将介绍一种服务器推送技术：Server-Sent Events，讲解其原理和应用。并且，我们还将通过示例代码演示如何使用 Server-Sent Events 与服务器进行交互。
Server-Sent Events 简介
Server-Sent Events（简称 SSE）是一种用于服务器推送的技术。与 WebSockets 不同，SSE 是基于 HTTP 协议的，可以在浏览器和任何 HTTP 服务器之间实现实时通信。
SSE 的主要优点在于，它具有更高的兼容性和可靠性，而且易于实现。使用 SSE，客户端可以直接接收服务器发送的消息。在 SSE 中，服务器向客户端发送数据的时间是无限的，客户端可以保持连接，直到关闭该连接或断开与服务器的连接。
Server-Sent Events 原理
SSE 基于一个持久的 HTTP 连接，使用了专门的 MIME 类型和事件流数据格式。
MIME 类型
事件流的 MIME 类型是 text/event-stream，这告诉浏览器接收到的数据是一组事件流，并且要解析这些事件。其中，text 表示这是一个文本流，而 event-stream 表示这是一个事件流。
事件流数据格式
事件流数据格式是基于纯文本的，具有一定的结构，如下所示：
event: ping
data: {"timestamp": "1624549606036"}
event: chat-message
data: {"from": "John", "message": "Hello, World!"}每个事件都以 event: 开始，后面跟着事件的名称。如果不需要事件名称，可以省略该行。事件名称仅用于标识事件，并没有其他实际作用。
下一行以 data: 开始，后跟一个将会被解释为事件对象的 JSON 格式的数据流。如果不需要数据，可以省略该行。
除了 data 以外，还有两个其他选项可以在事件流数据格式中使用：
id:：一个可选的事件标识符，每个事件都可以有一个唯一的 id。retry:：一个可选的建议重新连接的毫秒数，如果连接意外断开，则客户端应该在这段时间后重新连接。
SSE 的通信流程
SSE 的通信流程如下：
- 客户端向服务器发送一个 HTTP 请求。
- 服务器发送响应标头，包括
Content-Type: text/event-stream。 - 服务器期望的客户端在保持连接的同时保持该 HTTP 请求的行为持续执行，即不在响应后断开连接。
- 服务器根据需要向客户端推送事件流。
使用 Server-Sent Events
在浏览器中使用 SSE 并不困难。我们可以使用 JavaScript 在客户端发起 SSE 请求，并在回调函数中处理来自服务器的事件。下面的代码演示了如何使用 SSE：
const evtSource = new EventSource("http://localhost:3000/sse");
evtSource.onmessage = function(event) {
const data = JSON.parse(event.data);
console.log(data);
};在上面的代码中，我们创建了一个新的 EventSource 对象，并指定它向 http://localhost:3000/sse 发送请求。在服务器向这个 URL 发送数据后，会触发 onmessage 事件，我们可以从该事件中获取处理来自服务器推送的数据。
在服务器端，我们可以使用 Node.js 和 Express 去创建一个 SSE 端点：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - -----
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
---
-------------- -- -
----- ---- - ------ ------------------ -------- ------- ------- ---------
----------------
-- ------
---
---------------- -- -- -
------------------- ------- -- ---------------------------
---在我们的服务器代码中，我们向客户端推送一个带有名称 message 的事件，该事件的数据是一个 JSON 对象：
const data = `data: ${JSON.stringify({ message: "Hello, World!" })}\n\n`;
res.write(data);总结
Server-Sent Events 是一个可靠、兼容性高的服务器推送技术。通过本文的介绍，我们可以知道 SSE 的原理和使用方法。在实际开发中，我们可以使用 SSE 为我们的应用程序实现实时通信，以实现更高级的应用程序。
如果您想了解更多有关 SSE 的信息，请阅读 SSE 规范文档以获取更多详细信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64549768968c7c53b086da25