Server-sent Events 带来的服务端推送

阅读时长 5 分钟读完

简介

Server-sent Events(服务器发送事件)是一种基于 HTTP 的协议,旨在使 Web 应用程序能够从服务器自动接收推送数据。与 WebSocket 不同,Server-sent Events 的通信是单向的(即只能从服务器到客户端)。这使得它在与 Web 应用程序开发中的一些常见用例(如实时数据更新)中比 WebSocket 更加适合。

Server-sent Events 的优势在于其易于学习和使用,且对服务器和客户端的资源消耗较低。此外,Server-sent Events 还支持重新连接,因此如果连接中断,客户端将能够自动重新连接。

用法

服务端

要使用 Server-sent Events,首先需要使用正确的 MIME 类型注册服务器上的事件流(text/event-stream)。然后,可以使用以下代码向客户端发送事件数据:

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

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

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

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

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

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

如上所示,我们可以使用 EventSource 类来向客户端发送事件,并可以通过 onopen、onclose 和 onerror 等事件处理程序来观察连接状态。此外,使用 addEventListener 方法监听 message 事件,以接收从服务器传递的数据。数据通过调用 send 方法从服务器发送,可以使用 setInterval 等方法定期发送数据。

客户端

使用 Server-sent Events 的客户端代码很简单。我们只需要向服务器的事件流端点(event stream endpoint)发送 HTTP 请求即可:

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

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

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

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

以上代码创建了一个 EventSource 对象,指向服务器的事件流端点。监听 message 事件以接收从服务器传递的数据,同时也监听 onclose 和 onerror 事件处理程序以处理连接关闭和出错事件。

实战

以下是一个使用 Server-sent Events 实现实时数据更新的示例。该示例使用 Node.js 和 Express 框架实现服务器端。

服务端代码

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

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

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

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

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

如上所示,该示例代码创建了一个使用 Express 框架的 Web 服务器,并将 HTTP 配置为使用正确的 MIME 类型。然后,使用 setInterval 方法在每秒钟发送随机数据。

客户端代码

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

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

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

如上所示,客户端代码也非常简单。它向服务器的事件流端点发送 HTTP 请求,并在 message 事件上更新 HTML 元素。

总结

Server-sent Events 提供了一种有效的方法来实现从服务器自动推送数据。由于其固有的单向性,Server-sent Events 在实现特定用例时比 WebSocket 更加适合。此外,由于其对资源的消耗较少,更易于学习和使用,因此 Server-sent Events 是一种实现实时数据更新等方案的可行选项。

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

纠错
反馈