前言
当我们的 Web 应用需要实时更新数据时，有多种方式可以实现，如 Ajax 轮询、WebSockets、Comet 等。不过，它们均不是基于标准协议的，或是需要依赖于复杂的其他服务器组件，比如 转发器或消息队列。而另一种实现 Web 实时通信的方式是基于 Server-Sent Events （简称 SSE，又称服务器推送），这是一个标准化的浏览器和服务器的交互技术，而且能够用简单的 JavaScript 代码实现。
本文将讲解的内容:
- 理解 SSE
- 如何在服务端启动 SSE
- 如何在客户端接收 SSE
理解 SSE
SSE 是一种单向通信协议，它允许服务器向客户端推送数据。与 Ajax 轮询不同的是，SSE 是服务器将数据推送到客户端，而不是客户端主动向服务器寻求数据。这样可以减少服务器不必要的负载，不需要频繁的 HTTP 请求和响应。
SSE 的优点
- 实现简单：相比于其他实现实时更新的技术， SSE 的实现比较简单，只需要几行代码即可。
- 基于 HTTP 协议：SSE 请求和响应都是 HTTP，即使在高度安全的环境中，也比 WebSocket 更容易实施。
- 可靠性高：SSE 充分考虑了在浏览器和服务器之间的稳定性和可靠性，支持自动重连，保证了数据的可靠传输。
SSE 如何工作
SSE 是基于 HTTP 协议的，它定义了一种格式，服务器将数据以这种格式推送给客户端。SSE 的格式如下：
-------- --- -- ------------- ----------------- -------------- -------- ----------- ---------- ------ ------ ----- ----- ----- --- -----
各字段的含义：
HTTP/1.1 200 OK：HTTP 响应码和响应头。Content-Type: text/event-stream：告诉浏览器返回的是一条 SSE。Cache-Control: no-cache：告诉浏览器不要缓存 SSE。Connection: keep-alive：告诉浏览器保持连接状态，保证 SSE 实时性。event: update：事件类型，可以自定义。data: Hello SSE：事件数据。
如何在服务端启动 SSE
我们可以使用 Node.js 来启动 SSE。Node.js 提供了 http 模块，可以用来创建一个 HTTP 服务器。我们需要监听客户端的请求，当有请求时，向客户端推送数据，以达到实时更新数据的目的。
----- ---- - ----------------
----- ---- - ---------------- -- ----- -------
----------------------- ---- -- -
------------------- ----
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-----------
----- ---- - -
------ ---------
-------- ------- -----
--
----- ------- - ------ -----------------------------
------------
-------------- -- -
-------------------
-- ------
--------------- -- -- -
------------------- --------- -- ---- ----------
---如何在客户端接收 SSE
要接收 SSE，我们可以使用 EventSource 对象。EventSource 是一个 API，它是浏览器内置的接收 SSE 的对象。在客户端代码中，我们只需要向服务端发送 SSE 请求，然后接收 SSE 数据，并进行相应的处理。
----- ----------- - --- -------------------- --------------------- - --------------- - ----- ---- - ----------------------- --------------------------- ------------------ --
代码示例
服务端代码：
----- ---- - ----------------
----- ---- - ---------------- -- ----- -------
----------------------- ---- -- -
------------------- ----
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-----------
----- ---- - -
------ ---------
-------- ------- -----
--
----- ------- - ------ -----------------------------
------------
-------------- -- -
-------------------
-- ------
--------------- -- -- -
------------------- --------- -- ---- ----------
---客户端代码：
----- ----------- - --- -------------------- --------------------- - --------------- - ----- ---- - ----------------------- --------------------------- ------------------ --
总结
SSE 是实现 Web 实时通信的一种简单的方式，它能够简化我们的代码，并且在可靠性和性能方面都有所提升。SSE 在实时数据更新和在线监控等场景中，有着广泛的应用，值得我们去研究和使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6475d1a3968c7c53b02d2f71