当前位置：首页 > 科技 > 软件

高效传输大的 JSON 数据，流式处理真香！

来源：责编：时间：2024-05-16 17:38:14 86观看

导读什么是 TextDecoder APITextDecoder[1] API 是一个用于将二进制数据（通常是 ArrayBuffer 或 TypedArray）解码为字符串的 JavaScript API。它是 Web 平台的一部分，主要用于处理文本编码的解码工作。比如，从服务器接收到的

什么是 TextDecoder API

TextDecoder[1] API 是一个用于将二进制数据（通常是 ArrayBuffer 或 TypedArray）解码为字符串的 JavaScript API。它是 Web 平台的一部分，主要用于处理文本编码的解码工作。比如，从服务器接收到的流式数据、文件数据等。

为什么使用 TextDecoder API

在处理 Web 应用中的二进制数据时，通常需要将这些数据转换为可读的字符串格式。TextDecoder 提供了一种高效且便捷的方法来实现这一点。

TextDecoder API 有以下特点：

高效性：比手动逐字节处理高效，能够直接解码为字符串。
支持多种编码：支持多种文本编码（如 UTF-8、UTF-16、ISO-8859-1 等），提供了灵活性。
支持流式处理：能够逐块处理数据，适合处理大数据流或需要实时处理的数据。

如何使用 TextDecoder API

下面我们将介绍 TextDecoder API 的四种使用场景：

解码 ArrayBuffer 数据
解码不同编码的二进制数据
解码流式 JSON 数据
解码大 JSON 文件中的数据块

1.解码 ArrayBuffer 数据

// 创建一个包含 UTF-8 编码文本的 Uint8Arrayconst uint8Array = new Uint8Array([72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]);// 创建一个 TextDecoder 实例，默认使用 UTF-8 编码const decoder = new TextDecoder('utf-8');// 将 Uint8Array 解码为字符串const decodedString = decoder.decode(uint8Array);console.log(decodedString); // 输出 "Hello World"

2.解码不同编码的二进制数据

// 使用不同的编码创建 TextDecoder 实例const utf16Decoder = new TextDecoder('utf-16');const iso88591Decoder = new TextDecoder('iso-8859-1');// 示例二进制数据const utf16Array = new Uint16Array([0x0048, 0x0065, 0x006C, 0x006C, 0x006F]);const iso88591Array = new Uint8Array([72, 101, 108, 108, 111]);// 解码为字符串const utf16String = utf16Decoder.decode(utf16Array);const iso88591String = iso88591Decoder.decode(iso88591Array);console.log(utf16String); // 输出 "Hello"console.log(iso88591String); // 输出 "Hello"

3.解码流式 JSON 数据

首先，我们先来看一下效果：

图片

在以上的示例中，我们使用 Node.js 的 http 模块，快速搭建一个本地 SSE[2]（Server-Sent Events）服务器。

server.js

