什么是 SSE？
SSE（Server-Sent Events）是一种服务器向客户端发送事件的技术。它允许服务器实时推送数据到客户端，而无需客户端请求数据。SSE 基于 HTTP 协议，使用简单，易于实现。
SSE 的优势
与传统的轮询和长轮询相比，SSE 有以下优势：
实时性更好：客户端可以在服务器有新数据时立即收到通知，而不需要等待轮询的周期。
可扩展性更好：SSE 使用了持久连接，可以支持大量的客户端连接，而不会对服务器造成太大的压力。
简单易用：SSE 使用了 HTTP 协议，无需额外的握手和认证，使用起来非常简单。
SSE 的使用方法
服务器端
在服务器端，我们需要创建一个 SSE 连接，并向客户端发送数据。下面是一个使用 Node.js 实现 SSE 的例子：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- ----------------------------
-- ------
----------------在这个例子中，我们创建了一个 HTTP 服务器，并在每秒钟向客户端发送当前时间。注意，我们使用了 text/event-stream 作为 Content-Type，这是 SSE 的标准格式。同时，我们也设置了 Cache-Control 和 Connection 头，以确保 SSE 连接不被缓存和关闭。
客户端
在客户端，我们可以通过 JavaScript 创建一个 SSE 连接，并接收服务器发送的数据。下面是一个使用 jQuery 实现 SSE 的例子：
$(function() {
const source = new EventSource('/sse');
source.addEventListener('message', function(event) {
$('#output').text(event.data);
});
});在这个例子中，我们使用了 jQuery 的 EventSource 对象来创建 SSE 连接，并在收到数据时更新页面上的输出。注意，我们指定了 SSE 连接的 URL，这应该与服务器端的 URL 一致。
SSE 的最佳实践
使用正确的 Content-Type
SSE 的 Content-Type 应该设置为 text/event-stream，而不是 text/plain 或其他类型。这可以让浏览器正确地处理 SSE 数据，避免出现错误。
发送正确的 HTTP 头
在服务器端，我们需要发送正确的 HTTP 头，以确保 SSE 连接的可靠性。具体来说，我们应该设置以下头信息：
Content-Type: text/event-stream：指定 SSE 的数据格式。Cache-Control: no-cache：禁用缓存，避免 SSE 连接被缓存。Connection: keep-alive：保持连接，避免 SSE 连接被关闭。
处理连接错误
SSE 连接可能会出现错误，例如网络中断、服务器关闭等。为了确保 SSE 连接的可靠性，我们应该在客户端处理这些错误，并及时重连。
-- -------------------- ---- -------
------------ -
----- ------ - --- --------------------
---------------------------------- --------------- -
------------------------------
---
-------------------------------- --------------- -
-- ------------------------ --- ------------------- -
---------------- ---------- ----------
- ---- -
---------------- ---------- ---------
---------------
--------------------- -
------------------
-- ------
-
---
---在这个例子中，我们使用了 error 事件来处理 SSE 连接的错误。如果连接被关闭，我们只需要输出一条日志即可；如果连接出现错误，我们需要关闭连接，并设置一个定时器，在 3 秒后重新加载页面，以尝试重新连接。
结论
SSE 是一种实时推送数据的技术，可以提高网站的实时性和可扩展性。在使用 SSE 时，我们应该注意设置正确的 Content-Type 和 HTTP 头，处理连接错误，并遵循最佳实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673fe3a25ade33eb723159d8