ダウンロードアップロード中の進捗表示

Question

Rails でファイルのインポートやダウンロードのついたシステムを開発中なのですが
サイズの大きいファイルのダウンロードやアップロード中
左下に localhost を待機しています
とでるだけで本当に処理がすすんでるのかどうかわかりにくいです

途中で進捗報告を表示して画面を更新するにはどのような機構を使えばいいのでしょうか

ダウンロードボタンと同時にクライアントで JS を起動しておいて
一定時間ごとにサーバーに進捗を問い合わせて結果で画面のDOMを更新
みたいな方法しか思いつかないのですが
どの接続がどの進捗をほしがってるのか対応をとるのも大変そうだし
普通はどのような方法を使うのでしょうか

追記：

ファイルインポート・エクスポートに進捗報告をつける方法をずっと調べていたんですが
Rails でコントローラーが処理中に進捗報告等の別のリクエストに返答を行いたい場合
非同期処理についていろいろ調べたのですがどれも別のジョブサーバーを立ててキューを保存するらしく
本当にそんなことまでしないと進捗報告というのは実現できないのでしょうか

Apache では普通に別リクエストには別のプロセスがわりあてられて
同時処理してくれる気がするのですがRailsでできないのは何か理由があるのでしょうか

別にサーバーをたてるとなるとリソースやキューのモニターやログの監視も必要になるし
同じクラウドのマシン上で動かすとリソースも問題になるし
とくにいずれもアップロードしたファイルや生成したダウンロードファイルをジョブサーバーとコントローラーでやりとりしなければいけないので非常に無駄な気がするのです

学生時代に習った低レベルのTCPソケット通信であればインポートの場合
アップロードリクエストをうけとったら進捗メッセージを徐々に返して
それをJSでゆっくりよめばいいだけだし
エクスポートでも準備中に少しずつ進捗メッセージを返して
準備完了メッセージを返したらそれ以降をダウンロードデータとみなすみたいにすれば
１度のリクエスト＋レスポンスだけで実現できる気がするのですが今のウェブ技術では不可能なのでしょうか

一応少しずつレスポンスしたりそれをよんだりするのはSSEやFETCHという技術でできるみたいなのですが
どちらもテストコードをかいて通信するところまではできたのですが
POSTでリクエストを送ってそのままそのコネクションを使ってレスポンスをストリームでうけるというのができないみたいで…
そうなると別のコントローラーを叩くことになっていずれにしろRailsに並列処理が求められます

追記

Rails:

self.response_body = Rack::Chunked::Body.new(Enumerator.new do |y| 

参考：　http://ode.hatenadiary.jp/entry/20120123/1327301403

javascript:

fetch()
      .then((response) => response.body.getReader())
      .then((reader) => {}

参考：　https://sbfl.net/blog/2018/05/26/javascript-streams-api/

でファイルアップロードリクエストの後レスポンスをストリームでうけとれるようにできました
ただせっかく実装して動作までしたのに今回の案件の動作環境にはいっていたIE11がFetchに非対応だったのでまた別の方法が必要みたいです…

IE11で動くJS側でレスポンスを途中で読む方法はないでしょうか…

Answer 1

ベストな方法かわかりませんがご参考までに。

ダウンロードのリクエストを投げると同時に以下のsetIntervalをおこなって
レスポンスを待ち受けるという方法は使った経験があります。

ダウンロードファイルのレスポンスヘッダーにCookie「downloaded=yes」ををセットするようにして
ファイルがダウンロードできたと同時に完了が検知できます。
開始のエフェクトで砂時計をだして完了のエフェクトで表示を消すイメージです。

//開始のエフェクト

downloadLoadingTimer = setInterval(function () {
			            var cookieData = getCookies();
			            var downloadCookie = cookieData["downloaded"];
				        if(downloadCookie != undefined && downloadCookie == "yes"){
                            setCookies("downloaded", "no");
                            clearInterval(downloadLoadingTimer);
                            // c4s.sleep(2500);

                            //完了のエフェクト
                        }
                    }, 100);

function getCookies() {
			var result = new Array();
			var cookies = document.cookie;
			{
				var cookiesArray = cookies.split( '; ' );
				for( var i = 0; i < cookiesArray.length; i++ )
				{
					var cookie = cookiesArray[ i ].split( '=' );
					result[ cookie[ 0 ] ] = decodeURIComponent( cookie[ 1 ] );
				}
			}
			return result;
		}

function setCookies(key, value) {
			var expire = new Date();
				expire.setTime( expire.getTime() + 1000 * 3600 * 24 * 365 * 100 );
			document.cookie = key + '=' + encodeURIComponent(value) + '; expires=' + expire.toUTCString() + ';path=/';
		},

あとはそもそも同じようなことを質問している方がいましたのでそちらも参考になるかと
https://teratail.com/questions/82898

Comments

[退会済みユーザー]

ありがとうございます
最後にはっていただいたリンクをすでに教えていただいていて
そこを参考にしてずっと試行錯誤してレスポンス完了時にJSを実行できるようにはなったんですが
AJAXでリクエストを送ると肝心のダウンロードが行われなくて途方にくれてたところでした

クッキーを扱うのもはじめてなんですが他に手段がなくてこまってたので試してみたいと思います
ありがとうございます

[退会済みユーザー]

今回の案件では指定されていないのですがクライアントに官庁系が入ったりするとクッキーを使えないことがあるみたいで、できれば汎用的に使いませるようにクッキーを使わない方法を知りたいです
せっかく回答いただいたのに申し訳ありません

ちなみにリンク先の記事をよんでみたんですがどうもダウンロードアップロード自体にはファイルサイズをみて進捗を取得するイベントが存在していて簡単にかけるみたいですね
試しにつけてみたのですが一瞬で終わってしまって
今回時間がかかるのはダウンロード前のファイルの準備やアップロード後のインポート処理みたいなので Rails 側から進捗を受け取るしか方法がないみたいです