大きなデータの処理中に進捗状況が表示される

Question

質問があります実行するWebアプリケーションがあります。大きなファイルを処理する必要があります。その間に5秒かかることがあります。その間、ファイルが処理中であることをユーザーに示すか、最善の方法で何回情報を送信して終了するかを示します。これは最初のページで、私は2回res.renderを送信することはできませんので、これを行う方法？

var fileinarray = require('./readfile'); 

app.get('/', function(req, res){ 
    var dataready = fileinarray; 
    res.render('index', {data: dataready}); 
}); 

どのように私は彼をすることができますか？私はsocke.ioについて少しは読んだけど、私の場合はどうやって使うの？

はあなたの助けをありがとう

Answer 1

あなたはこの要求に（それがどのように見える）のページをロードしている場合は、あなたはそれがブラウザをダウンロードして待機しているため構造持つ方法で進行状況を表示することはできませんあなたのページをレンダリングするまで、そのウィンドウに何も表示することはできません。しかし、あなたはページがそこに着く前に進歩を見せたい。

したがって、物事の仕組みを再構成する必要があります。まず、進行状況を表示するには、ブラウザに進行状況を表示できる作業ページが必要です。つまり、ブラウザがページが到着するのを待つことはできません。私が考えることができる最も単純な方法は、シェルページを最初にレンダリングして、サーバーがすぐに返されるようにすることです（元のコンテンツを待つことなく）。そのシェルページには進捗状況を示すコードがあり、長時間実行されているデータを取得するようにサーバーに要求を出します。 AjaxとwebSocketを使用してこれを行う方法はいくつかあります。私はいくつかの組み合わせの概要を説明します：一方、ページをレンダリングした後、サーバーが長時間実行を開始

すべてのAjax

1. とブラウザが/ページを要求すると、サーバーは
2. シェルページをレンダリング所望のデータを取り出すプロセス。
3. トランザクションIDを含むJavascript変数です
4. 一方、クライアントサイドのJavascriptは定期的にサーバーにAjaxリクエストを送信して、指定されたトランザクションIDの進行状況を確認します（10秒ごと） 。サーバーは有用な進捗情報を返し、クライアント側のJavascriptは進捗情報を表示します。
5. サーバーはデータで完了し、進行状況をチェックしていた通常のAjaxリクエストのいずれかがすべてのデータとともに返されます。クライアントサイドのJavascriptはこのデータを現在のページに挿入し、操作は完了です。ほとんどのWebSocket
   1. と

   ブラウザは/ページを要求すると、サーバーは、シェルのページをレンダリングシェルページ内の

6. クライアント側のコードは、へのWebSocketやsocket.io接続を行いますこのページに属するデータの初期要求を送信します。
7. サーバーはwebSocket接続とデータの初期要求を受け取り、データを取得するための長期実行プロセスを開始します。
8. サーバーは意味のある進捗情報を持っているため、webSocket/socket.io接続を介してクライアントに送信し、クライアントがその情報を受け取ると、ページに適切な進捗状況を表示します。
9. ある時点で、サーバーはデータを取得して終了し、クライアントに最終データを含むメッセージを送信します。クライアント側のJavascriptはこのデータを受け取り、それをページに挿入します。
10. クライアントはwebSocket/socket.io接続を閉じることができます。