2017-05-17 9 views
0

次の問題を解決したいと思います。私はThymeleafでSpring-MVCアプリケーションを持っています。私はシミュレーションタスクをトリガするポストリクエスト(フォームによって送信されます)を持っていて、数分かかることがあります。タスクは膨大な数のデータを処理し、JavaScript経由でプログレスバーを作成したいと考えています。 2つのセッションがある場合、シミュレーションは独立して起動され、各ブラウザは進行状況を示します。Spring MVC、Rest Ajaxコールおよびセッションスコープオブジェクト

現在のところ、私たちは解決策を持っていますが、実際にはうまく機能しません。

@Autowired SimulatorView view; // SESSION SCOPE 
@PostMapping("/view") 
public String run(@ModelAttribute(CHECKS) ChecksDto checksWrapper, Model model) throws InterruptedException, ExecutionException { 
    view.setStatisticDto(simulate(checksWrapper)); // Can take several minutes 
    return "simulation/result :: simulated"; 
} 

私は私のWebGUIのシミュレーションをトリガし、プログレスバーが表示されていたとJavaScriptを経て、私はの状態を求めるために頻繁に休憩メソッドを呼び出しています:

MVCコントローラは、POSTリクエストを取得します進捗。

RestController 
@RequestMapping("simulation/api") 
public class SimulatorApi { 
    @Autowired SimulatorView view; // SESSION SCOPE 

    @RequestMapping("/progressStream") 
    public double progressStream() { 
     return view.getProgress().progressStream(); 
    } 

    @RequestMapping("/progressInvoice") 
    public double progressInvoice() { 
     return view.getProgress().progressInvoice(); 
    } 
} 

私のJavaScriptのコードスニペットは、次のようになります。

function registerSimulationRunEvent() { 
    // this is the id of the form 
    $("#simulatorForm").submit(function(e) { 
     handleSimulationStarted(); 

     var url = location.protocol + "//" + location.host + "/fdsclient/simulation/view"; 

     $.ajax({ 
      type: "POST", 
      url: url, 
      data: $("#simulatorForm").serialize(), // serializes the form's elements. 
      success: function(data) { handleSimulationFinished(); }, 
      error:  function(xhr, error) { handleSimulationError(); } 
     }); 

     e.preventDefault(); // avoid to execute the actual submit of the form. 
    }); 
} 

function handleSimulationStarted() { 
    replaceResultPanelRunning(); // THYMELEAF FRAGMENT EXCHANGE 
} 

function handleSimulationFinished() { 
    stopResultPanelAnimation(); // STOP PROGRESS BAR ANIMATION 
    replaceResultPanelSimulated(); // EXCHANGE THYMELEAF FRAGMENT 
} 

function handleSimulationError() { 
    stopResultPanelAnimation(); 
    replaceResultPanelError(); 
} 

function replaceResultPanelRunning() { 
    var url = // URL; 
    $("#resultDiv").load(url); 
    startResultPanelAnimation(); 
} 

// ANIMATION 

var animationInterval = null; 

function startResultPanelAnimation() { 
    animationInterval = setInterval(animateResultPanel,4000); 
} 

function stopResultPanelAnimation() { 
    clearInterval(animationInterval); // stop the interval 
} 

function animateResultPanel() { 
    $("#simulatorProgressLabel").animate({opacity: '0.4'}, "slow"); 
    $("#simulatorProgressLabel").animate({opacity: '1.0'}, "slow"); 
} 

私は残りのサービスのためのセッションスコープを使用して知って悪いことですが、私は良いと簡単な解決策は何かまだ分からdidn`tの。一方、現在のところ、別のブラウザは独立してシミュレートすることができますが、常にプログレスバーが動作するとは限りません(特にトリガの最初の時間はほとんど動作しません)。 IE11は、開発者ツールが起動されている場合にのみ機能します。進行中にツールを無効にすると、プログレスバーが停止して拡大します。

Spring MVCとThymeleafでテンプレートエンジンを使用してプロセスを起動し、Javascript(Jqueryとして)を介して進行状況を表示する場合の良い解決策はどのようになっているのでしょうか。前もって感謝します。

答えて

0

は、少なくとも私は別のStackoverflowページで解決策を見つけ、次のようにAJAX要求を取得するために、コントローラのメソッドを変更する必要があります。魔法の言葉は、ajaxキャッシュをfalseに設定しています。

$.ajaxSetup ({ 
    // Disable caching of AJAX responses */ 
    cache: false 
}); 
0

私はJquery AJAX POSTの送信を使用して同様のことを行っています。このようなことをすることができます。これにより、JSON形式のPOSTリクエストがコントローラに送信され、応答を待ちます。この待機期間中に進捗UIコンポーネントを表示することができます。

   //Start Progress display 
       function setStatistic(){ 

        var data = JSON.stringify(//build your ChecksDto) 
        if (data) { 
         $.ajax({ 
          url : '/view', 
          headers : { 
           'Content-Type' : 'application/json' 
          }, 
          method : 'POST', 
          dataType : 'json', 
          data : data, 
          success : function(data) { 
           if (data.status == 200) { 
            // Stop Progress display 
            // Handle success status 
           } 
          }, 

          error : function(xhr, status, error) { 
           // Stop Progress display 
           // Handle errors here 
          } 
         }); 
        } 
       } 

また

@ResponseBody 
@PostMapping("/view") 
public String run(@RequestBody ChecksDto checksWrapper, Model model) throws InterruptedException, ExecutionException 
+0

返信いただきありがとうございます。私は質問を編集してより明確にしました。私のコントローラは、タイムリーフフラグメントをプログレスバーのhtmlスニペットに置き換えます。この断片には、JavaScriptによって制御されるプログレスバーがあり、頻繁にバックエンドにajax経由でステータスを問い合わせています。バックエンドはSESSIONオブジェクトのステータスのみを与える必要があります。セッション(2つのブラウザウィンドウ)が必要な場合は、独立して動作する必要があります。 FireFoxとChromeでは主に動作しますが、IEは開発者ツールが開かれたときに限り動作します。私の質問は、セッションオブジェクトがあればRestを介してセッションオブジェクトにアクセスする良い方法です。 –

関連する問題