1. ホーム
  2. javascript

AngularJSとWebワーカー

2023-11-16 22:05:47

質問

angularJSはどのようにウェブワーカーを使用してバックグラウンドで処理を実行することができますか?これを行うために従うべきパターンはありますか?

現在、私は別のウェブワーカーにモデルを持つサービスを使用しています。このサービスは次のようなメソッドを実装しています。

ClientsFacade.calculateDebt(client1); //Just an example..

実装では、このメソッドはデータとともにワーカーにメッセージを送信します。これにより、別のスレッドで実行されていることを抽象化でき、サーバーに問い合わせる実装や、同じスレッドでこのアクションを実行するものも提供できますね。

私はjavascriptの初心者で、他のプラットフォームから持っている知識を再利用しているだけなので、これがあなたがすることなのか、あるいは私が使用しているAngularがこれを行う方法のようなものを提供しているのか疑問に思っています。また、ワーカーが明示的に変更をコントローラにプッシュし、コントローラがその値を更新して、それがビューに反映されるため、私のアーキテクチャに変更をもたらしますが、私はこれをエンジニアリングしすぎでしょうか?Web Worker がメモリの共有などを許可しないことで、私を失敗からそれほどまでに守ってくれることに、少し不満を感じています。

どのように解決するのですか?

Web ワーカーとの通信は、メッセージングメカニズムで行われます。これらのメッセージの傍受は、コールバックで行われます。AngularJSでは、Webワーカーを置くのに最適な場所は、あなたが正式に指摘したように、サービスの中です。これに対処する最良の方法はプロミスを使うことで、Angularはこれを驚くほどうまく扱います。

以下は webworker の中に service

var app = angular.module("myApp",[]);

app.factory("HelloWorldService",['$q',function($q){

    var worker = new Worker('doWork.js');
    var defer = $q.defer();
    worker.addEventListener('message', function(e) {
      console.log('Worker said: ', e.data);
      defer.resolve(e.data);
    }, false);

    return {
        doWork : function(myData){
            defer = $q.defer();
            worker.postMessage(myData); // Send data to our worker. 
            return defer.promise;
        }
    };

});

これで、Hello World サービスにアクセスする外部のエンティティは、Hello World サービスの実装の詳細を気にする必要がなくなりました。 HelloWorldService - HelloWorldService を介してデータを処理することができるかもしれません。 web worker の上で http の上に置くか、その場で処理します。

これが意味をなすといいのですが。