Как создать веб-работника из строки

Question

Как создать веб-работника из строки

Как я могу использовать создание веб-работника из строки (которая предоставляется через запрос POST)?

Один из способов, который я могу придумать, но я не уверен, как это реализовать, - создать URI данных из ответа сервера и передать его конструктору Worker, но я слышал, что некоторые браузеры не позволяют это из-за той же политики происхождения.

MDN заявляет о неопределенности политики происхождения в отношении URI данных:

Примечание. URI, переданный в качестве параметра конструктора Worker, должен соответствовать политике того же источника. В настоящее время поставщики браузеров не согласны с тем, имеют ли идентификаторы URI одного происхождения или нет; Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0) и более поздние версии разрешают URI данных в качестве допустимого сценария для рабочих. Другие браузеры могут не согласиться.

Вот также пост, обсуждающий это на Whatwg.

105

javascript web-worker data-uri

Источник

user675311 27 апр '12 в 02:12

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

19

Источник

user919216 11 май '16 в 07:36

Принятый ответ немного сложен из-за поддержки обратной совместимости, поэтому я хотел опубликовать то же самое, но в упрощенном виде. Попробуйте это в (современной) консоли браузера:

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.

17

Источник

user454780 05 май '20 в 22:20

Я подошел к большинству ваших идей и добавил несколько моих. Единственное, что нужно моему коду для работника, это использовать "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/

4

Источник

user3297086 11 фев '14 в 16:40

Хороший ответ - я работал над аналогичной проблемой сегодня, когда пытался создать веб-работников с резервными возможностями, когда они недоступны (т.е. запустить рабочий скрипт в главном потоке). Поскольку эта тема относится к теме, я подумал, что предоставлю свое решение здесь:

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

2

Источник

user1818728 18 июн '13 в 23:15

Расширяя код @Chanu_Sukarno, вы можете просто передать рабочую функцию (или строку) этой функции, и она будет выполняться внутри веб-работника:

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

1

Источник

user993683 19 мар '17 в 11:24

В зависимости от вашего варианта использования вы можете использовать что-то вроде

task.js Упрощенный интерфейс для запуска кода, интенсивно использующего процессор, для всех ядер (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

Источник

user103696 29 окт '16 в 05:44

Вот альтернативный подход, который позволяет определить работника с помощью функции с необязательными аргументами установки.

примечание: вы можете использовать только аргументы настройки, которые можно преобразовать в строку. Используйте worker.postMessage для отправки чего-либо еще

1

Источник

user830899 17 дек '22 в 10:20

Мое решение (можно легко "обещать"...)

         function makeWorker(workerFunction, cb) {
        // Create worker
        var tplFun = "onmessage = function(e){console.log(e);   var args = Array.prototype.slice.call(e.data); var res=___.apply(this,args);postMessage(res);}"
        var fnTxt = workerFunction.toString().replace('"use strict";', '');
        var final = tplFun.replace("___", fnTxt);
        let workerBlob = new Blob([final]);
        let workerBlobURL = window.URL.createObjectURL(workerBlob, { type: 'application/javascript; charset=utf-8' });
        let worker = new Worker(workerBlobURL);
        return function () {
            var args = Array.prototype.slice.call(arguments);
            console.log(args)
            worker.postMessage(args);
            worker.onmessage = function (e) {
                console.log(e.data);
                cb(e.data);
            }
        }
    }

    function myTask(a, b, c) {
        return a * b * c;
    }

    function onresult(e) {
        alert(e);
    }
    var fn = makeWorker(myTask, onresult)
    fn(1, 2, 3);

Может быть приятно с «чистой и медленной» функцией!

0

Источник

user2130866 18 фев '22 в 15:10

На основе принятого ответа, класс рабочему, интересная тема

0

Источник

user3089199 06 май '22 в 01:07

Вы можете получить реальные данные из objectURL, а не просто BLOB- объектов, изменив responseType либо "text" или же "arraybuffer",

Вот обратное преобразование text/javascript в blob в objectURL вернуться к blob или же text/javascript,

_{если вам интересно, я использую его для создания веб-работника без внешних файлов} _{Вы можете использовать его для возврата двоичного контента, например видео YouTube;) (из атрибута ресурса тега}

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//stackru.com/02e79c2b-025a-4293-be0f-f121dd57ccf7"

var xhr = new XMLHttpRequest();
xhr.open('GET', 'blob:http%3A//stackru.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)}'
*/

-1

Источник

24 мар '15 в 00:18

Используйте мой крошечный плагин https://github.com/zevero/worker-create

var worker_url = Worker.create("self.postMessage('Example post from Worker');");
var worker = new Worker(worker_url);

Но вы также можете дать ему функцию.

-1

Источник

user1385546 18 окт '15 в 12:00

Другие вопросы по тегам javascript web-worker data-uri

user938089 29 апр '12 в 12:53 2012-04-29 12:53 · Accepted Answer · 2012-04-29 12:53

Резюме
blob: для Chrome 8+, Firefox 6+, Safari 6.0+, Opera 15+
data:application/javascript для оперы 10.60 - 12
eval в противном случае (IE 10+)

URL.createObjectURL(<Blob blob>) может быть использован для создания веб-работника из строки. BLOB-объект может быть создан с использованием BlobBuilder API ^{устарел} или 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');

Совместимость

Веб-работники поддерживаются в следующих ^{источниках} браузеров:

Chrome 3
Firefox 3.5
IE 10
Опера 10.60
Safari 4

Поддержка этого метода основана на поддержке Blob API и URL.createObjectUrl метод. Blob совместимость:

Chrome 8+ (WebKitBlobBuilder), 20+ (Blob конструктор)
Firefox 6+ (MozBlobBuilder), 13+ (Blob конструктор)
Safari 6+ (Blob конструктор)

IE10 поддерживает MSBlobBuilder а также URL.createObjectURL, Тем не менее, пытаясь создать веб-работника из blob: -URL выдает ошибку SecurityError.

Opera 12 не поддерживает URL API. Некоторые пользователи могут иметь поддельную версию URL объект, благодаря этому взломать в browser.js,

Резервный 1: data-URI

Opera поддерживает data-URI в качестве аргумента Worker конструктор. Примечание: не забудьте экранировать специальные символы (такие как # а также %).

// 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/

Fallback 2: Eval

eval может использоваться как запасной вариант для Safari (<6) и 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