在现代 Web 应用中，对于实时的数据更新是非常重要的。传统的轮询方式并不令人满意，因为它会导致浪费宝贵的网络带宽和服务器资源。 Server-Sent Events （SSE）是一种基于 HTTP 协议的技术，它能够实现从服务端实时推送数据给客户端，而不需要客户端不停地向服务端发起请求。
SSE 技术非常简单，它只是一个单向的持久化的连接。具有以下优点：
- 支持跨域，仅基于HTTP协议
- 实时推送数据到客户端
- 支持失败重试
SSE 的基本原理
SSE 基于 HTTP 协议，使用长轮询技术，创建一个单向、持久化的连接，从服务器实时推送数据给客户端。因为这个连接是单向的，所以客户端不能通过这个连接向服务器发送任何数据。 SSE 的架构如下所示：
- 浏览器通过 HTTP 请求与服务器建立 SSE 连接。
- 服务器返回的响应头中带有 "Content-Type: text/event-stream"，以指定该响应为 SSE 响应。
- 服务器发送包含数据的文本（events）通过 SSE 连接。
- 浏览器接收到这些数据，触发事件（Event）从而更新网页。
SSE 的事件流
SSE 数据通过事件流（Event stream）的方式传递。 事件流是一系列以 "\n"（换行字符）分隔的 event 字符串。 event 字符串包含事件类型和数据，如下所示：
------ ------- ----- ------ ------
在这个示例中，我们定义了一个名为 "message" 的事件，并将 "Hello, world!" 作为数据传输。
“event”的 字段，指定了该事件类型，而“data”字段是该事件的数据字段。当服务器发送一个事件过来时，客户端的 JavaScript 代码接收这个event字符串，并对其进行解析。
SSE 连接的建立和维持
建立 SSE 连接很简单。 客户端代码只需要像发送 AJAX 请求一样发送一个 HTTP Get 请求,并接受响应，只需设置一些特殊的响应头信息。
-- --------- ----- --------- - --- ----------------------------- ------------------- - ----------- - ---------------------- -------- --
浏览器端向 "/api/sse/path" 发送了一个 GET 请求，该请求将被服务器解析为 SSE 连接，然后在响应头中返回以下信息：
-------- --- -- ------------- ----------------- -------------- -------- ----------- ----------
服务器就开始向该 SSE 连接发送数据。
为了保持这个 SSE 连接的存活，浏览器和服务器之间需要发送数据。 如果 SSE 连接在一段时间内未能接收到数据，它就会被浏览器视为关闭，或假死。 因此，我们需要在服务端定期发送“心跳”事件，以保持连接的存活。
SSE 的重连机制
如果 SSE 连接的数据传输被中断，客户端会自动尝试重新连接，从而保证 SSE 的长时间存活。
- SSE 与 WebSocket 的区别
WebSocket 是一种双向通信协议，而 SSE 在一种单向通信协议。
WebSocket 其实实现了一个长轮询，只是协议和头有所改变。而SSE是对长轮询的封装形式。并且WebSocket比SSE更为强大，可以扩展和升级之前的HTTP协议。换句话说，WebSocket 支持双向通信，而 SSE 仅支持单向，而且 WebSocket 比 SSE 更容易扩展和升级。
SSE 在多个客户端中的应用
在实际应用中，需要将 SSE 连接从服务端传递给多个客户端。这通常可以通过存储 SSE 连接的列表来实现。当新的客户端到达时，服务器会将 SSE 连接添加到列表中。 然后，在服务器发送 SSE 事件时，它将转发事件给所有客户端列表中的 SSE 连接。
下面是一个 Node.js 服务器示例，在这个示例中，我们使用 Node.js 的 Express 框架来处理 SSE 请求，使用 Node.js 内置的 EventEmitter 进行事件管理：
-- -------------
----- ------- - -------------------
----- ------------ - -------------------------------
----- --- - ----------
-- ---- --- ---------
----- -------- - --- ---------------
-- ------------
------------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
----------- -------------
---
---------------------- ------ -- -
---------------- ------------------------------
---
---
-- -----------
---------------------------- ----- ---- -- -
----- ---- - ---------
------------------------ ------
--------------------------------
---
---------------- -- -- -
------------------- ------- -- ---- -------
---在客户端上的 JavaScript 代码如下所示：
-- ---------
----- ------ - --- ------------------------
---------------- - ----------- -
---------------------- --------
--
-- --------
--- --- - --- -----------------
---------------------- - ---------- -
-- --------------- --- ------------------- -- ---------- --- ---- -
-------------------- ---------- ------------------
-
--
---------------- --------------------
------------------------------------ ----------------------------------
------------------------- -------- ------ ---- -------- ----在这个示例中，当客户端发送 POST 请求到服务器时，服务器会将其转发到连接列表中的每个 SSE 连接。 SSE 连接会将数据转发给所有客户端，在这个示例中，将在浏览器中的 console.log() 中打印消息。
总结
使用 SSE 技术可以实现服务器对多个客户端实时推送数据，从而提高系统的实时性。使用 SSE 技术可能需要一些服务器端的支持，但是它可以通过简单的 JavaScript 代码轻松地集成到任何现代 Web 应用程序中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6590d98aeb4cecbf2d61fd52