SSE 如何支持二进制数据传输？

简介

Server-Sent Events (SSE) 是一种服务器向客户端发送事件流的技术。这种技术可以用于实现实时通信、通知和监控等场景。SSE 的一个重要特性是支持二进制数据传输，这种方式可以提高传输效率，降低网络带宽的消耗。

实现原理

SSE 使用的协议是 HTTP 协议，而且必须使用长连接。在客户端向服务器发送 SSE 请求时，必须在请求头中携带 Accept 为 text/event-stream 和 Content-Type 为 text/event-stream：

const es = new EventSource("/server-sent-events", {
  headers: {
    "Accept": "text/event-stream",
    "Content-Type": "text/event-stream"
  }
});

服务器端接收到这种请求后，必须在 HTTP 响应头中使用 Content-Type: text/event-stream 表示响应的格式是 SSE，然后向客户端不断发送如下格式的数据：

data: Hello World\n\n

其中，data 是 SSE 数据的关键字，后面跟着的是具体的消息体，\n\n 是必须的，表示这条数据的结束。如果要在消息体中传输二进制数据，可以使用如下方式：

const encoder = new TextEncoder();
const binaryData = encoder.encode("Hello World");

const data = new Uint8Array(binaryData.length + 1);
data.set(binaryData, 0);
data.set([0x0a], binaryData.length);

这段代码把一个字符串转成 Uint8Array 类型的数据，并在结尾添加 0x0a 表示结束。然后返回给客户端的消息体就是：

data: Hello World\n

这种方式可以保持数据的完整性，可以用来传输图片、音频、视频等二进制数据。

示例代码

客户端：

// www.javascriptcn.com code example
const es = new EventSource("/server-sent-events", {
  headers: {
    "Accept": "text/event-stream",
    "Content-Type": "text/event-stream"
  }
});

es.onmessage = function(event) {
  const data = event.data;
  console.log(`Received: ${data}`);
};

服务器端：

// www.javascriptcn.com code example
const http = require("http");
const TextEncoder = require("util").TextEncoder;

const server = http.createServer((req, res) => {
  console.log(`${req.method} ${req.url}`);

  res.writeHead(200, {
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
    "Connection": "keep-alive"
  });

  const encoder = new TextEncoder();
  const binaryData = encoder.encode("Hello World");

  const data = new Uint8Array(binaryData.length + 1);
  data.set(binaryData, 0);
  data.set([0x0a], binaryData.length);

  setInterval(() => {
    res.write(`data: ${data}\n`);
  }, 1000);
});

server.listen(8080, () => {
  console.log("Server started at http://localhost:8080/");
});

结语

SSE 是一种实现实时通信的技术，可以用于 Web 应用中的消息推送、通知和监控等场景。它支持二进制数据的传输方式，可以提高传输效率和降低带宽的消耗，值得我们深入学习和应用。

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