浅谈使用 Server-sent Events 推送接口
当我们需要实时地将服务器端的数据推送给客户端时，Server-sent Events（简称 SSE）是一种非常有用的推送技术。不同于其他推送技术，如 WebSocket 或者 Long-Polling，SSE 仅仅依赖 HTTP 协议，不需要任何特殊的配置。
Server-sent Events 是什么？
Server-sent Events 是一种基于 HTTP 的即时消息传输技术。它以文本格式（text/event-stream）通过 HTTP 连接传输数据。SSE 可以让服务器发送任意数量的文本数据到客户端，而客户端可以在接收到数据时进行异步处理。SSE 是属于推送技术的一种，通常情况下客户端会和服务器建立持久连接，并通过该连接接收新的数据。
SSE 的基本工作原理如下：
客户端向服务器建立 HTTP 连接，并向服务器发送一个 HTTP 请求
服务器端接收到请求之后，响应一个特殊的 MIME 类型 text/event-stream，并在响应头设置 Cache-Control 字段为 "no-cache" 和 "no-store"，表明该链接不应被缓存。
服务器端会根据情况向客户端推送数据。当服务器端发送一个数据块（例如，数据块用 \n 分隔）时，客户端会自动接收到并触发事件。
SSE 的常用 API 如下：
EventSource(): 构造函数，用来创建一个 Server-sent Events 连接。它有一个参数，表示 SSE 的 URL。
onmessage: 事件，当接收到服务器端推送的消息时触发。
onerror: 事件，当连接发生错误时触发。
readyState: 属性，表示当前 SSE 的状态。
如何使用 Server-sent Events？
通过下面的代码示例，我们可以非常容易地了解如何使用 Server-sent Events。
-- -------------------- ---- -------
--------- -----
------
------
------------------ ------ ---------------
-------
------
--------
----- --- - ------------------------------
----- --- - -------------------------------
-------- ---------------- -
----- ------ - --- ---------------------
---------------- - --- -- -
------------- - ------- ----- ---------------
--
-------------- - --- -- -
------------- - ------------ ------- -----------------
---------------
--
-
----------------------------- ---------------
---------
------- ------------- ------ -------------
---- ---------------
-------
-------上述代码包含了一个简单的 HTML 页面，一个按钮和一个 DIV 元素。当点击按钮时，会调用 showServerTime 函数。
在 showServerTime 函数内部，我们首先创建了一个 EventSource 实例，设置 URL 为 /time。然后我们监听 onmessage 和 onerror 事件，当接收到服务器端推送的数据时，我们在 DIV 元素中显示服务器时间。当发生错误时，我们在 DIV 元素中显示错误信息。
最后，我们将显示服务器时间的逻辑添加到按钮的点击事件中。
SSE 的优点和缺点
SSE 与其他推送技术相比有如下优点：
仅依赖 HTTP 协议，配置简单。
可以与现有的 Web 应用程序集成，不需要特殊的客户端支持。
支持自动重连，不容易断开连接。
然而，与其他推送技术相比，SSE 也有一些缺点：
无法进行双向通信。当客户端需要给服务器发送数据时，需要通过其他方式（例如 AJAX 或者 WebSocket）。
浏览器兼容性不够好。IE 等浏览器存在一些兼容性问题。
总结
在本文中，我们介绍了 Server-sent Events 推送技术的基本原理以及如何使用它。SSE 是一种基于 HTTP 的推送技术，依赖简单，能够与现有的 Web 应用程序集成。但同时，也有一些缺点，例如无法双向通信，浏览器兼容性存在问题等。
当我们需要向客户端实时推送数据时，SSE 可以作为我们的一个优秀选择，它可以提高我们的应用程序的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f863c980a9b385b8f8f96