Server-sent Events 允许 Web 应用实时传输文本和数据

因为 Web 应用程序发展迅速，达到实时应用程序的水平已经变得更加重要。从在线协作工具到仪表板和其他具有实时数据需求的应用程序，开发人员需要一种轻量级的技术来传输实时数据到客户端。

Server-sent Events 简介

Server-sent Events（SSE）是一种开放网络技术，可以使用标准 HTTP 连接从服务器向客户端推送文本和数据。 SSE 使用单向连接，只需要一个 HTTP 连接，就可以实时获取从服务器发出的流数据。 SSE 与 WebSocket 相比，更为简单，它只使用标准 HTTP 协议，无需任何额外的协议转换，也不需要跨浏览器和设备兼容性问题。

SSE 通过不断发送数据流并使用“data”事件来达到更新数据的目的。这种事件很容易在现代 Web 编程中使用（例如，JavaScript 中的事件），它是 WebSocket 的某种程度上的替代。

SSE 的客户端使用原生的 EventSource API，该 API 可以通过 JavaScript 与服务器建立 SSE 连接。

SSE 的优势

SSE 是一种对浏览器的实时数据更新最佳的解决方案，具有以下优势：

轻量级：SSE 只是在 HTTP 连接上添加了一个标准的事件流协议，所以它比 WebSockets 更轻量级，在传输数据这一方面也表现出更高的效率。
可用性更强：SSE 使用 HTTP 标准请求，因此可以使用标准 HTTP 服务器进行部署，而不需要 WebSocket 运行时，这意味着可以考虑使用现有的基础设施和运维团队。
灵活性和可定制性：SSE 协议允许服务器和客户端双方可根据自己的需求进行配置，可以发送任何类型的数据并且可以控制数据发送的频率。

可以看出，SSE 相对于 WebSockets 的优势在于轻量级，适用性更广，这是因为 SSE 更适合一些需要不间断的文本传输的场景，比如常见的实时聊天室，虽然同样也有广泛的应用。

SSE 使用示例

下面是一个简单的 SSE 示例工程基于 Node.js 平台，我们可以运行它并使用浏览器终端来访问得到实时的文本数据。

服务器端代码

----- ---- - ----------------

----- ------ - ----------------------- ---- -- -
  ------------------ -
    --------------- --------------------
    ---------------- -----------
    ------------- ------------
  ---
  -------------- -- -
    ---------------- - - --- -------------------- - --------
  -- ------
---

--------------------

我们创建了一个 HTTP 服务器，每秒向客户端推送当前时间。

向客户端发送 SSE 数据实际上只需要在数据前面添加一个 data 字段：

---------------- - - --- -------------------- - --------

data 前缀告诉客户端接下来的内容是数据，而 \n\n 代表一个 SSE 事件的结束标记。

客户端代码

在浏览器端，我们使用原生的 EventSource API 连接到服务器：

----- ------ - --- -------------------------------------
---------------- - -------- ------- -
  ------------------------
--

使用EventSource API 和 onmessage 事件，我们可以接收到服务端推送的文本数据，并在控制台输出。

总结

借助 SSE 技术，我们不仅可以更加高效和快速地通过 Web 应用程序实时通信，还可以更好地控制数据传输。同时，SSE 还免去了 WebSocket 的额外开销和部署复杂度，许多 Web 应用程序可以通过它来实现实时数据传输需求。

除了本文中的运行示例，您还可以使用其它框架来开发SSE的应用，如Express、Koa等。SSE 技术是实现 Web 实时数据传输的一种优秀方式，建议您多加了解，做好技术储备。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/64f56b22f6b2d6eab3e21afa