CODEWITHSUNDEEP
javascriptjqueryhtmlserver-sidehttp-streaming
VisioN
VisioN

Reputation: 145428

What is the best way to handle streaming JS content in browser?

Imagine we have a server side application that generates streaming content full of JavaScript commands. The easiest way for me to show the example application is to use Python/Flask, however you can perform it using any language just flushing the output after each iteration. So, for a sample server side application:

from time import sleep from flask import Response

@app.route('/stream', methods=['POST']) def stream():
    def generate():
        for i in range(10):
            sleep(1)
            yield 'console.log("Iteration: %d");\n' % i
    return Response(generate(), mimetype='application/javascript')

which returns (during 10 seconds with 1 second pauses) this kind of output:

console.log("Iteration: 0");
console.log("Iteration: 1");
console.log("Iteration: 2");
...
console.log("Iteration: 9");

I need to create a "parent" HTML/JavaScript page which handles and executes these commands on-the-fly, i.e. not waiting until all 10 iterations will be loaded. Also, it should be able to serve POST requests to the mentioned server side application.

Here are the options which I have tried.

  1. I tested jQuery Ajax method with different options but it still needs full generated output to execute all commands at once.
  2. The other idea was to use iframe. It works fine but in order to use it I need to rephrase my output from console.log("Iteration: 0"); to <script language="JavaScript">console.log("Iteration: 0");</script> with content type text/html; and also to simulate POST form submission to the target iframe.
  3. I have read about WebSockets. However, since this technology is not absolutely supported at the moment, and my application should be able to work with on-the-fly content already now, I refused to deal with it.

Another very important thing: the output should be a stream, since server side application works with a long lasting process; so make setTimeout(function() { $.ajax(...); }, 1000); is not the solution.

To summarize, I have tried several options but simple iframe is the only solution which really works at the moment. Otherwise, most probably I am missing something. Any thoughts and constructive ideas are very much appreciated.

Thank you in advance!

Upvotes: 1

Views: 441

Answers (1)

jordancpaul
jordancpaul

Reputation: 2964

long-Polling and comet are options, but these are hacks. The Iframe method you mentioned isn't terrible, but has some state issues if you need to recover the connection.

I would encourage you to reconsider web sockets. There is a lovely shim available on github which uses flash (which has had socket support for some time now) as a fall back. You can write client side code as if web sockets exist, and the shim adds it to browsers that don't support it. Great!

Upvotes: 3

Related Questions