文字列からWebワーカーを作成する方法

83

文字列（POSTリクエストを介して提供される）からWebワーカーを作成するにはどうすればよいですか？

私が考えることができる1つの方法ですが、それを実装する方法がわかりません。サーバーの応答からdata-URIを作成し、それをワーカーコンストラクターに渡すことですが、一部のブラウザーでは許可されていないと聞いています。これは、同一生成元ポリシーのためです。

MDNは、データURIに関するオリジンポリシーについての不確実性を述べています。

注：Workerコンストラクターのパラメーターとして渡されるURIは、同一生成元ポリシーに従う必要があります。現在、データURIが同一生成元であるかどうかについて、ブラウザベンダー間で意見の相違があります。Gecko 10.0（Firefox 10.0 / Thunderbird 10.0）以降では、データURIをワーカーの有効なスクリプトとして許可しています。他のブラウザは同意しない場合があります。

また、whatwgでそれについて議論している投稿もあります。

javascript  web-worker  data-uri 
— ビッグブラインド
ソース
CORS（w3.org/TR/cors）が役立つかどうか疑問に思います。HTMl5rocksは、ワーカーの同一生成元ポリシー（html5rocks.com/en/tutorials/workers/basics）に関しては、強力な「必須」言語を使用しているため、CORSはここではあまり役に立ちません。でもやってみましたか？
— Pavel Veller 2012

回答:

144

概要

  • blob: Chrome 8以降、Firefox 6以降、Safari 6.0以降、Opera15以降の場合
  • data:application/javascript Opera10.60-12用
  • eval それ以外の場合（IE 10+）

URL.createObjectURL(<Blob blob>)文字列からWebワーカーを作成するために使用できます。BLOBは、非推奨のBlobBuilderAPIまたはコンストラクターを使用して作成できます。Blob

デモ：http：//jsfiddle.net/uqcFM/49/

// URL.createObjectURL
window.URL = window.URL || window.webkitURL;

// "Server response", used in all examples
var response = "self.onmessage=function(e){postMessage('Worker: '+e.data);}";

var blob;
try {
    blob = new Blob([response], {type: 'application/javascript'});
} catch (e) { // Backwards-compatibility
    window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
    blob = new BlobBuilder();
    blob.append(response);
    blob = blob.getBlob();
}
var worker = new Worker(URL.createObjectURL(blob));

// Test, used in all examples:
worker.onmessage = function(e) {
    alert('Response: ' + e.data);
};
worker.postMessage('Test');

互換性

Webワーカーは、次のブラウザーソースでサポートされています。

  • Chrome 3
  • Firefox 3.5
  • IE 10
  • Opera 10.60
  • サファリ4

このメソッドのサポートは、BlobAPIとメソッドのサポートに基づいていますURL.createObjectUrl。Blob互換性：

  • Chrome 8以降（WebKitBlobBuilder）、20以上（Blobコンストラクター）
  • Firefox 6以降（MozBlobBuilder）、13以降（Blobコンストラクター）
  • Safari 6+（Blobコンストラクター）

IE10はとをサポートMSBlobBuilderしていURL.createObjectURLます。ただし、blob:-URLからWebワーカーを作成しようとすると、SecurityErrorがスローされます。

Opera12はURLAPIをサポートしていません。のこのハックのURLおかげで、一部のユーザーはオブジェクトの偽のバージョンを持っている可能性があります。browser.js

フォールバック1：データ-URI

Operaは、Workerコンストラクターへの引数としてdata-URIをサポートしています。注：特殊文字（#およびなど%）をエスケープすることを忘れないでください。

// response as defined in the first example
var worker = new Worker('data:application/javascript,' +
                        encodeURIComponent(response) );
// ... Test as defined in the first example

デモ：http：//jsfiddle.net/uqcFM/37/

フォールバック2：評価

eval Safari（<6）およびIE10のフォールバックとして使用できます。

// Worker-helper.js
self.onmessage = function(e) {
    self.onmessage = null; // Clean-up
    eval(e.data);
};
// Usage:
var worker = new Worker('Worker-helper.js');
// `response` as defined in the first example
worker.postMessage(response);
// .. Test as defined in the first example
— ロブW
ソース
3
@BrianFreid編集していただきありがとうございますが、必須ではありません。さらに数行見ると、「IE10はとをサポートMSBlobBuilderしていURL.createObjectURLます。ただし、blob:-URLからWebワーカーを作成しようとすると、SecurityErrorがスローされます。」と表示されます。したがって、追加しMSBlobBuilderても効果はありません。唯一のオプションはフォールバック＃2です。
— ロブW
Opera 12はもはや定義していませんURL（したがって、どちらもプロパティを定義していません）。現在、Blobコンストラクターは十分にサポートされています。
— gsnedders 2013年
2
少なくともプレビューでは、これがIE11でも引き続き発生することを確認しました。
— Benjamin Gruenbaum 2013年
1
dataURIはOperaまたは他のすべてのブラウザ（IEを除く）でのみサポートされていますか？
— jayarjo 2014
1
@jayarjo data:-Web WorkersのURIはFirefoxでもサポートされていますが、ChromeやOpera15以降ではサポートされていません。のパフォーマンスevalは関係ありません。1秒あたり数百万のWebワーカーを作成することはありません。
— ロブW
12

