处理连续的 JSON 流

2024-03-06

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

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

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


这种事情最好使用WebSockets http://www.html5rocks.com/en/tutorials/websockets/basics/现在,根据 CanIUse.Com 的说法是适用于所有主流浏览器 https://caniuse.com/#search=websocketsOpera 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 Worker 和 Web Worker https://aarontgrogg.com/blog/2015/07/20/the-difference-between-service-workers-web-workers-and-websockets/同样,尽管它们有不同的用例和不同的能力。

它看起来像这样:

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

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

发送消息变得如此简单:

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

See WebSocket 简介:将套接字引入 Web http://www.html5rocks.com/en/tutorials/websockets/basics/有关如何执行此操作的完整说明。

ASP.Net 开发人员:如果由于某种原因您需要支持较旧的浏览器并且不想自己弄清楚如何处理那些不支持 WebSockets 的浏览器,请考虑使用诸如SignalR http://www.asp.net/signalr/overview/getting-started/introduction-to-signalr.

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

现在大多数浏览器都实现了事件源API http://www.w3.org/TR/eventsource/#the-eventsource-interface,这使得长轮询变得非常容易,只要可以使用内容类型传递流text/event-stream。较旧的浏览器或那些因任何原因无法设计流以具有该内容类型的开发人员可以使用一些帮助脚本 https://github.com/Yaffle/EventSource做同样的事情。

这是一个例子:

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

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

对于非常老的浏览器来说,更老的服务流解决方案

您想要的称为长轮询。您需要一个自定义 AJAXonreadystatechange处理功能。您需要定期检查内容,而不是等到整个流完成(因为它永远不会完成)。请注意,您需要做一些繁重的工作才能在 IE 9 及更低版本中工作,使用iframe.

Roughly:

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

看看这个HTTP 流要点 https://gist.github.com/CMCDragonkai/6bfade6431e9ffb7fe88对于一种资源,或者流式传输作为轮询服务器的替代方案 http://softwareas.com/http-streaming-an-alternative-to-polling-the-server/在 SoftwareAs。如果您必须支持 IE 9 或更早版本,那么您需要使用iframe方法。

Here is 这本书Ajax 设计模式:使用编程和可用性模式创建 Web 2.0 站点 https://rads.stackoverflow.com/amzn/click/com/0596101805:

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

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

安全问题

普通的 AJAX 不能跨域,这意味着(现在我注意到你想从 twitter 流式传输)你将无法执行你所要求的操作。这可以通过 JSONP 来解决,但 JSONP 本质上不能进行服务流传输,而且 Twitter 也不提供这种服务。还有跨域资源共享 http://en.m.wikipedia.org/wiki/Cross-origin_resource_sharing(CORS)但是 Twitter 不会为你设置这个——他们只会对附属于他们的域做这种事情。 CORS 需要现代浏览器。

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

