javascript - How to stream text response to jsp from servlet?

Question

I have a long running servlet process that is being called from a JSP.

I would like to send the status of the servlet process to the client as it is happening.

I have everything working the way I want except for the streaming part.

I'm using ajax to call the servlet and populating a text area with the response. The response, however, is sent to the client all at once at the end instead of streamed step by step.

I'd like the client to see each of the responses (flush()) as they happen, rather than all at once at the end of the call.

Ajax calls:

postUploadFile = function() {
    $("#status").val("");
    YES.getAndShowStatus("status", "${home}/Upload");
}


YES.getAndShowStatus = function(listenerId, url, successFunction) {
    jQuery.get(url, 
        function(data) {
            val = jQuery("#" + listenerId).val();
            jQuery("#" + listenerId).val(val + data);
        }
    );
};

Servlet code:

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        log.info("----------");
        log.info("Doing post");
        resp.setContentType("text/plain");
        OutputStream out = resp.getOutputStream();
        out.write("FOOBAR 1
".getBytes());
        out.flush();
        out.write("FOOBAR 2
".getBytes());
        out.flush();
        out.write("FOOBAR 3
".getBytes());
        out.flush();
        log.info("Done.");
    }

I get this in the end but do not see the progress as it occurs. What do I need to do to see the progress as it occurs?

Answer 1

There was one big issue and a few small issues with the original code posted in this question. The big issue was this line: resp.setContentType("text/plain");. Changing this line to resp.setContentType("application/text"); fixed the streaming issue on the server side. More substantial changes were made to the client code. The code below works and is a complete working solution for posting a multipart form to a server and getting a streaming response from the server as it occurs (several values are hard coded and need to be cleaned up but it gets the job done).

Sever Code:

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    log.info("----------");
    log.info("Doing post");
    resp.setContentType("application/text");
    OutputStream out = resp.getOutputStream();
    out.write("Writing file to server".getBytes());
    out.flush();
    writeZipFileToDisc(req, resp);
    out.write("

Done.
".getBytes());
    out.flush();
    log.info("Done.");
}

Client Code:

postUploadFile = function() {
    $("#status").val("");
    YES.getAndShowStatus("status", "${home}/Upload");
}

YES.getAndShowStatus = function(listenerId, url, successFunction) {
    // based on https://gist.github.com/sohelrana820/63f029d3aa12936afbc50eb785c496c0
    var form = $("#uploadForm")[0];
    var data = new FormData(form);
    $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: url,
        data: data,
        processData: false,
        contentType: false,
        cache: false,
        xhrFields: {
            // Getting on progress streaming response
            onprogress: function(e)
            {
                var progressResponse;
                var response = e.currentTarget.response;
                val = jQuery("#" + listenerId).val();
                jQuery("#" + listenerId).val(response);

            }
        }
    });

};