const http = require("http");const PORT = 3000;const server = http.createServer((req, res) => {  if (req.url === "/sse") {    res.writeHead(200, {      "Content-Type": "text/event-stream",      "Cache-Control": "no-cache",      Connection: "keep-alive",      "Access-Control-Allow-Origin": "*",      "Access-Control-Allow-Headers":        "Origin, X-Requested-With, Content-Type, Accept",    });    let id = 1;    const interval = setInterval(() => {      const data = {        id: id,        message: `This is message ${id}`,        timestamp: +new Date(),      };      res.write(`data: ${JSON.stringify(data)}/n/n`);      // 停止条件      if (id == 5) {        res.write("event: end/n");        res.write("data: End of stream/n/n");        clearInterval(interval);        res.end();      }      id++;    }, 1000);    req.on("close", () => {      clearInterval(interval);    });  } else {    res.writeHead(404, { "Content-Type": "text/plain" });    res.end("404 Not Found");  }});server.listen(PORT, () => {  console.log(`Server is running on http://localhost:${PORT}`);});

需要注意的是，在 sse 接口中，我们设置 Content-Type 响应头的类型为： "text/event-stream"，告诉客户端我们返回的是流式数据。

index.html

⚠️：访问 index.html 网页前，记得运行 node server.js 命令先启动 SSE 服务器。

<!-- public/index.html --><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>SSE & TextDecoder</title></head><body>    <h1>Decode Server-Sent Events JSON Stream Data</h1>    <div id="messages"></div>    <script src="client.js"></script></body></html>

client.js

document.addEventListener("DOMContentLoaded", () => {  const messagesDiv = document.querySelector("#messages");  const textDecoder = new TextDecoder("utf-8");  fetch("http://localhost:3000/sse").then((response) => {    const reader = response.body.getReader();    return new ReadableStream({      start(controller) {        function push() {          reader.read().then(({ done, value }) => {            if (done) {              controller.close();              return;            }            const chunk = textDecoder.decode(value, { stream: true });            const lines = chunk.split("/n");            for (const line of lines) {              if (line.startsWith("data: ")) {                const json = line.slice(6);                const data = JSON.parse(json);                const p = document.createElement("p");                p.textContent = `ID: ${data.id}, Message: ${data.message}, Timestamp: ${data.timestamp}`;                messagesDiv.appendChild(p);              } else if (line.startsWith("event: end")) {                const p = document.createElement("p");                p.textContent = "End of stream";                messagesDiv.appendChild(p);                return;              }            }            push();          });        }        push();      },    });  });});

SSE 事件流是一个简单的文本数据流，文本是使用 UTF-8 格式的编码。所以，在创建 textDecoder 对象时，我们需要设置它的编码为 utf-8。有了 textDecoder 对象后，调用它提供的 decode 方法就可以进行解码了。

4.解码大 JSON 文件中的数据块

当遇到传输大 JSON 数据的时候，如果使用传统的方式，我们需要接收完整的 JSON 数据后，才能开始进行数据处理，这对用户体验会造成一定的影响。为了解决这个问题，我们可以使用一些现成的 JSON Stream 解析库。比如，@streamparser/json[3]，该库内部也使用了本文介绍的 TextDecoder API。

下面，我们先来看一下效果：

上图中输出的 JSON 数据来自以下的 large.json 文件。我们对该文件按照 0.5KB 的大小进行切割，然后每个 500ms 发送下一个数据块。利用 @streamparser/json 这个库，我们实现了解析 JSON 数据流（JSON Chunk）的功能。

large.json

[  {},  {    "image": [      {        "shape": "rect",        "fill": "#333",        "stroke": "#999",        "x": 0.5e1,        "y": 0.5,        "z": 0.8,        "w": 0.5e5,        "u": 2e10,        "foo": 2e1,        "bar": 2,        "width": 47,        "height": 47      }    ],    "corners": { "1": true, "3": true, "7": true, "9": true }  }, ...]

json-server.js

const http = require("http");const { join } = require("path");const { readFileSync } = require("fs");const PORT = 3000;const largeJson = readFileSync(join(__dirname, "large.json")).toString();const server = http.createServer((req, res) => {  if (req.url === "/stream-json") {    res.writeHead(200, {      "Content-Type": "application/json",      "Cache-Control": "no-cache",      Connection: "keep-alive",      "Access-Control-Allow-Origin": "*",      "Access-Control-Allow-Headers":        "Origin, X-Requested-With, Content-Type, Accept",    });    const CHUNK_SIZE = 512; // 每块 0.5KB    let position = 0;    const interval = setInterval(() => {      const chunk = largeJson.slice(position, position + CHUNK_SIZE);      res.write(chunk);      position += CHUNK_SIZE;      if (position >= largeJson.length) {        clearInterval(interval);        res.end();      }    }, 500); // 每 500ms 发送一块数据    req.on("close", () => {      clearInterval(interval);    });  } else {    res.writeHead(404, { "Content-Type": "text/plain" });    res.end("404 Not Found");  }});server.listen(PORT, () => {  console.log(`Server is running on http://localhost:${PORT}`);});

stream-json.html

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Stream JSON</title>  </head>  <body>    <h1>Stream JSON</h1>    <div id="messages"></div>    <script type="module">      import { JSONParser } from "https://cdn.jsdelivr.net/npm/@streamparser/json-whatwg@0.0.21/+esm";      const messagesDiv = document.querySelector("#messages");      document.addEventListener("DOMContentLoaded", async () => {        const parser = new JSONParser();        const response = await fetch("http://localhost:3000/stream-json");        const reader = response.body.pipeThrough(parser).getReader();        while (true) {          const { done, value: parsedElementInfo } = await reader.read();          if (done) break;          const { value, key, parent, stack, partial } = parsedElementInfo;          if (partial) {            console.log(`Parsing value: ${value}... (still parsing)`);          } else {            const p = document.createElement("p");            p.textContent = `${JSON.stringify(value)}`;            messagesDiv.appendChild(p);            console.log(`Value parsed: ${JSON.stringify(value)}`);          }        }      });    </script>  </body></html>

@streamparser/json 这个库还有其他的用法，如果你感兴趣的话，可以看一下它的使用文档。

参考资料

[1]TextDecoder: https://developer.mozilla.org/zh-CN/docs/Web/API/TextDecoder

[2]SSE: https://developer.mozilla.org/zh-CN/docs/Web/API/Server-sent_events

[3]@streamparser/json: https://www.npmjs.com/package/@streamparser/json

本文链接：http://www.28at.com/showinfo-26-88556-0.html高效传输大的 JSON 数据，流式处理真香！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：即构 UIKits 重磅发布！高效开发与自定义UI兼备，打造互动场景新标杆

下一篇：揭秘 Python 江湖中的15个冷门但超能模块

标签：

热门焦点

天猫精灵Sound Pro体验：智能音箱没有音质？来听听我的

这几年除了手机作为智能生活终端最主要的核心之外，第二个可以成为中心点的产品是什么？——是智能音箱。手机在执行命令的时候有两种操作方式，手和智能语音助手，而智能音箱只
石头自清洁扫拖机器人G10S评测：多年黑科技集大成之作懒人终极福音

科技圈经常能看到一个词叫“缝合怪”，用来形容那些把好多功能或者外观结合在一起的产品，通常这样的词是贬义词，但如果真的是产品缝合的好、缝合的实用的话，那它就成了中性词，今
让我们一起聊聊文件的操作

文件【1】文件是什么？文件是保存数据的地方，是数据源的一种，比如大家经常使用的word文档、txt文件、excel文件、jpg文件...都是文件。文件最主要的作用就是保存数据，它既可以保
为什么你不应该使用Div作为可点击元素

按钮是为任何网络应用程序提供交互性的最常见方式。但我们经常倾向于使用其他HTML元素，如 div span 等作为 clickable 元素。但通过这样做，我们错过了许多内置浏览器的功能。
慕岩炮轰抖音，百合网今何在？

来源：价值研究所作者：Hernanderz“难道就因为自己的一个产品牛逼了，从客服到总裁，都不愿意正视自己产品和运营上的问题，选择逃避了吗？”这一番话，出自百合网联合创
最“俊美”淘宝卖家，靠直播和短视频圈粉，上架秒光，年销3000万

来源 | 电商在线文｜易琬玉编辑｜斯问受访店铺：Ringdoll戒之人形图源：微博@御座的黄山、“Ringdoll戒之人形”淘宝店铺有关外貌的评价，黄山已经听累了。生于1985年的他，哪
三星显示已开始为AR设备研发硅基LED微显示屏

7月18日消息，据外媒报道，随着苹果首款头显产品Vision Pro在6月份正式推出，AR/VR/MR等头显产品也就将成为各大公司下一个重要的竞争领域，对显示屏这一关
3699元！iQOO Neo8 Pro顶配版今日首销：1TB UFS 4.0同价位唯一

5月23日，iQOO推出了全新的iQOO Neo8系列，包含iQOO Neo8和iQOO Neo8 Pro两个版本，其中标准版搭载高通骁龙8+，而Pro版更是首发搭载了联发科天玑9200+旗舰
中关村论坛11月25日开幕，15位诺奖级大咖将发表演讲

11月18日，记者从2022中关村论坛新闻发布会上获悉，中关村论坛将于11月25至30日在京举行。本届中关村论坛由科学技术部、国家发展改革委、工业和信息化部、国务