Server-Sent Events（SSE）是一种基于 HTTP 的服务器推送技术，允许服务器向客户端发送实时数据。SSE 最常用于 Web 应用程序中，以将服务器端更改的状态实时传输到客户端。SSE 可以传输文本和二进制数据。本文将介绍如何使用 SSE 实现二进制数据传输。
SSE 介绍
SSE 是一种基于文本格式的协议，它使用了类似于长轮询的机制，通过 HTTP 连接向客户端发送实时数据。SSE 的协议格式如下：
event: <event-name> data: <event-data>
其中，event 表示事件名称，可以省略；data 表示事件数据。SSE 的数据传输需要遵循以下规则：
- 每个数据块以两个换行符
\n\n结束； - 每个数据块可以包含多个行，每行以换行符
\n结束； - 行以
event:或data:开始。
SSE 的 JavaScript API 可以使用 EventSource 对象来接收服务器端发送的数据。
SSE 传输二进制数据
SSE 最初是用于传输文本数据的，但是我们也可以使用 SSE 传输二进制数据。对于二进制数据，我们需要使用 ArrayBuffer 和 Blob 对象来处理。
ArrayBuffer
ArrayBuffer 是一种包含二进制数据的缓冲区对象。我们可以使用 Uint8Array 或其他类型的 TypedArray 对象从 ArrayBuffer 中读取和写入数据。以下是一个使用 ArrayBuffer 传输二进制数据的示例：
// javascriptcn.com 代码示例
// 服务器端代码
const data = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f]); // Hello
res.write(`data: ${data}\n\n`);
// 客户端代码
const source = new EventSource('/events');
source.addEventListener('message', event => {
const data = new Uint8Array(event.data);
console.log(data); // Uint8Array [ 72, 101, 108, 108, 111 ]
});在服务器端，我们可以使用 Uint8Array 创建一个包含二进制数据的缓冲区对象，并将其发送到客户端。在客户端，我们可以通过 Uint8Array 将接收到的数据转换为二进制数据。
Blob
Blob 是一种二进制数据对象，它可以包含任意类型的数据，包括文本、二进制数据、图像等。我们可以使用 Blob 对象来传输二进制数据。以下是一个使用 Blob 传输二进制数据的示例：
// javascriptcn.com 代码示例
// 服务器端代码
const data = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f]); // Hello
const blob = new Blob([data]);
res.write(`data: ${URL.createObjectURL(blob)}\n\n`);
// 客户端代码
const source = new EventSource('/events');
source.addEventListener('message', event => {
const xhr = new XMLHttpRequest();
xhr.open('GET', event.data);
xhr.responseType = 'blob';
xhr.onload = () => {
const reader = new FileReader();
reader.onload = () => {
const data = new Uint8Array(reader.result);
console.log(data); // Uint8Array [ 72, 101, 108, 108, 111 ]
};
reader.readAsArrayBuffer(xhr.response);
};
xhr.send();
});在服务器端，我们可以使用 Blob 对象将二进制数据打包，并将其传输到客户端。在客户端，我们可以使用 XMLHttpRequest 对象来获取 Blob 对象，并通过 FileReader 将其转换为 Uint8Array。
总结
SSE 是一种实时数据传输协议，可以用于将服务器端更改的状态实时传输到客户端。SSE 可以传输文本和二进制数据。对于二进制数据，我们可以使用 ArrayBuffer 和 Blob 对象来处理。使用 SSE 传输二进制数据可以使我们更高效地传输图像、音频和视频等大型数据。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657bef2fd2f5e1655d6a480b