如何发送和接收大型 JSON 数据

Posted 2023-02-22

【中文标题】如何发送和接收大型 JSON 数据

【英文标题】：How to send and receive large JSON data

【发布时间】：2018-12-21 07:43:06

【问题描述】：

我对全栈开发比较陌生，目前正试图找出一种有效的方法来处理我的前端 (React) 和后端 (Express) 之间的 send 和 fetch 大数据，同时最小化内存使用情况。具体来说，我正在构建一个地图应用程序，它需要我使用大型 JSON 文件 (10-100mb)。

我当前的设置适用于较小的 JSON 文件：

后端：

const data = require('../data/data.json');

router.get('/', function(req, res, next) 
  res.json(data);
);

前端：

componentDidMount() 
      fetch('/')
      .then(res => res.json())
      .then(data => this.setState(data: data));
  

但是，如果 data 大于 ~40mb，如果我在本地测试由于内存不足，后端会崩溃。此外，使用require() 保存数据也需要相当多的内存。

我做了一些研究，对 JSON 解析、字符串化、流式传输有了大致的了解，我认为答案就在某个地方，即使用分块 json 流来一点一点地发送数据，但我几乎不知所措它的实现，尤其是使用单个fetch() 来实现（这甚至可能吗？）。

非常感谢有关如何解决此问题的任何建议。

【问题讨论】：

我认为您的用户必须在某些时候滚动才能查看下一组数据，比如在 10 组之后。为什么不创建一个限制一次性发送给用户的数据的端点。然后从您的前端查看用户是否已到达滚动的末尾。如果是，则再次提出后续请求。现在处理来自您的快速端点的后续请求并限制为下一个 10。来自前端的简单请求看起来像 fetch('exampel.com/get-users?page=2')

如果没有敏感数据，您可以在将数据发送给用户之前对其进行压缩。浏览器可以解压。

【参考方案1】：

首先，40mb 是巨大的，对您的用户来说可能是不体面的，尤其是在移动设备使用的可能性很高的情况下。

如果可能，最好在后端收集这些数据，可能会将其放到磁盘上，然后只在需要时向前端提供必要的数据。由于地图需要更多数据，您将进一步调用后端。

如果这不可行，您可以使用客户端捆绑包加载此数据。如果数据更新不是太频繁，您甚至可以将其缓存在前端。这至少可以防止用户需要重复获取它。

或者，您可以通过服务器上的流读取 JSON 并将数据流式传输到客户端，然后使用 JSONStream 之类的东西来解析客户端上的数据。

这是一个如何通过套接字从服务器传输 JSON 的示例：how to stream JSON from your server via sockets

【讨论】：

这很有帮助，谢谢！我会继续尝试您的建议