解析“流”JSON

Question

我的浏览器中有一个网格。

我想通过 JSON 将数据行发送到网格，但是浏览器应该在接收到 JSON 时不断解析 JSON，并在解析行时将行添加到网格中。换句话说，在接收到整个 JSON 对象后，不应将行全部添加到网格中 - 它们应该在接收时添加。

这可能吗？特别是使用 jQuery、Jackson 和 Spring 3 MVC？

这个想法有名字吗？我只在网上看到了这个想法的一些零散记录。

Answer 1

您可以使用Oboe.js，它是专门为此用例构建的。

Oboe.js 是一个开源 Javascript 库，用于使用流式加载 JSON，将 DOM 的便利性与 SAX 的速度和流畅性结合在一起。

它可以将任何 JSON 解析为流，足够小，可以成为一个微型库，没有依赖项，并且不关心您需要它与哪些其他库进行交互。

Answer 2

Lazy.js 能够解析“流式”JSON（demo）。

Answer 3

您无法使用浏览器的

JSON.parse

解析不完整或无效的 JSON。如果您正在流式传输文本，它总是会在某个时刻尝试解析无效的 JSON，这将导致它失败。那里存在流式 JSON 解析器，您也许能够找到满足您需求的东西。

在您的情况下，最简单的方法仍然是为每行发送完整的 JSON 文档。

Answer 4

查看SignalR。

http://www.hanselman.com/blog/AsynchronousScalableWebApplicationsWithRealtimePersistentLongrunningConnectionsWithSignalR.aspx

Answer 5

2017 年 3 月更新：

Websockets 允许您保持与服务器的开放连接，您可以使用该连接将数据流式传输到表。您可以将各个行编码为 JSON 对象并发送它们，每次收到一个行时，您都可以将其附加到表中。这也许是最佳方法，但它需要使用 Websocket，而您的技术堆栈可能不完全支持 Websocket。如果 websockets 不是一个选项，那么您可以尝试以服务器允许的最小块的形式请求数据，但这样做的成本很高，因为每个请求都有开销，并且您最终会执行多个请求来获取数据。

据我所知，在 http 请求完成之前无法开始解析它，也无法部分解析 JSON 字符串。此外，获取数据比处理数据慢几个数量级，因此并不值得这样做。

如果您需要解析大量数据，最好的选择是采用流式处理方法。

Answer 6

截至 2024 年 11 月

，有一个维护的 JS/TS 库实现了名为 @streamparser/json-whatwg 的现代标准。它可以解析流式 JSON（和换行符分隔的 JSON），并且适用于客户端和服务器端。 由于我们对客户端感兴趣，特别是如何读取流式

fetch

响应，我建议使用以下代码：

import {JSONParser} from "@streamparser/json-whatwg";

fetch('https://jsonplaceholder.typicode.com/comments').then(
  async response => {
    const jsonParser = new JSONParser({
      emitPartialTokens: false, emitPartialValues: false,
      keepStack: false, paths:['$.*']
    });
    const reader = response.body.pipeThrough(jsonParser).getReader();
    while (true) {
      const { done, value } = await reader.read();
      const obj = value?.value;
      if (done) break;
      if (obj) {
        // Process the received object
        console.info(obj);
      }
    }
  }
);

该库使用当今得到广泛支持的现代 

Streams API

。当使用 fetch 下载数据时，我们将专门处理

response.body

，它是 ReadableStream

。

对于更简单的用例或不想学习 Streams API 的人，您仍然可以使用纯 JS 基于回调的变体

@streamparser/json

。