处理连续的 JSON 流 的相关文章

  • 何时不使用承诺[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在阅读了数十篇关于 es6 Promise 有多伟大以及为什么我们应该实现它们的文章之后 我有这样的感觉 ALL我的 不平凡的 JavaScri
  • 在 MVC Razor 中的 C# 和 Javascript 之间共享常量

    我想在服务器上的 C 和客户端上的 Javascript 中都使用字符串常量 我将常量封装在 C 类中 namespace MyModel public static class Constants public const string
  • 保存/导出Chrome的JavaScript控制台输入历史记录

    无论如何 我可以保存或导出 JavaScript 控制台的历史记录吗 input 控制台历史记录 在 Google Chrome 中 我不想保存输出或错误 因此将鼠标悬停在控制台框上 右键单击并选择Save as 不是解决方案 我不想每次都
  • 如何记录返回的事件发射器

    如何记录所发出的事件stream返回于MyFunc 与 JSDoc MyFunc description param Object opts description return Stream description function My
  • 如何使用 jQuery 向表中添加新行,并为其分配递增的 id

    我有一个现有的 HTML 表格 它是用户输入 GPS 点的表单的一部分 用户还可以选择上传 GPS 数据点 我想要一个用户可以按下的按钮 其中一些 Javascript 会向表中添加一个或多个新行 但新行必须继续增加表中使用的名称和 id
  • JavaScript 动画平滑滚动

    默认情况下 当您有这样的片段链接时 a href some url some fragment some text a 浏览器立即向下滚动到该片段 我该如何编程才能使用标准 JS 顺利地向下移动到该片段 这是一个例子 Example htt
  • 列出 JSON 的所有键和值

    假设我有一些如下所示的 JSON items item id 0001 type donut name Cake ppu 0 55 batters batter
  • 使react-leaflet能够离线使用

    我一直在使用反应传单 https github com PaulLeCam react leaflet图书馆 到目前为止运作良好 现在我希望网站预加载尽可能多的图块 以便网络应用程序 也是 PWA 可以在没有互联网的情况下使用 我找到了一些
  • HTML colorpicker 发生变化时如何获取新值?

    我正在开发一个需要更改 HTML 颜色的网络应用程序canvas基于的价值观colorpicker 我有一个colorpicker在我需要获取的 HTML 中value从每次更新开始
  • v-file-input .click() 不是函数

    我试图以编程方式触发 v file input 的 click 事件 因为它在 Vuetify 的文档中 但它显示一个错误this refs imagePicker click is not a function我在这里错过了什么吗 代码重
  • 如何清除WebGL中的矩形区域?

    WebGL 有一个clear清除整个表面的方法 清除表面的特定矩形的最佳方法是什么 例如 我想将一个从 50 50 开始的 100x100 像素框设置为全零 ARGB 0 0 0 0 我现在能想到的就是用一个写入零的片段着色器绘制一个四边形
  • Flux + React.js - 操作中的回调是好还是坏?

    让我解释一下我最近遇到的问题 我有 React js Flux 驱动的应用程序 有一个列表显示文章数量 注意 应用程序中有多个不同的列表 和文章详情查看在里面 但每个列表只有一个 API 端点 它返回文章数组 为了显示我需要的详细信息fin
  • PHP 中的简单 JSON 请求

    我有以下 json country code latitude 45 9390 longitude 24 9811 zoom 6 address city country Romania country code RO region 我只想
  • WebRTC:通道、轨道和流与 RTP SSRC 和 RTP 会话之间的关系

    来自 Mozilla 网站 https developer mozilla org en US docs Web API Media Streams API https developer mozilla org en US docs We
  • 从多维无穷大数组中删除数组元素

    我想删除一个特定元素 例如 我想删除元素id 76在下面的数组中 而且 数组可以无限地组合在一起 这里的问题是我无法刷新页面 因为我使用 Vue js 进行即时操作 如果我能做到这一点 我的下一个问题可能是如何在我现在想要的地方添加一个元素
  • 如何获取使用 .map 渲染的第一个元素的 ref?

    我需要在几行中显示视频 卡片 的缩略图 并重点关注第一个缩略图 我使用嵌套地图进行了显示 该代码基本上迭代视频数组并返回多行视频 我们如何关注第一个渲染的元素 我认为我们需要获得第一个要聚焦的元素的引用 但是我们如何在这里设置 ref 并在
  • 在javascript中动态生成行?

    我是 javascript 新手 我想在按下 Tab 时动态生成行 并希望获取在动态生成的行中输入的值 以便我可以在 servlet 代码中使用这些值 这是我的html
  • 有没有非常轻的灯箱? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在 SVG 元素上使用箭头标记?

    我需要在 d3 js 中创建一个箭头 但我找到的只是带有节点图的示例 我需要的是简单地制作一个从 A 点到 B 点的箭头 我尝试实现以下示例中的部分代码 http bl ocks org 1153292 http bl ocks org 1
  • 如何调试 Gulp 任务?

    如何调试我的中定义的 gulp 任务gulpfile js使用诸如 Google Chrome 调试器之类的调试器逐行单步执行任务的代码 对于 Node js 6 3 版本 您可以使用 inspect flag https nodejs o

随机推荐

  • 用“*”替换最后 4 个字符

    我有一个字符串 我需要用 符号替换该字符串的最后 4 个字符 谁能告诉我该怎么做 一种快速而简单的方法 public static String replaceLastFour String s int length s length Ch
  • MVC EF 将帖子类型和客户类型合二为一

    我有一个类型叫blogpost具有对类型的属性虚拟引用customer public virtual Customer Customer get set 在我的表格中 我发布了blogpost and customer数据到控制器 所有值均
  • Visual C++ 2010 在调试时拒绝显示 std::string 值。显示<错误指针>

    我有一种奇怪的感觉 就像这是最近出现的问题 并且发生在两台不同的计算机上 当我调试并尝试查看 STL 中的 std string 的值时 它显示为值 它说它的大小是15 容量是一些乱码的巨大数字 数组值本身都显示 CXX0030 错误 无法
  • 如何将 Rails 中的自定义环境设置为默认环境?

    i created通过添加新文件在我的 Rails 应用程序中自定义暂存环境config environments staging rb 与 一样config environments development rb然后添加数据库配置conf
  • Android Draw 9补丁工具:图外黑线是什么意思

    我尽力在谷歌和安卓中找到这个问题 也做了几次尝试和错误 但无法得到这个问题 我正在学习 Android 的 Draw Nine Patch 图像 我知道的一个基本原则是 您处理的任何图像都必须采用 png 格式 如果它已经是 9 png 那
  • 如何反转 WPF Storyboard 动画?

    我在 Expression Blend 4 中的图像上创建了 WPF Storyboard 动画 悬停时 图像逐渐模糊 当鼠标离开图像时 有什么方法可以撤消或反转故事板吗 我可以让它触发 Storyboard Remove 但这实际上不会向
  • laravel livewire,如何通过单击将id或数据传递给另一个组件

    我有两个组件 帖子 和 帖子 帖子 显示帖子 通过单击图像我想在另一个组件中显示单击帖子的数据 下面发布类和组件 组件视图 div class post foreach posts as post div h1 post gt name h
  • 如何在定义之间添加空行?

    我成功地将我的代码设置为 clang format 格式 就像 iIwant 一样 然而 有一点让我很困扰 我想要在结构 类 函数的定义之间以及函数的声明之间有一个空行 目前 在格式化时 clang format 会删除空行 从而使所有内容
  • Android:有没有办法禁用通知捆绑?

    我有一个应用程序 用户可以在其中收到有关他们需要做的事情的多个通知 用户可以选择使其中一些通知持久化 我通过调用NotificationCompat Builder setOngoing 来实现 至少在我的 Android 版本 Nouga
  • SQL 2016 - 将 XML 转换为 Json

    我正在尝试使用 SQL2016 中的 FOR JSON PATH 将 XML 列转换为 Json 但遇到一些问题 给定以下 XML 请注意 某些 Product 元素可能包含 Product 列表
  • 如何为 Objective-C 协议提供默认实现?

    我想指定一个具有可选例程的 Objective C 协议 当例程不是由符合协议的类实现时 我想在其位置使用默认实现 协议本身是否有一个地方可以定义这个默认实现 如果不是 那么减少到处复制和粘贴此默认实现的最佳实践是什么 Objective
  • Chrome 中的 Fetch API 内存泄漏

    当以最简单的方式使用 fetch API 时 Chrome 无法正确进行垃圾收集 难道我做错了什么 for i 0 i lt 100 i fetch https upload wikimedia org wikipedia commons
  • 有没有办法使用java在Linux机器上获取用户的UID?

    有没有办法使用java在Linux机器上获取用户的UID 我知道System getProperty user name 方法 但它返回用户名 我正在寻找 UID 你可以执行id命令并读取结果 例如 id u jigar output 10
  • 如何在Qt6中的QML中使用QVideoSink

    我创建了自己的视频接收器 继承自QVideoSink在 Qt 6 中 我想在 QML 端显示该接收器的内容 我该怎么做 VideoOutputQML 类型有videoSink属性 但它是只读的 VideoOutput 和 QVideoWid
  • 使用最新的 Xcode 在 iOS 3.1.3 中进行测试

    如何使用最新的 Xcode 版本在 iOS 3 1 3 中测试应用程序 可以在模拟器中执行此操作吗 如果没有 是否可以将设备降级到 iOS 3 1 3 是的 您可以降级设备 它没有得到官方支持 但我已经在两台 3G 上完成了它 并在 3 1
  • 将字符串添加到 ImageView 对象 Android

    我需要将一个字符串附加到 ImageView 对象中 以便我可以执行类似的操作imgView1 getString 它会返回它 我知道有getTags and setTags但根据我的理解 它只使用整数 谢谢 只需补充 dharms 答案
  • 没有使用 Spring Security 进行身份验证和授权

    我的项目要求我使用 Spring Security 进行 CSRF 和 XSS 保护 但不使用它进行身份验证和授权 我已将 SS 配置到我的应用程序中 但每次访问页面时 它都会自动将我重定向到其登录页面 我如何禁用此功能 我的Securit
  • 指定 cartopy 中的纬度/经度标签位置(删除某些边)

    Cartopy 0 18 0 中为任何地图投影添加纬度 经度标签的新功能非常出色 这是这个包的一个很好的补充 对于某些地图 特别是在极地地区 纬度 经度标签可能非常拥挤 这是一个例子 from matplotlib import pyplo
  • 扩展网址如何工作

    我知道这些类型的 URL 如何加载页面 基于它们的 GET 参数 在后端大致是这样的 但这些类型的 URL 是如何工作的呢 我的意思是 数据是如何动态加载的 www dummysite com parm subpage1 xyz www d
  • 处理连续的 JSON 流

    现已不复存在 页面http stream twitter com 1 statuses sample json http stream twitter com 1 statuses sample json用于返回连续且无限的 JSON 数据