处理连续的 JSON 流

Question

（现已失效）页面 http://stream.twitter.com/1/statuses/sample .json 用于返回连续且无限的 JSON 数据流。

我想在我自己的网页中使用 jQuery（或 JavaScript，但最好是 jQuery）对其进行处理，以便能够根据推文的实时提要显示视觉效果。

据我所知，jQuery parseJSON 函数只会在服务器发送完所有数据后才会执行回调函数，但这实际上是一个连续的数据流。如何“在发生时”处理数据但仍保持连接运行？

Answer 1

这种事情现在最好使用 WebSockets 来完成，根据 CanIUse .Com 可在所有主要浏览器中使用，除了 Opera Mini（请参阅该链接有关旧版或所有浏览器的更多详细信息，然后单击“资源”选项卡查看更多链接）。总体而言，IE 10+、Edge 12+、Firefox 11+（如果在 WebWorker 上下文中则为 38+）、Chrome 16+、Opera 12.1+、Safari 7+、Android 4.4+、Opera Mobile 12.1+ 支持 Websocket。

注意：您可能想了解Service Workers 和 Web Workers 也是如此，尽管它们有不同的用例和不同的能力。

它看起来像这样：

var connection = new WebSocket(
   'ws://html5rocks.websocket.org/echo',
   ['soap', 'xmpp']
);

立即将一些事件处理程序附加到连接可以让您知道连接何时打开、何时收到传入消息或是否发生错误。

发送消息变得如此简单：

connection.send('your message');
connection.send(binaryData);

请参阅WebSocket 简介：将套接字引入 Web 有关如何执行此操作的完整说明。

ASP.Net 开发人员：如果由于某种原因您需要支持较旧的浏览器，并且不想自己弄清楚如何处理那些不支持 WebSocket 的浏览器，请考虑使用诸如 SignalR。

针对较旧浏览器的旧 EventSource API 答案

大多数浏览器现在都实现 EventSource API，只要可以使用内容类型 text/event-stream 传递流，就可以使长轮询变得非常简单。较旧的浏览器或因任何原因无法设计流以具有该内容类型的开发人员可以使用一些 帮助程序脚本 做同样的事情。

这是一个例子：

var jsonStream = new EventSource('https://example.com/yourstreamingservice')
jsonStream.onmessage = function (e) {
   var message = JSON.parse(e.data);
   // handle message
};

这基本上是我在下面概述的内容的完整版本。

针对非常旧的浏览器的更旧的服务流解决方案

您想要的称为长轮询。您需要一个自定义 AJAX onreadystatechange 处理函数。您需要定期检查内容，而不是等到整个流完成（因为它永远不会完成）。请注意，您需要使用 iframe 进行一些繁重的工作才能在 IE 9 及更低版本中工作。

粗略地：

• 响应每个 onreadystatechange 事件并检查分配给当前角色的流，以查看是否有足够的数据来消耗一个或多个离散事件。您需要使用 JavaScript 字符串处理函数自行解析流。可以使用 split、indexOf、正则表达式、循环等组合来完成此任务。
• 如果还没有足够的内容，则退出并等待下一个事件。
• 我非常确定每次 onreadystatechange 处理程序触发时，responseText 将是迄今为止收到的所有数据。定义一个持久变量，用于保存尚未正确处理的第一个字符的位置。
• 一旦有足够的内容供一个或多个离散事件出现在流中，一次取出一个事件并将它们传递到 JSON 解析器以实际将文本呈现为对象。正常使用它们。

查看此 HTTP Streaming gist 了解一项资源，或 流式传输作为轮询的替代方法服务器位于SoftwareAs。如果您必须支持 IE 9 或更早版本，则需要使用 iframe 方法。

这是 引自这本书Ajax 设计模式：使用编程和可用性模式创建 Web 2.0 站点：