私は現在受け入れられている回答に同意しますが、ワーカーコードの編集と管理は、文字列形式であるため多忙になることがよくあります。

したがって、オプションで、ワーカーを関数として保持し、string-> blobに変換できる以下のアプローチを使用できます。

// function to be your worker
function workerFunction() {
    var self = this;
    self.onmessage = function(e) {
        console.log('Received input: ', e.data); // message received from main thread
        self.postMessage("Response back to main thread");
    }
}


///////////////////////////////

var dataObj = '(' + workerFunction + ')();'; // here is the trick to convert the above fucntion to string
var blob = new Blob([dataObj.replace('"use strict";', '')]); // firefox adds "use strict"; to any function which might block worker execution so knock it off

var blobURL = (window.URL ? URL : webkitURL).createObjectURL(blob, {
    type: 'application/javascript; charset=utf-8'
});


var worker = new Worker(blobURL); // spawn new worker

worker.onmessage = function(e) {
    console.log('Worker said: ', e.data); // message received from worker
};
worker.postMessage("some input to worker"); // Send data to our worker.

これはIE11 +とFFとChromeでテストされています

— Chanakya Vadla
ソース
1
@SenJacobこれはコミュニティのwiki投稿ではないため、編集ではなくコメントを介して投稿者に潜在的な問題を公開する必要があります。
— さようならStackExchange 2016年
@FrankerZごめんなさい。行った変更を加えて、IE11で機能させる必要がありました。@ ChanuSukarnoリビジョン3での変更に問題がないか確認していただけますか？
— センジェイコブ
参考までに、「type： 'application / javascript; charset = utf-8'」は、createObjectURL呼び出しではなく、Blobコンストラクターに属します。
— sora24 5519年
だから...あなたは単にあなたのテキストエディタでそれをよりよく読むために、あなたの労働者の外で関数を構築していますか？それはばかげています。理由もなく、2つのコンテキストでその関数をメモリにロードする必要があります。
— ADJenks
4

私はあなたのアイデアのほとんどと私のいくつかを追加してアプローチをしました。私のコードがworkerで必要とするのは、「this」を使用して「self」スコープを参照することだけです。私はこれが非常に改善可能であるとかなり確信しています：

// Sample code
var code = function() {
    this.onmessage = function(e) {
        this.postMessage('Worker: '+e.data);
        this.postMessage('Worker2: '+e.data);
    };
};

// New thread worker code
FakeWorkerCode = function(code, worker) {
    code.call(this);
    this.worker = worker;
}
FakeWorkerCode.prototype.postMessage = function(e) {
    this.worker.onmessage({data: e});
}
// Main thread worker side
FakeWorker = function(code) {
    this.code = new FakeWorkerCode(code, this);
}
FakeWorker.prototype.postMessage = function(e) {
    this.code.onmessage({data: e});
}

// Utilities for generating workers
Utils = {
    stringifyFunction: function(func) {
        // Stringify the code
        return '(' + func + ').call(self);';
    },
    generateWorker: function(code) {
        // URL.createObjectURL
        windowURL = window.URL || window.webkitURL;   
        var blob, worker;
        var stringified = Utils.stringifyFunction(code);
        try {
            blob = new Blob([stringified], {type: 'application/javascript'});
        } catch (e) { // Backwards-compatibility
            window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
            blob = new BlobBuilder();
            blob.append(stringified);
            blob = blob.getBlob();
        }

        if ("Worker" in window) {
            worker = new Worker(windowURL.createObjectURL(blob));
        } else {
            worker = new FakeWorker(code);
        }
        return worker;
    }
};

// Generate worker
var worker = Utils.generateWorker(code);
// Test, used in all examples:
worker.onmessage = function(e) {
    alert('Response: ' + e.data);
};
function runWorker() {
    worker.postMessage('working fine');
}

デモ：http：//jsfiddle.net/8N6aR/

— ルケラロ
ソース
2

