在 Web 开发中，实时数据传输一直是一个非常重要的技术需求。以往的方案都有一些缺陷，比如轮询会产生大量无用的请求，WebSocket 在一些环境下不方便使用。而 Server-Sent Events (SSE) 则提供了一种全新的解决方案。本文将回顾 SSE 的历史演变，介绍其技术特点，以及提供一些实用的应用示例。
1. SSE 的起源
SSE 的历史可以上溯到 2006 年，当时 Opera 和 Mozilla 公司联合开发了一种名为“Server-Sent DOM Events”的技术。这种技术旨在实现服务器向客户端发送 DOM 事件，从而达到实时推送数据的效果。好景不长，不久后 Mozilla 放弃了该项技术的开发，Opera 因为市场份额的原因也未能令该技术得到广泛应用。于是 Server-Sent DOM Events 就成为了被遗忘的技术。
2010 年，SSE 被提出，并且在随后的几年中得到了一些推广。目前 SSE 已经成为了现代 Web 应用中实时传输数据的主流解决方案之一。
2. SSE 技术特点
SSE 主要基于 HTTP 协议，具有如下的特点：
2.1 使用简单
SSE 的 API 相对 WebSocket 来说更为简单易用，只需要监听一个事件，就可以接收到服务器推送的消息。同时也不需要进行任何的握手操作，不需要进行复杂的协议协商。
2.2 HTTP 协议兼容
由于 SSE 基于 HTTP 协议，所以可以享受到 HTTP 协议的各种优势。比如支持 HTTPS，不需要进行额外的端口开放等。
2.3 实时性优秀
SSE 是基于 HTTP 的长轮询机制，服务器可以在任意时刻推送数据到客户端。客户端将接收到服务器推送的消息时，可以立即对消息进行处理。
2.4 兼具可靠性
SSE 中，每个消息都是通过一个独立的 HTTP 连接来传输的，这种机制可以使得消息的传输具有更高的可靠性。同时，SSE 也提供了一个重连机制，当连接中断后，会自动尝试重新连接。
3. SSE 应用示例
下面我们将分别介绍 SSE 的服务端和客户端应用。由于 SSE 基于 HTTP，所以我们这里使用 node.js 提供服务端应用支持。
3.1 服务端
-- -------------------- ---- -------
----- ---- - ----------------
-------------------------- ----- ---- -
------------------ -
--------------- -------------------- -- -- ----------------- --
---------------- ----------- -- ----
------------- ------------ -- -- ---------- ----
---
---------------------- -
----- ---- - --- ----------------------
---------------- -------------- -- ----
-- ------
----------------
------------------- ------- -- -------------------------上面的代码实现了一个简单的 SSE 服务端应用。监听来自客户端的请求后，会不断地向客户端进行数据推送。注意到在请求头部分设置了 Content-Type 为 text/event-stream，表示我们使用 SSE 类型传输数据。同时，由于 SSE 消息以 \n\n 结尾，所以每次发生推送信息时需要在结尾处再添加一个\n。
3.2 客户端
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
----- ----------------
--------
----- ------ - --- ------------------------------------- -- ---- ----------- --
---------------- - --------------- - -- ----
----- ---- - -----------------------
------------------------------------------- - -----
--
---------
-------
------
------- ---------
---- ------------------
-------
-------上面的代码实现了一个简单的 SSE 客户端应用。注意到，在创建 EventSource 对象时，需要传入 SSE 服务端的 URL。一旦建立了连接，onmessage 方法就会被调用，可以通过 event.data 获取到服务器推送的数据。
4. 总结
SSE 是一种高效、易用的实时传输数据的解决方案。虽然它与 WebSocket 相比较而言具有一些限制，但是其 HTTP 兼容性以及使用简单的 API，使得它在一些特定场景下具有流行的趋势。通过本文，我们了解了该技术的历史背景，掌握了其核心特点以及应用示例，希望本文可以对读者启发一些实际应用的灵感。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a62d248841e9894886e95