SSE 如何实现服务器主动通知客户端的功能?

阅读时长 4 分钟读完

在 Web 应用程序中,常常需要实现实时通信功能,例如聊天室、股票行情等。而在传统的 Web 技术中,客户端要获取服务器端的数据必须通过定时轮询或 Websocket 连接方式实现,这种方式不仅增加了服务器端和客户端的网络通信负担,而且对服务器和客户端的处理性能也有极高要求,而 SSE(Server-Sent Events)技术恰好可以解决这个问题,SSE 可以直接实现服务器向客户端推送数据的功能,无须客户端发起请求,提供了一种简单高效的实时交互解决方案。

SSE 简介

SSE 是一种建立在 HTTP 协议基础上的服务器向客户端单向发送事件流的 Web 技术。SSE 通常被用来推送实时数据到客户端,例如 Web 应用程序中的通知,或者股票行情等实时数据。SSE 基于服务器端的 EventSource 接口实现,客户端可以通过 JavaScript 的 EventSource API 接收服务器端推送来的数据。

客户端与服务器端之间的通信是基于 HTTP 协议的,通过 HTTP HEAD 请求,建立持久连接。一旦连接建立,服务器端就可以开始不间断地发送事件流,直到连接被关闭。SSE 的数据传输方式是文本格式,因此它比 WebSocket 更容易理解和实现,并且在大多数现代浏览器中都得到了很好的兼容性支持。

SSE 实现

SSE 的实现可以分为客户端和服务器端两个部分。

客户端实现

在客户端内部,SSE 通过 JavaScript 的 EventSource 对象实现。客户端可以通过创建 EventSource 对象来建立 SSE 连接,并通过监听 message 事件来接收来自服务器端的推送数据。

下面是一个简单的示例代码,演示了如何使用 EventSource 对象来建立 SSE 连接:

在上面的代码中,我们创建了一个 EventSource 对象,并通过指定服务器 SSE 终端的 URL(此处为 '/sse')来建立持久连接。建立连接后,我们可以通过事件监听机制去接收来自服务器的推送数据,并在控制台中打印输出。

服务器端实现

在服务器端实现 SSE 的过程中,我们需要提供一个路由接口用于客户端建立连接,同时编写代码来向客户端不断发送事件流数据。

在 Node.js 环境中,我们可以使用 http.createServer() 创建 HTTP 服务器实例,并监听客户端的请求。当客户端请求 SSE 终端时,我们需要在响应头中添加 'Content-Type': 'text/event-stream''Cache-Control': 'no-cache' 两个字段,通知浏览器建立 SSE 连接。

然后我们可以将事件流数据通过 response.write() 方法不断写入响应体中,分别使用 data:event:id: 三个字段表示数据、事件和数据序列的 ID。

以下是一个简单的 Node.js 示例:

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

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

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

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

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

在上面的代码中,我们首先判断客户端请求的 URL 是否为 '/sse',若是则设置响应头获知客户端 SSE 连接已建立。然后我们使用 setInterval() 不断向客户端发送带有事件和数据的响应数据。

总结

SSE 是一种服务器向客户端推送实时数据的高效方案,相较于轮询和 Websocket 连接,它更加轻量级和易于实现。令人惊叹的是,这种 Web 技术居然可以通过 HTTP 协议来实现。

利用 EventSource 对象和 SSE 协议,我们可以实现 Web 应用程序中实时化的功能,例如聊天室、股票行情等,其实现方式也相对简单。

现在,你可以尝试上述示例代码,建立简单的 SSE 连接并向客户端推送实时数据,同时,也可以通过 SSE 实现更多新奇的 Web 应用程序。

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

纠错
反馈