SSE 的使用之优点与限制

阅读时长 3 分钟读完

在了解 SSE(Server-Sent Events,服务器发送事件)的优点与限制之前,需要先明确 SSE 的基本概念。SSE 是一种 HTML5 技术,用于在客户端与服务器之间建立单向连接,使服务器能够向客户端推送实时数据,而无需客户端轮询请求。

优点

简单易用

相较于 WebSockets,SSE 可谓是简单易用。客户端只需要通过 EventSource API 建立 SSE 连接,即可不间断地从服务器接收事件流。服务器则只需重复发送格式良好的文本响应,无须处理 WebSocket 协议层次的封装与解答等操作。

实现实时更新功能

由于 SSE 非阻塞、长连接的特性,非常适合用于实时更新类型的功能。比如股票行情、在线协作工具等,可以通过 SSE 实时向客户端推送最新信息,而用户也可以立刻看到数据的变化。这些应用通常需要及时传达信息。相对于轮询与繁琐的回调机制,使用 SSE 能使实现变得更为简单和高效。

容错性较高

由于 SSE 使用纯文本格式并且是单向通信,所以可以使用普通 HTTP 请求进行传输。这就意味着,SSE 在面对浏览器或者服务器的错误时,能够保持容错性。当连接断开后,EventSource API 会自动重连,并且在出现故障时提供错误处理的选项。

限制

不支持跨域的 cookie

与 WebSocket 相比,SSE 有一个很明显的限制:不支持跨域的 Cookie。这是因为 SSE 基于 HTTP1.1 协议,浏览器端无法将 cookie 发送到不同域名的服务器上。我们可以考虑使用 JWT 等其他方式进行身份验证。

一般只适用于服务端推送场景

由于 SSE 是单向通信(从服务器到客户端),且每个 SSE 连接只能用于接收特定类型的事件流,因此 SSE 一般适用于服务器主动推送信息的应用场景。如果需要双向数据交互,推荐使用 WebSocket。

频繁连接可能导致负载压力

尽管 SSE 使用 HTTP1.1 实现,但 SSE 连接仍然需要保持打开状态。在并发连接非常多的情况下,可能会消耗大量资源进而使服务器遇到压力。

示例代码

以下是一个使用 SSE 推送当前时间戳的简单示例:

index.html 文件:

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

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

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

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

sse.php 文件:

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

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

总结

虽然 SSE 在 Web 实时更新等方面使用较为广泛,但对于一些特定场景下的实时数据推送需求,仍然非常具有优势。了解 SSE 的优缺点及使用限制,可以根据

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65c1bc26add4f0e0ffbbd0c9

纠错
反馈