show progress of multiple threads (generated by spring async) in html page

Question

I'm using thread pool task executor with Asynchronous annotation, I have 100000 operations divided through multiple threads using spring thread pool task executor.this means that there are 200 threads each will loop through 500 operations. I want to show the progress of all theses operations in html progress bar.What is the best way to do this? and how?. What about using future object or web socket?

Edit: i tried to used Ajax function that call api which retrieve data from my sql dB... It's working, but frequent requests to dB exhausting the application and consuming connections to the dB.

thanks in advance.

Answer 1

I ended up with 2 answers which i found in : first helpful answer i could not understand it first cause i didn't know what is ajax at that time, but after spending some time i used it with some modification to make it simple in my jsp i added my progress bar div :

<div class="row">
<div class="progress">
    <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="70"
                             aria-valuemin="0" aria-valuemax="100" style="width:0%;">
    <div id="label">0%</div>
    </div>
</div>
</div>

you can find some description of progress element and how to style it in progress element style

then i added jquery script as below

<script>
    $(document).ready(function () {
     
        var width = 0;
        var id = setInterval(frame, 5000);

        function frame() {
            if (width >= 100) {
                console.log("task is completed"+width);
                clearInterval(id);
                window.location.href = "completed_url";
            } else {
                console.log(width);
                $.ajax({
                    url: "/progress",
                    success: function (progress) {
                        $('#progressBar').css('width', progress + '%');
                        document.getElementById("label").innerHTML = progress * 1 + '%';
                        width = progress;
                    },
                });
            }
        }

    });
</script>

note that the setInterval(frame, 5000) will execute frame function every 5 sec. i choose 5 to not consume my connections to Db.

ajax function will send get request to the url specified, if the success response it assign the return value to progress variable in success: function (progress), you can find a link to the most popular way to do an http request in java script here

to move the bar i used .css function.

to increase lable value i used document.getElementById("label").innerHTML.

in my controller:

    @RequestMapping(value = "/progress", method = GET)
    public @ResponseBody
    int getProgress() {
        return myService.getProgress();
    }

whenever a task is executed by task executor with @Async its status will be updated tin db, getProgress() function will calculate the progress from db.

the second way without query from db id to use use atomic integer to hold the progress value, but it seems to work for one task. I dont know how to differentiate between multiple requests to task executor if exists.