sasanquaneuf
@sasanquaneuf

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Webアプリケーションで進捗返却が必要な場合のベストプラクティス

Webアプリケーションにおいて、ある程度時間がかかる処理をする場合に、ユーザーに進捗を見せたい場合のベストプラクティスについて考えています。ぜひ意見をください。
以下のような案がありえるかなと思います。

  • 特殊なことを何もせずに、普通に返却させる(つまり進捗を見せない)
  • タスクキューなどで別プロセスで処理を実行させることにして、進捗をポーリングする
  • 引き受けたプロセスで処理を行い、返却方法をStreamingにして、XHRで進捗を表示する
    • この場合、デファクト・スタンダードみたいなボディの返却方法はあるのでしょうか?
  • 引き受けたプロセスで処理を行い、WebSocketをつかう
  • gRPCをつかう
0

妄想しただけなので解決になるかわかりませんが、SSEというものが存在するみたいです。
https://developer.mozilla.org/ja/docs/Web/API/Server-sent_events/Using_server-sent_events

処理を開始した時点で、SSE用のエンドポイントを準備し、クライアントにそのURLを返してストリームのセッションを開かせるとかどうでしょう。
IEにはパーサーがないらしいですがpolyfillもあるみたいなので、XHRだけでも気合でいけると思います。

1Like

回答ありがとうございます!参考にします。
ちなみに、ストリームで返却する場合、そのフォーマットのデファクトスタンダードみたいなものはないのかな、というのが元々一番気になっていたことでした。
NDJSONみたいなので返すのがよいのか、などなど
http://ndjson.org/

0Like

SSEで使われるContentTypeがtext/event-streamというものになっているらしいのですがこういうプロトコルじゃなくて、より高レベルな部分のプロトコルっていう感じですかね?

この API の利用法は、 EventSource オブジェクトを作成して,イベントリスナを登録するだけである。
var source = new EventSource('updates.cgi');
source.onmessage = function (event) {
alert(event.data);
};
サーバ側のスクリプト(この事例では "updates.cgi" )は、 MIME 型に text/event-stream を伴うメッセージを,次の形で送信する:
data: 第一メッセージ

data: 第二メッセージ
data: このメッセージは 2 行からなる

data: 第三メッセージ

作者は、異なるイベント型を利用することにより,各イベントを分類できる。 ここに 2 種のイベント型, "add", "remove" が含まれたストリームがあるとする:
event: add
data: 73857293

event: remove
data: 2153

event: add
data: 113411
そのようなストリームを取り扱うスクリプトは、次の様になるであろう( addHandler, removeHandler は、 1 個のイベント引数をとる関数とする):
var source = new EventSource('updates.cgi');
source.addEventListener('add', addHandler, false);
source.addEventListener('remove', removeHandler, false);

dataの中身は任意のテキストらしいのでJSON.parseとかを挟んでなんでも送れるんじゃないかなーと思います

1Like

そうですね、より高レベルのプロトコルというか、アプリケーションレイヤーで受けるデータの様式みたいなものも含め、各レイヤーそれぞれのベストプラクティス/デファクトスタンダードみたいなものがないかなというのか関心事でした。
普通のストリームと比較すると、前回処理したデータみたいなものがくっついてこないので多少扱いやすいかも、みたいなメリットはありますが、この辺最近のデファクトスタンダードみたいなものないのかな、というのがこの質問の動機です。

0Like

Your answer might help someone💌