So erstellen Sie einen Web Worker aus einer Zeichenfolge

Wie kann ich erstellen Sie eine Web-worker aus einem string (geliefert wird per POST-request)?

Einer Weise, die ich an denken kann, aber ich bin mir nicht sicher, wie es zu implementieren, wird durch das erstellen einer data-URI aus der server-Antwort, und die übergabe, zu der Arbeiter-Konstruktor, aber ich habe gehört, dass einige Browser erlauben es nicht, weil der same-origin-policy.

MDN-Staaten die Unsicherheit über die Herkunft Politik rund um data-URI ' s:

Hinweis: Die URI als parameter übergeben, von der Arbeiter-Konstruktor muss gehorchen den gleichen Ursprung Richtlinie. Derzeit gibt es Uneinigkeit unter den Browser-Anbietern an, ob die data URIs sind von der gleichen Ursprungs sind oder nicht, Gecko 10.0 (Firefox 10.0 /Thunderbird 10.0) und später machen Sie es ermöglichen, Daten-URIs als gültiges Skript für die Arbeiter. Andere Browser möglicherweise nicht einverstanden sind.

Hier ist auch eine post diskutieren Sie auf der whatwg.

InformationsquelleAutor der Frage bigblind | 2012-04-27

119
Zusammenfassung
- blob: für Chrome 8+, Firefox 6+, Safari 6.0+, Opera 15+
- data:application/javascript für Opera 10.60 - 12
- eval sonst (IE 10+)
URL.createObjectURL(< - Blob-blob - >) können verwendet werden zum erstellen eines Web-worker aus einem string. Der blob kann erstellt werden mit der BlobBuilder API ^veraltet oder die Blob constructor.

Demo: 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');
```
Kompatibilität

Web-worker sind von den folgenden Browsern unterstützt ^Quelle:
- Chrome 3
- Firefox 3.5
- IE 10
- Opera 10.60
- Safari 4
Diese Methode der Unterstützung ist auf der Grundlage der Unterstützung der Blob - API und die URL.createObjectUrl Methode. Blob Kompatibilität:
- Chrom 8+ (WebKitBlobBuilder), 20+ (Blob Konstruktor)
- Firefox 6+ (MozBlobBuilder), 13+ (Blob Konstruktor)
- Safari 6+ (Blob Konstruktor)
IE10 unterstützt MSBlobBuilder und URL.createObjectURL. Jedoch, versuchen, um eine Web-Worker von einem blob:-URL eine SecurityError.

Opera 12 nicht unterstützt URL API. Einige Benutzer haben vielleicht eine gefälschte version des URL Objekt, Dank dieser hack in browser.js.

Fallback 1: data-URI

Opera unterstützt Daten-URIs, die als argument an die Worker Konstruktor. Hinweis: vergessen Sie nicht, spezielle escape-Zeichen (wie # und %).
```
//response as defined in the first example
var worker = new Worker('data:application/javascript,' +
                        encodeURIComponent(response) );
//... Test as defined in the first example
```
Demo: http://jsfiddle.net/uqcFM/37/

Fallback 2: Eval

eval kann als fallback verwendet werden, für Safari (<6) und IE 10.
```
//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
```
InformationsquelleAutor der Antwort Rob W

Stimme ich mit die aktuelle akzeptierte Antwort, aber oft Bearbeiten und verwalten von worker-code wird hektisch als in form eines Strings.

Also Optional können wir die unten nähern, wo wir halten können, der Arbeiter als eine Funktion, und dann covert 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.

Dieser wird geprüft, IE11+ und FF und Chrome

InformationsquelleAutor der Antwort Chanakya Vadla

Ich habe einen Ansatz, der mit den meisten Ihrer Ideen und Sie, einige von mir. Das einzige, was mein code muss auf Arbeiter ist für die Verwendung von 'dieser' zu finden, selbst ' Umfang. Ich bin mir ziemlich sicher, dass dies sehr verbesserungsfähig:

//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');
}

Demo: http://jsfiddle.net/8N6aR/

InformationsquelleAutor der Antwort lukelalo

Nette Antwort - ich habe ein ähnliches problem, heute beim Versuch zum erstellen von Web-worker mit fallback-Funktionen, wenn Sie nicht verfügbar (D. H. laufen worker-Skript in der Haupt-thread). Als dieser thread bezieht sich auf das Thema, ich dachte, ich würde meine Lösung hier:

    <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 [email protected] 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>

InformationsquelleAutor der Antwort Chris GW Green

Abhängig von Ihrem Anwendungsfall können Sie so etwas wie

task.js Vereinfachte Schnittstelle für das abrufen der CPU-intensiven code für die Ausführung auf alle Kerne (node.js und web)

Ein Beispiel wäre

//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
});

InformationsquelleAutor der Antwort Chad Scira

Weiter geht ' s mit @Chanu_Sukarno code, können Sie einfach gehen in ein worker-Funktion (oder string) um diese Funktion und führt es in einen web-worker:

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);
  });
}

Hier ist ein Beispiel, wie es zu benutzen:

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")

In nodejsdoWorkerTask sieht wie folgt aus:

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);
  });
}

InformationsquelleAutor der Antwort

Erhalten Sie Echtzeit-Daten aus der objectURL und nicht nur blob durch die änderung der responseType entweder "text" oder "arraybuffer".

Hier ist ein hin-und her-Konvertierung von text/javascript zu blob zu objectURL zurück blob oder text/javascript.

_{wenn Sie neugierig sind, ich verwende es zum generieren einer web-worker mit keine externen Dateien

Sie können es verwenden, um zurück binären Inhalt, zum Beispiel ein YouTube-video 😉 (aus den <video> tag Attribut resource)}

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)}'
*/

InformationsquelleAutor der Antwort

-1

Nutzung meiner winzigen plugin https://github.com/zevero/worker-create
```
var worker_url = Worker.create("self.postMessage('Example post from Worker');");
var worker = new Worker(worker_url);
```
Aber Sie können auch geben ihm eine Funktion.

InformationsquelleAutor der Antwort zevero

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Zusammenfassung

Kompatibilität

Fallback 1: data-URI

Fallback 2: Eval