Forever-frame 和 server sent events 有什么区别?

7
这个问题与这个问题非常相似:Web Sockets、长轮询、服务器推送事件和 Forever Frame 有什么区别? 然而,这个问题的答案没有提到 SSE 和 Forever Frame 之间的区别。让我简要解释一下它们。
关于 SSE,该系统确实类似于 Comet,但与 Comet 不同的是,在数据发送后不会断开连接。因此,从服务器到客户端的连接是长期存在的,客户端接收整个数据的一系列片段。
另一方面,Forever Frame 对我来说似乎非常相似。在 Forever Frame 中,首先客户端接收包含 iframe 标签的页面,在隐藏的 iframe 内部建立一个长期的连接。然后客户端从服务器接收分块数据,并使用第一个文档上的某些函数操作 DOM。
我认为区别在于 Forever Frame 在机制中使用了 iframe 标签,但 SSE 没有,并且 SSE 可以通过更多方式实现。我是对的吗?
2个回答

11

我之前没有听说过Forever-frame这个名字!(在我的书《HTML5 SSE数据推送应用》的第7章“iframe”部分中有介绍它。)

长轮询:通过使用XMLHttpRequest(即ajax)发出请求,保持连接直到服务器上的数据准备就绪。然后关闭套接字并重新连接以获取下一部分数据。

XHR轮询:通过使用XMLHttpRequest2(即ajax)发出请求,同时监听readyState==3信号。后端服务器必须知道保持连接打开,客户端必须知道监听readyState==3。(不适用于IE9及更早版本,因为该浏览器从不传递readyState==3消息,而是直接进入readyState==4)

iframe:打开一个隐藏的iframe来处理后端进程。定期查看iframe的源代码,看是否有任何新内容。(从技术上讲,它适用于所有浏览器,但在我的(2013年)测试中只有IE8和IE9的延迟足够低,更新才有用。)

SSE:一种HTML5标准,基本上像XHR轮询一样工作(至少Firefox和Chrome直接在XMLHttpRequest2之上实现它),但将复杂的细节对你进行了隐藏。它还添加了自动重新连接功能,如果套接字断开,还有其他一些高级功能。

在上述书的第7章的结尾,我展示了如何使所有技术在几乎任何浏览器中工作的代码。首选顺序为:

  • 如果可用,使用SSE
  • 否则,如果可用,使用XHR
  • 否则,如果IE8或IE9,使用iframe
  • 否则,使用长轮询

还有一个区别:XHR和iframe技术会将整个消息历史记录存储在内存中。因此,如果您打算长时间保持套接字打开并/或发送大量大型消息,则可能会导致内存问题,这种情况在使用SSE时不会发生。

执行摘要:不必担心“永久框架”,除非您有足够的客户仍在使用IE8 / IE9,长轮询方法会给您的基础设施带来明显的额外负载。


谢谢您对这些技术的概述。然而,某些方面仍不清楚。 1:我不确定长轮询和XHR轮询之间的区别。我搜索了“XHR轮询”一词,但找不到任何有关它的好信息。正如您所提到的,区别在于长轮询使用XMLHttpRequest1,而XML轮询使用XMLHttpRequest2? 2:在XHR轮询中,就绪状态信号是从哪一侧发送的?来自服务器端还是客户端? 3:您所说的“自动重新连接”是什么意思?这意味着在服务器发送数据后,连接会断开吗? - Kazuya Tomita
@KazuyaTomita,我建议购买我的书是否有些冒昧 - 书中有足够的空间来全面涵盖这些主题 :-)普通长轮询和我所谓的“xhr”之间的区别在于前者只使用readyState==4,而后者使用readyState==3。readyState是客户端JavaScript XMLHttpRequest2 API的一部分。 - Darren Cook
所以,你在答案中关于长轮询和XHR轮询的解释是错误的,因为根据你的附加评论,两者都使用XMLHttpRequest2?如果可以的话,请给我关于问题3的任何简要解释。 - Kazuya Tomita
永久IFrame是一个接收脚本块的IFrame。 - Royi Namir

0

SSE并不是很可行,因为缺乏浏览器的支持,所以你的问题的答案是....

我认为区别在于Forever-frame使用iframe标签机制,但SSE没有,并且SSE可以通过更多的方式实现。

不正确。

实际上,iframe是最容易实现且开销最小的方法。唯一的缺点是随着时间的推移会使用更多的内存。

XHR非常干净和高效,但是有一些IE版本的限制。如果你的用户仍然在使用那些版本的IE,他们可能不会对具有实时消息功能的应用程序有任何用处 :)

你总是可以使用:

<script>

window.setTimeout(poll, 3000);

function poll() {
    $.ajax({
        url: "/",
        type: "POST",
        data: {},
        dataType: "json",
        traditional: true,
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            // do something                
        },
        error: function () {
            // handle it
        },
        complete: function() {
            window.setTimeout(poll, 3000);
        }
    });
}


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接