async function stops while backend threadpoolexecutor is running

Job ID: 35905844

Budget: €30 – €250 EUR

I am trying to build a progress bar on my home page (index.html) using async function. async function awaits for fetch from flask function @progress, and based on the fetched data, it updates the progress bar.

In flask, I have multithreaded API calls, which are initiated within @home function after the submit button is pressed from the index.html page. Submit button is part of a wtf form.

After succesful completion of threads, there is redirect to @output where the result is displayed in output.html.

This works perfectly in chrome browser in PC environment. However, in azure hosted environment, the async javascript function stops while the threadpoolexecutor is running in the backend. I cannot see the async function running in the log stream. The progress bar also stops updating since async has stopped.

Just before redirect for output, the last status is displayed in the progress bar.

** Backend Flask**

@app.route('/', methods=['GET', 'POST'])
def home():
global TEMP_FILES
topic_form = TopicForm()
threads = []
if topic_form.validate_on_submit():
with ThreadPoolExecutor(max_workers=20) as executor:
for index, pdf_path in enumerate(TEMP_FILES):
threads.append(executor.submit(xxx, xxx,xxx))

wait(threads)
return redirect(url_for('output'))
return render_template("index.html", topic_form=topic_form)


@app.route('/progress/<int:file_id>')
def progress(file_id):
try:
status_dict = {'status': 'xyz, 'value':'123'}
except IndexError:
status_dict = {'status': "Start", 'value': "1"}
return json.dumps(status_dict)

**In the index.html**

<form method="POST">
{{ topic_form.csrf_token }}
{{ topic_form.submit }}
</form>

<p>The executions takes about 20 - 30 secs per file.</p>

<h5>File 1 - Progress Bar</h5>
<div class="progress progress-striped active">
<div id="file0-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 1%">Start</div>
</div>

**Script**

<script>
var timeout;

async function getStatus() {

let get_0;

try {
const res_0 = await fetch("/progress/0");
get_0 = await res_0.json();
} catch (e) {
console.error("Error: ", e);
}

document.getElementById("file0-bar").innerHTML = get_0.status;
document.getElementById("file0-bar").style.width= get_0.value + "%";

timeout = setTimeout(getStatus, 1000);
}

getStatus();
</script>
Related categories: JavaScript Python Software Architecture HTML5 Flask