7

This question is really similar with this question:What is the difference between web sockets, long polling, server-sent events and forever frame?

However, this question's answer doesn't mention the difference between SSE and Forever-frame.
Let me give you brief explanation about them.

Regarding to SSE, the system really resembles Comet, but the point which is different with Comet is not breaking the connection after data being sent. So, connection from a server to a client is long-alive and the client receives series of fragments of a whole data.

On the other hand, forever frame seems to be very similar to me. In Forever frame, first the client receives the page including an iframe tag, establishing a long-lived connection inside the hidden iframe. And then the client receives chunked datas from the server and manipulates the DOM with some functions on the first document the client already has.

I assume the difference is Forever-frame uses iframe tag in the mechanism, but SSE doesn't and SSE can be realized by more ways. Am I right?

Community
  • 1
  • 1
Kazuya Tomita
  • 667
  • 14
  • 34

2 Answers2

11

I'd not heard of Forever-frame by that name before! (It is covered in ch.7 of my book, Data Push Apps with HTML5 SSE, in the "iframe" section).

Long-polling: make a request (using XMLHttpRequest, i.e. ajax), keep it open until the data is ready on the server. Then the socket closes. Re-connect to get the next bit of data.

XHR polling: make a request (using XMLHttpRequest2, i.e. ajax), but listen in to the readyState==3 signals. The back-end server has to know to keep the connection open, and the client has to know to listen to readyState==3. (Does not work in IE9 and earlier, because that browser never delivers the readyState==3 messages, but goes straight to readyState==4)

iframe: open a hidden iframe to the back-end process. Regularly go look at the source code of the iframe, and see if anything new is there. (Technically it works on all browsers, but IE8 and IE9 were the only ones in my (2013) tests with low enough latency for the updates to be useful.)

SSE: An HTML5 standard that basically works like XHR polling (Firefox and Chrome, at least, implement it directly on top of XMLHttpRequest2), but with the complex details hidden from you. It also adds auto-reconnect if the socket goes down, and a few other high-level features like that.

At the end of chapter 7 of the afore-mentioned book, I show code to get all the techniques to work in just about any browser. The order of preference is:

  • SSE if available
  • else XHR if available
  • else iframe if IE8 or IE9
  • else longpoll

There is one other difference: the XHR and iframe techniques are storing the entire message history in memory. So, if you intend to keep the socket open for a long time and/or send a lot of large messages, this may cause a memory issue that wouldn't happen with SSE.

Executive Summary: Don't worry about "forever-frame" unless you have enough customers still using IE8/IE9 that the longpoll approach would create noticeable additional load on your infrastructure.

Darren Cook
  • 27,837
  • 13
  • 117
  • 217
  • Thank you for the overview about these technology. However, still not clear at some points. 1: I'm not sure of the difference between Long-polling and XHR polling. I googled the word "XHR polling", but I couldn't find any good information about it. As you mentioned, the difference is that Long-polling uses XMLHttpRequest1 where XML polling does XMLHttpRequest2? 2: On XHR polling, which side is the readyState signals sent from? From the server-side? Or client? 3: What do you mean by the word "auto-reconnect"? That means after the sever sending the data, does the connection break once? – Kazuya Tomita Nov 15 '16 at 14:03
  • @KazuyaTomita Is it too cheeky to suggest buying my book - there is enough space to cover these topics thoroughly :-) The difference between normal long-polling and what I've called "xhr" is the former just uses readyState==4, while the latter uses readyState==3. The readyState is part of the client-side JavaScript XMLHttpRequest2 API. – Darren Cook Nov 15 '16 at 14:33
  • So, your statement about explanation of long-polling and XHR-polling on the answer is wrong because both uses XMLHttpRequest2 according to your additional comment? And if it is okay, please give me any brief explanation about question3. – Kazuya Tomita Nov 18 '16 at 05:35
  • Forever IFrame is an IFrame which receives chunks of script – Royi Namir Jun 16 '22 at 19:26
0

SSE is not really an option because of lack of browser support, so the answer to your question is ....

I assume the difference is Forever-frame uses iframe tag in the mechanism, but SSE doesn't and SSE can be realized by more ways

no.

iframe is actually the easiest to implement and has the least overhead. The only drawback is memory use over time.

XHR is very clean and efficient, but has some IE version limitations. If you have users still using those versions of IE, they probably won't have any use for an application with real-time messaging :)

You could always just use:

<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);
        }
    });
}

Informitics
  • 87
  • 2