SSE 服务实现网络大数据推送技术-JavaScript中文网-JavaScript教程资源分享门户

背景

在现代 Web 应用中，很多场景需要实时或准实时的大数据展示或处理，比如股票行情、聊天室、监控等。这些场景通常需要一个实时的数据通信机制，能够实时推送数据给前端页面，让页面可以即时响应并展示数据。

WebSocket

首先想到的可能是 WebSocket，WebSocket 是 TCP 协议上的双向通信协议，它能够在客户端和服务器之间创建持久性的连接，实现实时双向数据通信。不过它的缺点也明显，需要额外的握手，需要服务器端支持，不适合长轮询的场景。

SSE

应对这种场景，可以使用 SSE（Server-Sent Events）技术，它是一种无需握手，服务器可以即时向客户端推送数据的协议。SSE 是一个基于 HTTP/1.1 的协议，它的实现纯属浏览器和服务器的工作，客户端不需要额外的插件或库即可使用。

实现方式

服务器端

服务器端需要按照 SSE 约定的协议格式向客户端发送数据，具体的协议格式如下：

event: <event-name>
data: <data>\n\n

其中 event-name 表示事件名，data 表示数据。

以下是 Node.js 中使用 SSE 推送数据的示例代码：

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

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

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

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

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

该示例代码每秒向客户端推送一个当前时间值，并在数据前加上 event: myEvent，表示事件名为 myEvent。请注意，这里每次推送数据时，必须加上 \n\n，表示一次 SSE 事件的结束。

客户端

在客户端可以使用 JavaScript 的 EventSource 对象来接收 SSE 发送的事件和数据。

以下是使用 EventSource 对象接收 SSE 数据的示例代码：

const es = new EventSource('/sse');

es.addEventListener('myEvent', (event) => {
  console.log(event.data); // 输出推送的数据
});

注意点

请注意，SSE 推送的数据量不能过大，推送的速率也需要控制，否则会对带宽造成负担，对应用程序产生不良影响。

结论

SSE 可以适用于需要时间即时性数据推送场景，并且相当容易实现。不过，它的局限性在于其只能从服务器慢慢地推送单向的消息，与 WebSocket 的双向通讯相比，功能上有限制。因此，在实际项目实现时，需要根据具体情况来选择 WebSocket 或 SSE 等实现技术。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/671c90419babaf620fb15619