在 Python-Flask 应用程序上执行多个 AJAX 请求时出现 Chrome 浏览器错误

Question

我目前正在使用命令“python3 -m flask run -h localhost -p 8081”在 localhost:8081 上运行烧瓶服务器。用户可以点击按钮触发事件；此外，数据更新被动态推送到从 javascript 间隔触发的绘图图。

当两个异步 AJAX 请求同时运行时，google-Chrome 会出现问题-->

页面上有处理其他操作的控件（例如开始按钮）。运行 mozilla firefox 时，这两个请求都将毫无问题地执行。但是，当使用谷歌浏览器时，按钮点击请求会在几秒钟后开始挂起，需要更长的时间才能到达“req.done”功能，直到最终崩溃页面。在下面的代码中，我编写了一些控制台日志，在浏览器控制台中显示按钮单击事件在运行几秒钟后停止从 python 路由回复“随机字符串”。这似乎是 chrome 特有的问题，因为这在 Firefox 上始终有效。

请告知 - 我怎样才能改变它以在两个浏览器中可靠地工作？

代码

这里是 javascript-jquery AJAX 请求：

var numerical_count_rate = document.getElementById("totalCounts");
var numerical_error_rate = document.getElementById("errorRate");
var start_btn = document.getElementById("startButtonClick");

var start_btn_clicked = function (){
    console.log("button clicked...")
    req = $.ajax({
        url : "/_start_button_clicked",
        type : "POST",
    });
    console.log("button got this far...")
    req.done(function(data){
        console.log("button got even further !!")
        var data_test = JSON.parse(data)
        var update = data_test.random_string
        console.log(update)
    });
};

var updateInterval = setInterval(update_values, 1000);
    var counts = 0;
    console.log("update_interval fired..")
    function update_values(){
        req = $.ajax({
            url : "/_extend_plot",
            type : "POST",
        });
        req.done(function(data){
            var updates = JSON.parse(data);
            var count_rate_update = {x: [[updates.x_count_rate]],y: [[updates.y_count_rate]]};
            var error_rate_update = {x: [[updates.x_error_rate]],y: [[updates.y_error_rate]]};
            Plotly.extendTraces('plotly_countrate',count_rate_update, [0], 50);
            Plotly.extendTraces('plotly_errorrate',error_rate_update, [0], 50);
            numerical_count_rate.innerHTML = "Total Count Rate: " + updates.y_count_rate.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
            numerical_error_rate.innerHTML = "Error Rate: " + parseFloat(updates.y_error_rate).toFixed(3).toString() + "%";
        });
        window.onresize = function() {
            Plotly.Plots.resize( 'plotly_countrate' );
            Plotly.Plots.resize( 'plotly_errorrate' )
            };
        counts++;
        console.log(counts)
    }

这是来自主线程的 sn-ps --> ajax 请求在主 app.py 文件中引用的 Flask 路由：

from flask import Flask, render_template,  request
import queue
import threading
import plotly
import json
import pandas as pd
import numpy as np
import random
import datetime


app = Flask(__name__)


@app.route("/", methods=['GET'])
def index():
    initial_graphs_json = create_plots()
    return render_template("index.html", count_rate_plot=initial_graphs_json[0], error_rate_plot=initial_graphs_json[1])


@app.route("/_extend_plot", methods=['GET', 'POST'])
def push_update():
    timestamp = get_datetime()

    updated_data = queue_q.get()
    with queue_q.mutex:
        queue_q.queue.clear()
    client_post_updates = dict(
        x_count_rate=timestamp,
        x_error_rate=timestamp,
        y_count_rate=updated_data["val0"] + updated_data["val1"],
        y_error_rate=updated_data["val2"])

    updatesJSON = json.dumps(client_post_updates, cls=plotly.utils.PlotlyJSONEncoder)
    return updatesJSON


@app.route("/_start_button_clicked", methods=['GET', 'POST'])
def startstop_clicked():
    update_dict = dict(
        random_string="randomstring"
    )
    print("Python click method triggered...")
    update = json.dumps(update_dict)
    return update


if __name__ == "__main__":
    app.run(host="0.0.0.0", port="8081", debug=True)

running-python 3.7 版，jquery 3.5.1 版

Answer 1

更新：已解决

通过将函数转换为异步调用并将短轮询更改为长轮询来解决问题。似乎 chrome 已经内置了使请求处于“挂起状态”的功能，并且短的轮询间隔正在用新请求填满浏览器队列，这导致了停滞。仍然不完全清楚为什么这不会在 Firefox 上发生，但基于单个计时器的长轮询在互斥锁和服务器端线程之间的公共内存的控制下是更好的整体实践。这样，推送更新的频率仅由可用数据控制，而不是在计时器上轮询。

新的 JS 代码：

var start_btn_clicked = async function (){
    req = $.ajax({
        url : "/_start_button_clicked",
        type : "POST",
    });
    req.done(async function(data){
        var data_test = JSON.parse(data);
        var update = data_test.random_string;
    });
};

update_values();
async function update_values(){
    req = $.ajax({
        url : "/_extend_plot",
        type : "POST",
        async: true,
        cache: false,
        timeout: 30000,
        success: async function(data){
            console.log(req);
            var updates = JSON.parse(data);
            var count_rate_update = {x: [[updates.x_count_rate]],y: [[updates.y_count_rate]]};
            var error_rate_update = {x: [[updates.x_error_rate]],y: [[updates.y_error_rate]]};
            Plotly.extendTraces('plotly_countrate',count_rate_update, [0], 50);
            Plotly.extendTraces('plotly_errorrate',error_rate_update, [0], 50);
            numerical_count_rate.innerHTML = "Total Count Rate: " + updates.y_count_rate.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
            numerical_error_rate.innerHTML = "Error Rate: " + parseFloat(updates.y_error_rate).toFixed(3).toString() + "%";
            setTimeout(update_values, 1000);
        },
    });
    window.onresize = async function() {
        Plotly.Plots.resize( 'plotly_countrate' );
        Plotly.Plots.resize( 'plotly_errorrate' );
        };
}