什么是 Server-Sent Events？
Server-Sent Events（SSE）是一种基于 HTTP 的浏览器服务器通信协议，它允许服务器向客户端推送数据，而无需客户端发起请求。
SSE 建立在长连接的基础上，也就是说，一旦客户端与服务端建立连接，服务端便可以始终向客户端推送数据，而不必等待客户端的请求。这种长连接是由浏览器发出的 HTTP 请求保持连接，以便浏览器可以接收新的事件。
Server-Sent Events 的优势
相比于 WebSocket，使用 Server-Sent Events 的优势在于：
- 传输的数据是单向的，只能由服务端向客户端推送，客户端不能向服务端发送消息，这使得它更容易安全地使用。
- SSE 可以使用浏览器内置的 EventSource API，不需要引入第三方库。
- 对于实时通信不那么频繁的情况下，SSE 的性能比 WebSocket 更好。
如何使用 Server-Sent Events？
服务端的实现
首先，我们需要在服务端实现 SSE。在 Node.js 中，我们可以使用 http 模块来实现。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - --------------------------- --------- -- -
----------------------- -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- --- - --- -------
--------------------- ------------------------
-- ------
---
--------------------以上代码实现了每秒钟将当前时间推送到客户端。
注意，我们需要设置响应头 Content-Type 为 text/event-stream，这是 SSE 的 MIME 类型，表示返回的数据是一系列的事件。同时，我们还需要设置响应头 Cache-Control 为 no-cache，表示响应不应该被缓存。最后，我们还需要设置响应头 Connection 为 keep-alive，表示连接应该保持开启状态，以便服务端可以持续推送数据。
客户端的实现
在客户端，我们可以使用浏览器内置的 EventSource API 来接收服务端推送的数据。
-- -------------------- ---- ------- ----- ----------- - --- ------------------------------------- --------------------------------------- ------- -- - ------------------------ --- ------------------------------------- ------- -- - -------------------- ------- ---
以上代码实现了将服务端推送的数据输出到控制台。我们可以通过 addEventListener 方法来监听 message 和 error 事件。当服务端推送数据时，会触发 message 事件，我们可以通过 event.data 属性来获取推送的数据。当连接出现错误时，会触发 error 事件。
实时互动应用的应用场景
SSE 适用于在客户端与服务端之间建立实时连接，常见的应用场景有：
- 即时数据展示：例如股票价格、天气信息等实时数据的展示。
- 实时聊天：例如在线客服、即时通讯等场景。
- 实时应用状态监控：例如应用服务器的状态推送、应用日志的实时推送等。
结论
使用 Server-Sent Events 可以实现快速、简单和可靠的实时互动应用。相比于 WebSocket，它更容易安全地使用，可以使用浏览器内置的 EventSource API，对于实时通信不那么频繁的情况下，SSE 的性能也更好。在合适的应用场景下，使用 Server-Sent Events 可以提高应用程序的实时互动性。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677205386d66e0f9aad3b94d