Q&A
https://blog.capilano-fw.com/?p=4452
https://reffect.co.jp/vue/vue-js-nprogress-js
この辺がわかりやすかったです。
大事なのはこの2つみたいですね。
NProgress.start();
NProgress.done();
axiosを用いて、サーバー側へデータを送り、サーバー側でプログラム処理を行なった結果をブラウザへ返すという一連の流れの中で、サーバー側でプログラムの処理が行われている間に、進捗状況を表示したいと考えています。
こちらの記事では、progressEvent.loadedを使用しているのですが、いまいち仕組みが分からないです。
サーバー側から、自動でどの程度プログラムの処理が進捗しているのかが、一定のタイミングで送られて来ているということなのでしょうか。
どなたか、ご助言頂けましたら幸いです。
回答1件
0
ベストアンサー
サーバー側での進捗状況の取得方法について
いわゆる「動画投稿サイトのサーバーサイドエンコーディング」のような長時間の進捗を把握する方法でしょうか。
Browser Server | : +------->+ : | << ここの進捗把握したい？ +<-------+ | :
ご参考にされている方法は upload イベントについての進捗表示になります
（上記、シーケンス図における (Browser)+------->+(Server) の矢線部分）。
サーバー側の進捗確認は、意図的な通信が必要です。
- Ajax で サーバー側の進捗状況を返却するAPIを実装する。
- WebSocket を利用してサーバー側の進捗状況を取得するなど。
axiosを用いて
axiosだけで実現するには前者になろうかと思います。
アップロードの伴わない事例
サーバー側で蓄積されたデータをCSVに変換してダウンロードさせる事例では
「10分後に再度アクセスしてみて」といったアナウンスで対応します。
これは「同一画面にユーザを縛り付けない」という、ユーザ体験上の配慮です。
Browser Server | : +------->+ << ブラウザ「サーバー側でやっといて！ +<-------+ << サーバー「10分後にまた来な : : +------->+ << ブラウザ「できた？ +<-------+ << サーバー「できてるぜ！ | :
参考にされているサイトや修正依頼コメント欄で案内されているサイトのように
「アップロード時（通信経路を情報が流れているタイミング）に限って進捗表示する」という方法で十分に思います。
投稿2020/10/13 21:56
総合スコア5434
ご回答ありがとうございます。
> いわゆる「動画投稿サイトのサーバーサイドエンコーディング」のような長時間の進捗を把握する方法でしょうか
いえ、こちらですが、文字列データを送信し、サーバー側でそれを元に処理を行わせる形で実装したいと考えております。
時間的にはおおよそ20~30秒程です。
自分が少々危惧している部分としましては、「(Browser)+------->+(Server)」であった場合、送信する文字列の文字数はほとんど変わらない為、サーバー側の処理に関係なくほとんど一定なのではないかなと思っているのですが、実際の所そうなってしまう可能性はありますでしょうか...?
> サーバー側の処理に関係なくほとんど一定なのではないかなと思っている
公開されている JavaScript によるアップロード時の進捗表示処理ですと、そのとおりですね。
20〜30秒の間のサーバー側の進捗を正しく表示しようとすると、Ajax等でサーバーに進捗状況を問い合わせる処理が必要になります（この問い合わせがサーバー負荷になる）。最大30秒程度でしたら、ブラウザ側で「カウントダウンタイマー」を表示するなどして、進捗表示を偽っておき、終わったであろう時間経過で確認する手もあります。
ご返信ありがとうございます。
>この問い合わせがサーバー負荷になる
そもそもの話、サーバーに進捗状況を問い合わせる処理の部分がサーバーの負荷になって、全体的に処理時間が増えてしまったら、本末転倒な気もしますよね...
>Ajax で サーバー側の進捗状況を返却するAPIを実装する。
こちら、少々気になったのですが、ajaxでデータを送った後に、サーバー側よりプログラムの進捗状況を確認し、返却する形になりますでしょうか...?
> ajaxでデータを送った後に、サーバー側よりプログラムの進捗状況を確認し、返却する形
そのとおりです。
ブラウザは、サーバーの進捗状況を知るために、何らかの方法で通信しなければならないためですね。
ありがとうございます。
どうするか、しっかりと検討してみたいと思います
何度もすみません。プラスでもう一点お伺いしたいことがあるのですが、質問に掲載させて頂きました記事では、ファイルアップロードする際にどれくらいかかるのかの進捗状況を表示する例かと思うのですが、これらは、ファイルの容量をaxiosでサーバー側で送る際に、自動で計算し、サーバー側へ全て送り終わるまでの時間を計算しているといった仕組みになっているのでしょうか?
アップロードイベントはブラウザ標準です。 「転送する総容量」「既に転送した容量」からアップロード中の進捗を得ます。以下のMDNの記事が参考になると思います。
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest の「進捗の監視」
https://developer.mozilla.org/ja/docs/Web/Events の「Progressイベント」
ありがとうございます。
記事に記載がありました「転送の進捗」がポイントになって来ますね。
色々と理解することが出来て、助かりました。
あなたの回答
tips
プレビュー
