异步请求中PHP长任务进度更新的挑战与解决方案

<?php
// progress.txt 文件用于存储进度信息
$file = "progress.txt";

// 模拟耗时操作，循环10次，每次暂停1秒
for($i = 1; $i <= 10; $i++){
    sleep(1);
    // 更新进度文件
    file_put_contents($file, ($i * 10));
}
echo "done"; // 任务完成时响应
?>

<?php
$file = "progress.txt";
// 读取进度文件内容
$data = file_get_contents($file);
echo $data; // 返回当前进度百分比
?>

<style type="text/css">
    #container{
        width: 300px;
        height: 20px;
        border: solid thin #aaa;
    }
    #progress{
        background-color: lightblue;
        height: 100%;
        width: 0%; /* 初始宽度为0 */
        color: grey;
        text-align: center;
    }
</style>

<div id="container"><div id="progress">0%</div></div>
<button id="start" onclick="begin(event)">Start</button>

<script type="text/javascript">
    var prog = document.getElementById('progress');
    var button = document.getElementById('start');
    var timer; // 用于存储setInterval的ID

    function begin(event){
        // 发起第一个AJAX请求，启动长时间运行的PHP脚本
        var xhr = new XMLHttpRequest(); // 注意这里声明为局部变量
        xhr.open("POST", "script.php", true);

        xhr.onload = function(){
            if(xhr.status === 200){
                alert(xhr.responseText); // 任务完成时弹窗
                clearInterval(timer); // 清除进度查询定时器
                prog.style.width = "100%"; // 确保最终显示100%
                prog.innerHTML = "100%";
            }
        };

        // 启动定时器，周期性查询进度
        timer = setInterval(checkProgress, 100);
        xhr.send();
    }

    function checkProgress(event){
        // 发起第二个AJAX请求，查询进度
        var xhr2 = new XMLHttpRequest(); // 注意这里声明为局部变量
        xhr2.open("POST", "checkprogress.php", true);

        xhr2.onload = function(){
            if(xhr2.status === 200){
                var percentage = xhr2.responseText;
                prog.style.width = percentage + "%";
                prog.innerHTML = percentage + "%";
            }
        };
        xhr2.send();
    }
</script>

<?php
// 假设任务总共10步
$totalSteps = 10;
$progressFile = "progress_state.json"; // 使用JSON文件存储更复杂的任务状态

// 读取当前任务状态，如果不存在则初始化
if (!file_exists($progressFile)) {
    $taskState = ['current_step' => 0, 'status' => 'initialized', 'message' => ''];
    file_put_contents($progressFile, json_encode($taskState));
} else {
    $taskState = json_decode(file_get_contents($progressFile), true);
}

// 获取客户端请求的当前步骤
$requestedStep = isset($_POST['step']) ? (int)$_POST['step'] : $taskState['current_step'];

// 如果客户端请求的步骤大于当前记录的步骤，或者当前任务已完成，则不执行
if ($requestedStep > $taskState['current_step'] || $taskState['status'] === 'completed') {
    echo json_encode($taskState); // 返回最新状态
    exit;
}

// 模拟执行当前步骤
if ($requestedStep < $totalSteps) {
    sleep(1); // 模拟每一步的耗时操作
    $taskState['current_step'] = $requestedStep + 1;
    $taskState['progress'] = ($taskState['current_step'] / $totalSteps) * 100;
    $taskState['status'] = 'processing';
    $taskState['message'] = "Step " . ($requestedStep + 1) . " completed.";
    file_put_contents($progressFile, json_encode($taskState));
} else {
    $taskState['status'] = 'completed';
    $taskState['progress'] = 100;
    $taskState['message'] = "Task completed successfully.";
    file_put_contents($progressFile, json_encode($taskState));
}

echo json_encode($taskState);
?>

<div id="container"><div id="progress">0%</div></div>
<button id="start">Start Segmented Task</button>
<div id="status_message"></div>

<script type="text/javascript">
    var prog = document.getElementById('progress');
    var startButton = document.getElementById('start');
    var statusMessage = document.getElementById('status_message');
    var currentTaskStep = 0; // 客户端维护的当前任务步骤

    startButton.onclick = function() {
        startButton.disabled = true;
        currentTaskStep = 0; // 重置步骤
        prog.style.width = "0%";
        prog.innerHTML = "0%";
        statusMessage.innerHTML = "Task started...";
        executeNextStep();
    };

    function executeNextStep() {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "task_manager.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.onload = function() {
            if (xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                prog.style.width = response.progress + "%";
                prog.innerHTML = Math.round(response.progress) + "%";
                statusMessage.innerHTML = response.message;

                if (response.status === 'completed') {
                    alert("Task finished!");
                    startButton.disabled = false;
                    currentTaskStep = 0; // 任务完成，重置
                } else if (response.status === 'processing') {
                    currentTaskStep = response.current_step; // 更新客户端步骤
                    // 继续执行下一个步骤
                    setTimeout(executeNextStep, 100); // 稍作延迟，避免请求过快
                }
            } else {
                statusMessage.innerHTML = "Error: " + xhr.status;
                startButton.disabled = false;
            }
        };

        xhr.onerror = function() {
            statusMessage.innerHTML = "Network error occurred.";
            startButton.disabled = false;
        };

        xhr.send("step=" + currentTaskStep);
    }
</script>