总之，服务流使 HTTP 流方法更加灵活，因为您可以流式传输任意内容而不是 Javascript 命令，并且因为您可以控制连接的生命周期。然而，它结合了两种在浏览器之间不一致的技术，并且存在可预测的可移植性问题。实验表明，页面流技术确实适用于 IE [9 及更早版本] 和 Firefox，但服务流仅适用于 Firefox，无论使用 XMLHTTPRequest 还是 IFrame。在第一种情况下，IE [9 及更早版本] 会抑制响应直至其完成，如果使用解决方法，则 IFrame 可以正常工作： IE [9 及更早版本] 在前 256 个字节之后接受来自服务器的消息，因此唯一的事情是要做的就是在发送消息之前发送 256 个虚拟字节。此后，所有消息都将按预期到达。因此，完整的服务流在 IE [9 及更早版本] 中也是可能的！

请注意，它是 2006 年的，所以它肯定已经过时了，但如果您必须支持较旧的浏览器，它仍然相关。

安全问题

正常的 AJAX 不能跨域，这意味着（现在我注意到你想从 twitter 流式传输）你将无法执行你所要求的操作。这可以通过 JSONP 来解决，但 JSONP 本质上不能进行服务流传输，而且 Twitter 也不提供这种服务。还有跨源资源共享 (CORS)，但 Twitter 不会为您进行设置 - 这是他们只会为附属于他们的域所做的事情。 CORS 需要现代浏览器。

因此，您唯一的选择是在您的 Web 服务器上创建一个代理服务，该服务为您执行对 twitter 的请求，然后分发数据。这只能从提供主页的同一域中完成。这样做还可以让您使用 iframe 技术创建一个适用于 IE 的版本。如果您不关心旧的 IE 版本，并且知道将发出请求的域，则可以自行实施 CORS 来克服域限制。

如果您完全控制客户端软件（例如，如果这是用于公司内部网），则还有另一种选择：将 Web 浏览器托管在已编译的本地执行应用程序的用户表单内。我只使用 C# 完成了此操作，但我认为其他语言也可以做到这一点。当您使用正确的浏览器对象时，因为它托管在 C# 应用程序内，所以 C# 应用程序可以克服跨域安全限制，读取和写入所有页面内容，无论它来自哪个域。我怀疑你的情况是这样的，但我想把这个选项放在这里，供其他可能会欣赏它的人使用。

Answer 2

我有一个开源项目，它允许在现代浏览器上执行此操作（并在旧浏览器上回退到 jQuery 样式）。调用语法类似于 jQuery.ajax：

http://oboejs.com

Answer 3

您在问题中指定的 url 会发送 JSON 响应流。由于浏览器中的跨域安全限制，您无法使用 javascript 访问它。您需要在服务器上实现一个桥接服务器端脚本，您可以使用 AJAX 请求定期轮询或在 twitter.com 上托管您的网站。第一种似乎更可行。

Answer 4

如今，Fetch API 支持流式传输。 body 属性它的响应是一个 ReadableStream。

一般来说，有两种流式传输 JSON 的方法，我不知道 Twitter 使用的是哪一种：一种是发送单个 JSON 文档，该文档是或包含一个数组/对象，其属性/元素作为流发送。另一个是 JSON 流，其中多个 JSON 文档按顺序发送，通常由空白字符。 JSON 行 是一种标准，其中 JSON 文档由换行符分隔，并且 JSON-seq 是一个标准，它们由0x1E记录分隔符。

json-stream-es 是一个 JavaScript 库，支持解析任何格式的流式 JSON上面的格式。例如，JSONL 流将被解析如下：

import { parseJsonStream, streamToIterable } from "json-stream-es";

const result = await fetch("http://stream.twitter.com/1/statuses/sample.json");
const values = result.body
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(parseJsonStream(undefined, { multi: true }));

for await (const value of streamToIterable(values)) {
    console.log(value);
}

Answer 5

从根本上讲，网页无法保持与服务器的实时/运行连接。 Web 浏览器向服务器发送请求。服务器将响应（HTML 等）发送回客户端（Web 浏览器）。将此视为无状态模型 - 在请求和响应完成后，任何连接都不会保持活动状态。

因此，你必须自己做。您必须从客户端调用额外的定期请求。

一种方法是通过 setInterval() 函数定期调用 AJAX/GET 功能。例如：

setInterval(function() {

    $.ajax({
      url: "mydata/get",
      success: function(){
        // update content.
      }
    });

}, 5000);

这将每 5 秒触发一次对 mydata/get（或您想要使用的任何 URL）的 AJAX 请求。