良い答え-私は今日、フォールバック機能が利用できないときにフォールバック機能を備えたWebワーカーを作成しようとしたとき（つまり、メインスレッドでワーカースクリプトを実行したとき）に同様の問題に取り組んできました。このスレッドはトピックに関連しているので、ここで解決策を提供すると思いました。

    <script type="javascript/worker">
        //WORKER FUNCTIONS
        self.onmessage = function(event) {
            postMessage('Hello, ' + event.data.name + '!');
        }
    </script>

    <script type="text/javascript">

        function inlineWorker(parts, params, callback) {

            var URL = (window.URL || window.webkitURL);

            if (!URL && window.Worker) {

                var worker = new window.Worker(URL.createObjectURL(new Blob([parts], { "type" : "text/javascript" })));

                worker.onmessage = function(event) {
                  callback(event.data);
                };

                worker.postMessage(params);

            } else {

                var postMessage = function(result) {
                  callback(result);
                };

                var self = {}; //'self' in scope of inlineWorker. 
                eval(parts); //Converts self.onmessage function string to function on self via nearest scope (previous line) - please email chrisgwgreen.site@gmail.com if this could be tidier.
                self.onmessage({ 
                    data: params 
                });
            }
        }

        inlineWorker(
            document.querySelector('[type="javascript/worker"]').textContent, 
            {
                name: 'Chaps!!'
            },
            function(result) {
                document.body.innerHTML = result;
            }
        );

    </script>
</body>

— クリスGWグリーン
ソース
2

下位互換性をサポートしているため、受け入れられた回答は少し複雑なので、同じことを簡単に投稿したいと思いました。（最新の）ブラウザコンソールでこれを試してください。

const code = "console.log('Hello from web worker!')"
const blob = new Blob([code], {type: 'application/javascript'})
const worker = new Worker(URL.createObjectURL(blob))
// See the output in your console.
スニペットを展開

— trusktr
ソース
1

ユースケースに応じて、次のようなものを使用できます

task.js CPUを集中的に使用するコードをすべてのコア（node.js、およびweb）で実行するための簡略化されたインターフェイス

例は

// turn blocking pure function into a worker task
const functionFromPostRequest = task.wrap('function (exampleArgument) {}');

// run task on a autoscaling worker pool
functionFromPostRequest('exampleArgumentValue').then(result => {
    // do something with result
});
— チャド・シラ
ソース
1

@Chanu_Sukarnoのコードを拡張すると、ワーカー関数（または文字列）をこの関数に渡すだけで、Webワーカー内で実行されます。

async function doWorkerTask(workerFunction, input, buffers) {
  // Create worker
  let fnString = '(' + workerFunction.toString().replace('"use strict";', '') + ')();';
  let workerBlob = new Blob([fnString]);
  let workerBlobURL = window.URL.createObjectURL(workerBlob, { type: 'application/javascript; charset=utf-8' });
  let worker = new Worker(workerBlobURL);

  // Run worker
  return await new Promise(function(resolve, reject) {
    worker.onmessage = function(e) { resolve(e.data); };
    worker.postMessage(input, buffers);
  });
}

使用方法の例を次に示します。

function myTask() {
  self.onmessage = function(e) {
    // do stuff with `e.data`, then:
    self.postMessage("my response");
    self.close();
  }
}
let output = await doWorkerTask(myTask, input, inputBuffers);
// now you can do something with `output` (which will be equal to "my response")

でnodejs、doWorkerTask次のようになります。

async function doWorkerTask(workerFunction, input, buffers) {
  let Worker = require('webworker-threads').Worker;
  let worker = new Worker(workerFunction);

  // Run worker
  return await new Promise(function(resolve, reject) {
    worker.onmessage = function(e) { resolve(e.data); };
    worker.postMessage(input, buffers);
  });
}
— user993683
ソース
-1

あなたはから実データを取得することができますいるObjectURL変更することではなく、単にブロブをresponseTypeどちらかに"text"か"arraybuffer"。

これは、toからbacktoまたはへの前後の変換です。text/javascriptblobobjectURLblobtext/javascript

疑問に思っている場合は、外部ファイルのないWebワーカー を生成するために使用しています。たとえば、YouTubeビデオなどのバイナリコンテンツを返すために使用でき
ます;）（<video>タグのリソース属性から）

var blob = new Blob(['self.onmessage=function(e){postMessage(e)}'],{type: 'text/javascript'});   //->console: (object)   Blob {size: 42, type: "text/javascript", slice: function}

var obju = URL.createObjectURL(js_blob); //->console:  "blob:http%3A//stackoverflow.com/02e79c2b-025a-4293-be0f-f121dd57ccf7"

var xhr = new XMLHttpRequest();
xhr.open('GET', 'blob:http%3A//stackoverflow.com/02e79c2b-025a-4293-be0f-f121dd57ccf7', true);
xhr.responseType = 'text'; /* or "blob" */
xhr.onreadystatechange = function(){
  if(xhr.DONE !== xhr.readyState) return;

  console.log(xhr.response);
}
xhr.send();

/*
  responseType "blob" ->console: (object)   Blob {size: 42, type: "text/javascript", slice: function}
  responseType "text" ->console: (text)     'self.onmessage=function(e){postMessage(e)}'
*/
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.