Server-sent Events 如何实现浏览器与服务器之间的双向通信

阅读时长 4 分钟读完

随着 Web 技术的不断发展,前端应用的复杂度在不断提高,因此需要与服务器进行更加高效的双向通信。Server-sent Events 是一种比较新的技术,可以实现浏览器与服务器之间的实时通信。本文主要介绍 Server-sent Events 的实现方式,以及如何在前端应用中使用他。

Server-sent Events

Server-sent Events (SSE) 是一种通过 HTTP 实现浏览器与服务器之间实时通信的技术。具体的实现方式是,服务器使用 SSE 协议在一个持久连接上向客户端发送数据流,浏览器则通过 EventSource 对象接收这些数据。相比起其他技术,如 WebSocket、Comet 等,SSE 具有轻量、易用等特点。

SSE 数据流的格式如下:

其中,event 是自定义的事件名称,data 是实际的消息内容。两个 \n 是整个数据流的结束符。如果不需要使用事件名称,则 event 可以省略。

SSE 的实现方式

Node.js 服务器端实现

在 Node.js 环境下,可以使用 http 模块来实现 SSE 服务器端的代码。可参考以下示例:

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

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

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

---

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

以上代码中,当浏览器向 http://localhost:3000 发送一个 GET 请求时,会返回一个 SSE 数据流,其中每隔 1 秒会发送一次当前时间的消息。

前端浏览器端实现

在浏览器端,可以使用 EventSource 对象来接收 SSE 数据流,并使用回调函数处理这些数据流。具体的示例代码如下:

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

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

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

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

以上代码中,eventSource 是 EventSource 对象,可以通过传入一个 URL 在浏览器端建立 SSE 连接。接下来,对于从服务器端发送过来的消息,可以使用 message 事件进行处理。同时,也可以监听 openerror 事件。

用途和指导意义

SSE 技术适用于需要实时处理数据的应用场景。比如在线聊天、实时数据监控和更新等。在此基础上,可以结合其他技术,如 Vue、React 等,实现更为高效的前端应用。同时,SSE 技术的轻量性和易用性,也为前端程序员提供了另一种实时通信的选择。

总结

本文主要介绍了 Server-sent Events 技术的工作原理、实现方式以及应用场景。在实际的开发中,可以通过 Node.js 和浏览器端的 EventSource 对象,快速搭建起一个 SSE 的实时通信系统。在前端应用的开发中,SSE 技术也将成为一种很好的实时通信选择。

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

纠错
反馈