SSE 的优缺点及应用场景介绍-JavaScript中文网-JavaScript教程资源分享门户

Server-Sent Events （SSE）是一种新的 Web 技术，用于实现浏览器和服务器之间的基于事件的通信。它允许服务器在连接保持打开的情况下，向浏览器发送数据，而不是像传统的 Ajax 请求一样，每次都需要重新建立连接。

SSE 的优点

实时性高

使用 SSE，服务器可以及时将新数据推送到客户端，而无需客户端不断地从服务器轮询数据。

更具可读性

相比于其他推送技术，如 WebSockets 或 Comet，SSE 使用 HTTP 协议，更具有可读性，并允许充分利用现有的 HTTP 标准。

更适合长轮询

SSE 使用长轮询（长连接），相比于短轮询来说，减少了网络负荷和服务器负担，同时可避免短轮询的无效请求问题。

更容易处理错误

SSE 利用 HTTP 的响应码，可以更容易地处理错误，以及与其他 HTTP API 结合使用。

SSE 的缺点

浏览器兼容性

虽然 SSE 是面向标准的技术，但有些旧版本的浏览器不支持 SSE。

只能支持单向通信

SSE 只能支持单向通信，即从服务器到客户端的数据流。

无法处理大量数据

SSE 是基于 HTTP 的，因此像 WebSocket 这样的双向通信技术，更适合在需要频繁通信的情况下。

实战应用场景

实时数据显示

SSE 是不断将数据推送给客户端，因此它很适合用于实时数据显示（比如股票价格、实时新闻等）的应用场景。

应用程序通信

SSE 不需要客户端主动请求数据，这使得它很适合用于应用程序之间通信的场景，例如多人编辑文章或协作任务应用程序。

实现 SSE 的示例代码

本示例是一个使用 SSE 在服务器上生成实时数据的基本示例。我们将使用 Node.js 构建服务器，以及 SSE 技术将事件数据添加到客户端。

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

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

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

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

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

在浏览器上运行下面的 JavaScript 代码，您将看到 SSE 在客户端上显示的实时数据：

const eventSource = new EventSource('http://localhost:3000');
eventSource.onmessage = function(event) {
   console.log(event.data);
};

结论

SSE 可以在一些特定的场景下有着不错的应用效果，但相对其他推送技术而言，它并不能完全替代它们。作为一种基于 HTTP 的技术，SSE 不需要特殊的协议，并且可以很好地与现有的 Web 技术协作，使得它在一些情况下更易于使用。

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