CakePHPでの処理状況をフロント側で取得し、プログレスバーで進捗を表示したい。

Question

現在、「CakePHP3」と「javascript(jQuery)」を使用し、
以下のようなことをしようと思っております。

※下記のコードは参考程度のものです。

---

1: フォームからExcelファイルをアップロード。
（ファイル情報はajaxにて送信）

2: アップロードされたExcelファイルからのデータを取り出す。
（PHPExcelなど用いてセルの値など取得）

3: 取り出したデータをDB（postgres）へ、バルクインサート。

4（※悩み箇所）: バルクインサート時に、
最大行（$maxRow）と処理行数（$count）をフロント側で取得し、
プログレスバーにて処理状況を表示。

5:インサート終了後、ajaxのsuccessに返る。

$(function(){
    $('.import-btn').click(function(){
        var formData = new FormData();
        $.ajax({
            type : 'POST',
            data : formData,
            processData : false,
            contentType : false,
            url : '<?= $this->Url->build(["controller"=>"Test","action"=>"excelUpload"]) ?>',
            success: function(json) {
                // ここに来るのはバルクインサート完了後
            }
        })
    });
});

// ajaxが飛ばされた excelUpload() の途中によばれます。
// $excelData [
//    '0' = [
//        ['1行目', 'です', '。']
//        [......] 
//        ['100行目', 'です', '。']
//    ],
//    '1' = [
//        ['101行目', 'です', '。']
//        [......] 
//        ['200行目', 'です', '。']
//    ],
// ];
public function  importExcel($excelData, $maxRow)
{
    $this->autoRender = false;
    
    $count = 0;

    foreach ($excelData as $data) {
        $query = $this->test->query()
            ->insert(['value01', 'value02', 'value03']); 
        foreach ($data as $rowData) {
            // 最大100行のデータを values() にセット
            $query->values($rowData);
            // 処理行数（これをフロント側で定期的に取得したい）
            $count ++:
        }
        $query->execute();
    } 
}

---

というように、ajaxを飛ばした後 success に返ってくるまでに
フロント側が定期的に 処理行数（$count）を取得し、
その値などでプログレスバーを動かし表示することは可能なのでしょうか？

また、ajaxを飛ばすのは一度きりという制限は設けていませんので、
複数回ajaxを使用すれば、ajaxのタイミングを変えれば処理状況に応じてのプログレスバーの表示が可能かもしれない

など、様々なアドバイスをいただけると幸いです。

Answer 1

一括インサート時は発行数は何件インサートしようが発行回数は1になるはずですがセッション上などアクセス可能な場所に件数を保存すれば可能かと思われます。

Answer 2

javascriptは基本的にシングルスレッドなのでこの方法では無理です。
(WebWorkerという仕組みがあるらしいですが、私は詳しくはありません。)

この枠組みでやるのであれば、
・アップロードのメソッドはファイルのアップロードを受け付けのみで、進捗状況取得用のIDを返す。
・インポート処理はバックエンドで行う。
・DBへのインポートはバルクインサートだと処理が返ってこないので進捗はわからない。1レコード毎（もしくはｘｘ件毎バルクインサートする）やるしかないと思います。
・バックエンド処理では、進捗状況はセッションなどで保管し、フロントでAJAXから進捗状況を取得できるよう別途アクションを作成し、処理が終わるまで定期的に実行してプログレスバーを表示。

というような感じかなと思います。

アップロードの進捗状況だけであればjavascriptだけでできるようではありますが…。

HTML5 – ファイルアップロード プログレスバー付
http://blog.webalbum.jp/it-azusa/?p=507