javascript - 在模态窗口中显示运行进程的进度

Question

我目前正在尝试使网页看起来更现代一些，但在向模式窗口添加一些相对简单的功能时遇到了一些麻烦。

在我的网页上，用户首先上传一个文件，然后点击提交后，该文件将由 shell 脚本进行处理(根据文件大小，可能需要几秒到几分钟的时间)。

我一直在使用 php 执行以下代码来显示进程状态:

$cmd = "script.bash -i $input_file";

$PID = shell_exec($cmd . " >> $log 2>&1  & echo $!");

while(is_process_running($PID)){
   echo(" . ");
   ob_flush(); flush();
   sleep(3);
}

除了显示的一些其他信息(未显示)之外，这只会打印出一个“.”。每隔几秒向用户指示进程正在运行。完成后，将出现一个下载链接，以便可以检索已处理的数据。

我现在想做的是将这些信息加载到模式窗口中。我可以毫无困难地创建模态窗口(使用 boostrap 和 javascript)并向其添加下载功能，但只有在通过 php 执行的 $cmd 完成后我才能执行此操作。我想做的是执行 $cmd，加载模式窗口，然后查询进程状态并在模式窗口中显示某种指示器，最后在进程完成时创建下载链接。我相信这需要通过 AJAX 来完成，但我对如何做到这一点有点困惑。这是我的代码，更详细一些:

<?
    if($theaction == "run_script" and !$error_msg){
        $cmd = "script.bash -i $input_file";

        $PID = shell_exec($cmd . " >> $log 2>&1  & echo $!");

        while(is_process_running($PID)){ #ensure the process is compete before loading the html
            echo("");
            ob_flush(); flush();
            sleep(3);
        }

        echo "
            <script type=\"text/javascript\">
                $(function() { $(\"#myModalProcess\").modal('show') })
            </script>


            <div class=\"modal fade\" id=\"myModalProcess\" tabinex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
                <div class=\"modal-dialog\">
                    <div class=\"modal-content\">
                        <div class=\"modal-header\">
                            <h4><b>Process ID: $PID</b></h4>
                            <hr>
                            <p>Other stuff here</p>
                            <a type=\"button\" class=\"btn btn-primary\" href='".$_SERVER['PHP_SELF']."?theaction=download&workDir=$workDir&out_folder=$out_folder'>Download Results</a>
                        </div>
                    </div>
                </div>
            </div>
        ";
    }
?>

Answer 1

我会为你阐明流程，但我不会给你代码，因为写起来太长了，我认为你最好首先需要理论来理解你需要开发什么。

因此，第一个错误是在运行 php 脚本后尝试执行 javascript 和 html(模式)代码。

你应该做的是使用ajax，这样你就可以通过“ajax”运行你的php脚本(里面有你的shell脚本)，并且，再次使用ajax你可以在php脚本运行时询问进度。

我知道，所有这些都应该有点简单，但问题是这里混合了复杂的东西:

1. 您无法离开该页面。如果您使用 multipart-form/data 提交表单来上传文件，浏览器将开始上传，发出请求，当 php 脚本完成时，整个页面将重新加载。在那里你失去了对页面的控制，你只需将控制权传递给浏览器。
2. 您有 2 个进程需要时间并且需要进度状态:文件上传和脚本进程。但让我们跳过第一个。
3. 为避免提交表单时离开页面，需要通过ajax提交。这是link了解如何去做。
4. 要获取进度，您有两种方法:第一种是使用 jQuery ajax progress via xhr第二个是在 javscript 中“设置一个间隔”，通过 ajax 每 {x 次}(即:每 3 秒)检查一次进度，当进程完成时，清除该间隔以停止检查。您可以通过对路径执行 ajax 请求来检查，该路径中有一个返回进度的脚本(它可以是一个 php 文件 -> 即:www.yourhost.com/your_action/progress.php)。
5. 当脚本运行时，您需要将进度保存在“用户全局上下文”(即:cookie、带有用户 ID 的文件、一些缓存等)中，因此当您“检查进度”时(第 4 步) ，您将发出请求并要求任何请求都可以使用用户数据访问的值。或者只是使用“通过 xhr 进行 jQuery ajax 进度”，阅读文档并使其按这种方式工作:)
6. 流程完成后，只需停止显示或询问进度，显示链接或结果，无需重新加载页面!

希望这对您有所帮助，如果您有任何其他具体问题，请询问:)