jQuery: no handler for periodic results in an output stream?

Question

Let's say I have a web interface to ping: it accepts a hostname/ip and packet count, fires off a shell to ping with the given parameters, and returns the raw output from ping, flushing the output buffer after every newline. So I visit:

https://example.com/ping.php?target=127.0.0.1&num=10

and the browser displays the resulting lines incrementally as they're returned from ping.

Is it possible to put those results, line by line as they're made available, into an arbitrary <pre> or <div> element?

My first try only populates the #results element after the server's response is fully received:

$.get("/ping.php",
      {target: $('#ping_target').val(),
       num: $('#ping_num').val()
      },
      function(responseText) {
        $("#results").html(responseText);
      }
     );

I've read the following questions,

and know that I could send x requests of 1 ping each instead of a single request for x pings, or that I could write the results of the ping to a temp file and fire off periodic requests to fetch the latest state of the file. These are all rather inelegant when the heart of the matter is a single ping command.

In short, the question is, "Can I fire off a single request, accept the resulting response stream, and update the contents of an element with new response data multiple times before it's finished?" It could update every time any data is received, update every x milliseconds, update after receiving each newline, etc.

From my reading the answer appears to be "no", but I'd like to confirm once and for all that this isn't possible with jQuery. (Followup: Is it possible to implement this single query capability without jQuery?)

Thank you!

score 1 · Answer 1 · edited May 23 '17 at 12:12

The answer is yes. Check out HTTP Streaming technologies.

A python and jQuery ping solution: http://tools.cherrypy.org/wiki/Comet

The following code demonstrates how to write a Comet application using CherryPy and jQuery. It is a web interface into the console ping command. The ping command was chosen for this example because it will run indefinitely if given no arguments. Executing never-ending commands is usually a big no-no when it comes to web application programming but with CherryPy we can handle this quite easily:
Good answers here: jquery ajax, read the stream incrementally?
Description and example: http://ajaxify.com/run/wiki/streaming/

As an alternative to Periodic Refresh, the response now arrives by Streaming HTTP. A long-lived XMLHttpRequest Call occurs, and service continues to output new messages as they arrive. Meanwhile, the browser polls the full response, and checks if a new message has been added since the last poll. A new request is periodically issued to prevent leaks, timeouts, etc. This pattern is ideally suited to an intranet where you have better control and understanding and control over the network and end-user browsers.
This answer from How to show ping output dynamically in a web page?

jQuery: no handler for periodic results in an output stream?

1 Answers1