SSE 推送数据格式转换的方法与实现-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSE

SSE（Server-Sent Events）是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送实时事件流。相比 WebSocket，SSE 更加轻量级，适合于一些简单的实时通信场景。

SSE 的特点是单向通信，只能由服务器推送数据到客户端，而客户端无法向服务器发送数据。

SSE 数据格式

SSE 的数据格式比较简单，每个事件都由以下三个部分组成：

事件标识符（event）
数据字段（data）
注释字段（comment）

其中，事件标识符和注释字段都是可选的，数据字段是必须的。事件标识符用于标识事件的类型，而注释字段则用于传递一些额外的信息。

一个 SSE 事件的格式如下：

event: eventType
data: eventData
: comment

其中，eventType 和 eventData 都是字符串，comment 是注释字段，可以为空。

数据格式转换的方法

在实际开发中，我们可能需要将一些复杂的数据类型转换为 SSE 数据格式，以便向客户端推送实时数据。这时，我们可以使用一些工具函数来完成转换。

将 JSON 转换为 SSE 数据格式

将 JSON 对象转换为 SSE 数据格式的方法比较简单，只需要将 JSON 对象的属性拼接成 SSE 数据格式即可。以下是一个将 JSON 对象转换为 SSE 数据格式的示例代码：

function jsonToSse(json) {
  let sse = '';
  for (let key in json) {
    sse += `data: ${key}: ${json[key]}\n`;
  }
  return sse;
}

该函数将 JSON 对象的属性名作为事件标识符，属性值作为数据字段。

将数组转换为 SSE 数据格式

将数组转换为 SSE 数据格式的方法与将 JSON 对象转换为 SSE 数据格式的方法类似，只需要将数组中的元素拼接成 SSE 数据格式即可。以下是一个将数组转换为 SSE 数据格式的示例代码：

function arrayToSse(arr) {
  let sse = '';
  arr.forEach((item) => {
    sse += `data: ${item}\n`;
  });
  return sse;
}

该函数将数组中的元素作为数据字段。

实现 SSE 数据推送

在实际开发中，我们需要使用服务器端的语言来实现 SSE 数据推送。以下是一个使用 Node.js 实现 SSE 数据推送的示例代码：

// www.javascriptcn.com code example
const http = require('http');

http.createServer((req, res) => {
  if (req.url === '/sse') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });
    setInterval(() => {
      const data = {
        time: new Date().toLocaleTimeString(),
        message: 'Hello, world!'
      };
      res.write(`data: ${JSON.stringify(data)}\n\n`);
    }, 1000);
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(`
      <html>
        <head>
          <title>SSE Test</title>
        </head>
        <body>
          <h1>SSE Test</h1>
          <script>
            const eventSource = new EventSource('/sse');
            eventSource.addEventListener('message', (event) => {
              console.log(event.data);
            });
          </script>
        </body>
      </html>
    `);
  }
}).listen(3000);

该代码创建了一个 HTTP 服务器，并在 /sse 路径上实现了 SSE 数据推送。每秒钟向客户端推送一个包含当前时间和一条消息的 JSON 对象。

客户端代码使用了浏览器内置的 EventSource 对象来接收 SSE 数据，并在控制台输出。

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

SSE 推送数据格式转换的方法与实现