JavaScript 实现 Server-Sent Events 推送数据要点分析

什么是 Server-Sent Events？

在 Web 开发中，有时需要将服务器端产生的数据即时地推送给客户端，以实现即时通讯、实时数据更新等功能。实现这一功能的一种常用方式是使用 Server-Sent Events（简称 SSE）。

Server-Sent Events 是 HTML5 中引入的一种技术，它允许浏览器直接从服务器端接收事件流数据（包括文本、二进制数据等），并且支持自动重新连接、心跳等功能，以保持数据连接的稳定性。

实现 SSE 的要点

要实现 SSE 的推送功能，需要满足以下要点：

1. 服务器端的支持

首先，服务器端需要支持 SSE。在 Java 中，可以使用 Servlet 3.1 规范中的 HttpServletResponse 对象来实现 SSE。在 Node.js 中，可以使用第三方模块 sse 来实现：

const SSE = require('sse');

const server = http.createServer((req, res) => {
  if (req.url === '/stream') {
    const sse = new SSE(req, res);
    // ...
  }
});

2. 数据流格式的定义

SSE 的数据流使用纯文本格式，每一行都以“data: ”开头，以“\n\n”结尾。中间的数据可以自由定义。例如：

data: { "type": "message", "content": "hello world" }

data: { "type": "notification", "content": "new message received" }

可以根据具体的需求定义不同格式的数据流，但需要保证每行都以“data: ”开头，并以“\n\n”结尾。

3. 客户端的支持

客户端需要使用 JavaScript 来接收 SSE 数据流。关键在于 EventSource 对象的使用：

const source = new EventSource('/stream');
source.addEventListener('message', function(event) {
  console.log(event.data);
});

使用 EventSource 对象需注意以下几点：

• 要使用完整的 URL，包括协议、主机和端口，例如“https://www.example.com:8000/stream”；

• EventSource 对象只支持 GET 请求；

• 可以自定义事件名，例如：

  const sse = new SSE(req, res);
  sse.send({ event: 'notification', data: { message: 'hello' }});
  
  const source = new EventSource('/stream');
  source.addEventListener('notification', function(event) {
    console.log(event.data); // 输出 "{ message: 'hello' }"
  });

4. 客户端连接的维护

SSE 支持自动重新连接、心跳等功能，可以避免连接中断导致的数据丢失。在 JavaScript 中，可以设置 EventSource 对象的 retry 和 heartbeatTimeout 属性来实现这一功能：

const source = new EventSource('/stream');
source.rety = 3000; // 重新连接间隔为 3 秒
source.heartbeatTimeout = 60000; // 心跳间隔为 60 秒

示例代码

以下是一个完整的 SSE 示例代码，基于 Node.js 和 Express 框架：

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

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

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

使用浏览器打开“http://localhost:3000”，即可看到每秒多一次的“hello world”输出。

总结

通过本文的介绍，我们了解到了 Server-Sent Events 技术的实现要点，包括服务器端的支持、数据流格式的定义、客户端的支持以及连接维护。SSE 技术对于实现 Web 开发中的即时通讯、实时数据更新等功能非常重要，值得深入学习和掌握。

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