处理连续的JSON流

Question

(现已不存在)页面http://stream.twitter.com/1/statuses/sample.json用于返回连续且无穷无尽的JSON数据流.

我想在我自己的网页中使用jQuery(或JavaScript,但最好是jQuery)来处理它,以便能够根据推文的实时提要显示视觉效果.

因为据我所知,jQuery parseJSON函数只会在服务器发送完所有数据后执行回调函数,但这实际上是一个连续的数据流.如何"实际"处理数据但仍保持连接运行？

Answer 1

更新2

这种事情最好现在使用WebSockets完成,根据CanIUse.Com 可以在除Opera Mini之外的所有主流浏览器中使用(有关旧版或所有浏览器的更多详细信息,请参阅该链接,然后单击"资源"选项卡以查看更多链接) .作为概述,IE 10 +,Firefox 11+(如果在WebWorker上下文中为38+),Chrome 16 +,Opera 12.1 +,Safari 7 +,Android 4.4 +,Opera Mobile 12.1+支持websockets.

它看起来像这样:

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

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

发送消息变得如此简单:

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

请参阅WebSockets简介:将套接字引入Web以获取有关如何执行此操作的完整说明.

ASP.Net开发人员:如果由于某种原因你需要支持旧浏览器并且不想自己弄清楚如何处理那些不支持WebSockets的浏览器,可以考虑使用SignalR等库.

Old 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处理函数.而不是等到整个流完成(因为它永远不会),你需要定期检查内容.请注意,您需要做一些繁重的工作才能在IE 9及更低版本中使用iframe.

大致:

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

查看一个资源的HTTP Streaming要点,或Streaming作为在SoftwareAs 上轮询服务器的替代方法.如果您必须支持IE 9或更早版本,那么您需要使用该iframe方法.

以下是Ajax设计模式:使用编程和可用性模式创建Web 2.0站点一书的引用:

总之,Service Streaming使HTTP Streaming方法更加灵活,因为您可以流式传输任意内容而不是Javascript命令,并且因为您可以控制连接的生命周期.但是,它结合了两种跨浏览器不一致的技术,具有可预测的可移植性问题.实验表明,Page Streaming技术适用于IE [9及更早]和Firefox,但Service Streaming仅适用于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