在前端开发中，SSE（Server-Sent Events，服务器推送事件）和长轮询是两个常见的技术，用于实现实时数据的更新和传输。但是它们各自存在着一些局限性和不足之处，因此也有一些改进的技术出现。本文将介绍 SSE 和长轮询的原理、优缺点，以及它们的改进技术。同时还会提供一些代码示例，以供读者参考和学习。

SSE 原理及优缺点

SSE（Server-Sent Events）是一种 HTML5 的新特性，通过在浏览器和服务器之间打开一个持久性连接以实现双向通信。通过 SSE，服务器可以实时向客户端推送数据，而不需要客户端主动发起请求。SSE 的数据格式是纯文本格式，而不是二进制格式，因此可以比较容易地在客户端进行处理和解析。

SSE 的优点在于：

可以实现实时推送数据，这对于网站中实时更新的数据非常有用，如聊天室、股票行情等。
比长轮询的实现要简单，只需要在服务器上设置一个事件流，并使用 JavaScript 中的 EventSource 对象进行监听即可。
数据格式简单，可以比较容易地解析并传输。

SSE 的缺点在于：

兼容性问题，SSE 并非所有的浏览器都支持。
服务器开销大，因为 SSE 需要一直保持打开的连接，而长时间的连接会占用服务器资源。
SSE 只支持文本格式的数据，这对于一些需要传输大量二进制数据的场景不太适合。

长轮询原理及优缺点

长轮询是一种模拟实时更新的技术，它通过让浏览器一直保持着一个到服务器的请求连接，并且服务器在有数据更新时再返回给浏览器数据。因此，在实际上实现了数据实时更新的目的。长轮询的数据格式通常是 JSON 格式，适合传递数据较大的场景。

长轮询的优点在于：

可以达到与 SSE 类似的实时更新效果，而且在各种浏览器上都能够支持。
能够传递 JSON 格式的数据，适合传递较大的数据量。

长轮询的缺点在于：

服务器的开销依旧比较大，需要维持长时间的连接。
在一些浏览器中，请求连接的数量会有限制，这会影响到实时更新的效果。
比 SSE 的实现要复杂，需要在客户端编写较多的 JavaScript 代码，对开发人员的技术要求较高。

SSE 和长轮询的改进及对比

作为 SSE 和长轮询的改进，近些年出现了两个类似的技术，它们分别是 WebSocket 和 Comet。

WebSocket 是一种新的协议，其目的也是为了实现双向通信，但它比 SSE 更加高效。WebSocket 带有些自定义的 HTTP 头，使得服务器可以更轻松地与客户端进行通信。同时，WebSocket 还允许在客户端和服务器之间传输二进制数据，这为传输数据提供了更多的可能性。

Comet 是一种泛指长轮询和 HTTP 流的技术，也可称为“基于事件的 Web”，通过把 HTTP 连接保持在打开状态来实现在服务器端推送数据。和长轮询相同，这种技术还存在一些缺点，如低效率、占用服务器资源等问题。

下面是 SSE 和 WebSocket 的一些对比：

特性	SSE	WebSocket
数据格式	纯文本	可以是文本，也可以是二进制
服务器开销	高	低
并发连接数	低	高
兼容性	较差	已经标准化，较好支持
数据传输效率	低	高

通过对比，我们可以发现，WebSocket 在性能、并发连接数等方面都比 SSE 更加优秀，而且在各个现代浏览器中都已得到支持。因此，在实现实时更新的需求时，推荐使用 WebSocket 技术。

SSE 的示例代码

服务器端代码：

-- -------------------- ---- -------
-- ------- ----
----- ---- - ----------------

----- ------ - -------------------------- ----- ---- -
  -- ---------- --- --
  ------------------ -
    --------------- --------------------
    ---------------- -----------
    ------------- ------------
  ---

  -------------------- -- -
    ----- ---- - --- ----------------------------
    -- ----
    ---------------- --------------
  -- ------
---

------------------- -------- -- -
  ------------------- ------- -- ---- -------
---

客户端代码：

// 浏览器代码示例
const eventSource = new EventSource('/stream');

eventSource.addEventListener('message', function (event) {
  const time = event.data;
  console.log('Server time:', time);
});

常见问题解答

如何判断服务器是否支持 SSE？

可以通过以下代码进行检测：

if (typeof EventSource !== 'undefined') {
  // 支持 SSE
} else {
  // 不支持 SSE
}

如何设置 SSE 的连接超时时间？

可以在服务器端设置一个 HTTP 头，如下所示：

-- -------------------- ---- -------
------------------ -
  -- -- --- ------- - -
  --------------- --------------------
  ---------------- -----------
  ------------- -------------
  -------------------- -----
  ------------------------- ----------
  ------------- ----------- ---------
---

如何使用 SSE 实现客户端向服务器的数据传输？

虽然 SSE 通常是服务器向客户端传输数据，但也可以通过额外的请求参数（如 URL 查询字符串、POST 数据等）来实现客户端向服务器的数据传输。下面是一个简单的示例代码：

-- -------------------- ---- -------
-- ------
-------------- -------- ------- -
  ------------------- ------- ------------------
  ---------------- ------ -------- ----------------------------
---

-- -----
----- --- - --- -----------------
---------------- ------------------ ------
------------------------------------ ----------------------------
------------------

SSE 和 WebSockets 的区别是什么？

SSE 和 WebSocket 都是用于实现双向通信的技术，但它们的实现方式有所不同，WebSocket 比 SSE 更加高效。具体区别可参见上文的对比表格。

结论

通过本文的介绍，我们了解了 SSE 和长轮询的原理、优缺点及其改进技术。同时，我们也提供了一些代码示例，方便读者进行学习和参考。在实际开发中，开发人员需要根据具体的需求和场景，从中选择一种合适的技术来进行使用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6745583fc1a23897ea91f055

SSE 与长轮询的改进及对比