前端实现 Server-Sent Events 的方法

什么是 Server-Sent Events

Server-Sent Events (SSE) 是一种服务器向客户端发送实时事件流的技术。与 WebSocket 相比,SSE 只能从服务器向客户端发送数据,但它比 WebSocket 更简单易用,可以轻松地实现实时通信。

SSE 需要使用 EventSource 对象来接收事件流。EventSource 对象会自动处理连接、重连、错误等问题,使得开发者可以专注于处理收到的事件。

如何实现 SSE

服务端

在服务端,需要发送特定格式的事件流。每个事件都由一个 event 字段和一个 data 字段组成,以“\n\n”(两个换行符)结尾。例如:

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

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

其中,event 字段表示事件名称,data 字段表示事件内容。可以使用 PHP、Node.js、Java 等语言来实现 SSE。

以下是一个使用 Node.js 实现 SSE 的示例:

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

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

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

客户端

在客户端,需要使用 EventSource 对象来接收事件流。创建 EventSource 对象时,需要传入服务器端 SSE 的 URL。例如:

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

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

当服务器端发送事件时,EventSource 对象会自动触发 onmessage 事件,并传入包含事件信息的 event 对象。event 对象包含以下属性:

  • data:事件内容
  • lastEventId:最后一个事件的 ID
  • origin:服务器地址
  • type:事件名称
  • source:EventSource 对象

以下是一个完整的 SSE 示例代码:

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

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

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

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

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

总结

通过本文的介绍,我们了解了 Server-Sent Events 技术的基本原理和使用方法。SSE 可以用于实现实时通信、推送通知等场景,可以提高用户体验,减少网络传输量。希望本文对您有所帮助。

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