Веб-рабочие без отдельного файла Javascript?

Насколько я могу судить, веб-работники должны быть написаны в отдельном файле JavaScript и называться так:

new Worker('longrunning.js')

Я использую компилятор закрытия для объединения и минимизации всего моего исходного кода JavaScript, и я бы не хотел, чтобы мои работники размещались в отдельных файлах для распространения. Есть ли способ сделать это?

new Worker(function() {
    //Long-running work here
});

Учитывая, что первоклассные функции так важны для JavaScript, почему стандартный способ выполнения фоновой работы должен загружать целый другой файл JavaScript с веб-сервера?

ОТВЕТЫ

Ответ 1

http://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers

Что делать, если вы хотите создать своего рабочего script на лету или создать автономную страницу без необходимости создавать отдельные рабочие файлы? С помощью Blob() вы можете "встроить" своего работника в тот же HTML файл, что и ваша основная логика, создав дескриптор URL-адреса для рабочего кода в виде строки


Полный пример встроенного рабочего объекта BLOB:

<!DOCTYPE html>
<script id="worker1" type="javascript/worker">
  // This script won't be parsed by JS engines because its type is javascript/worker.
  self.onmessage = function(e) {
    self.postMessage('msg from worker');
  };
  // Rest of your worker code goes here.
</script>
<script>
  var blob = new Blob([
    document.querySelector('#worker1').textContent
  ], { type: "text/javascript" })

  // Note: window.webkitURL.createObjectURL() in Chrome 10+.
  var worker = new Worker(window.URL.createObjectURL(blob));
  worker.onmessage = function(e) {
    console.log("Received: " + e.data);
  }
  worker.postMessage("hello"); // Start the worker.
</script>

Ответ 2

Решение html5rocks встраивания кода веб-рабочего в HTML довольно ужасно.
И blob сбежавшего JavaScript-as-a-string не лучше, не в последнюю очередь потому, что он усложняет рабочий поток (компилятор Closure не может работать с строками).

Лично мне очень нравятся методы toString, но @dan-man Это регулярное выражение!

Мой предпочтительный подход:

// Build a worker from an anonymous function body
var blobURL = URL.createObjectURL( new Blob([ '(',

function(){
    //Long-running work here
}.toString(),

')()' ], { type: 'application/javascript' } ) ),

worker = new Worker( blobURL );

// Won't be needing this anymore
URL.revokeObjectURL( blobURL );

Поддержка - это пересечение этих трех таблиц:

Это не будет работать для SharedWorker, потому что URL-адрес должен быть точным, даже если параметр "имя" соответствует. Для SharedWorker вам понадобится отдельный файл JavaScript.

Обновление 2015 г. - Прибывает особенность ServiceWorker

Теперь есть еще более мощный способ решения этой проблемы. Снова сохраните рабочий код как функцию (вместо статической строки) и конвертируйте с помощью .toString(), а затем вставьте код в CacheStorage под статическим URL по вашему выбору.

// Post code from window to ServiceWorker...
navigator.serviceWorker.controller.postMessage(
 [ '/my_workers/worker1.js', '(' + workerFunction1.toString() + ')()' ]
);

// Insert via ServiceWorker.onmessage. Or directly once window.caches is exposed
caches.open( 'myCache' ).then( function( cache )
{
 cache.put( '/my_workers/worker1.js',
  new Response( workerScript, { headers: {'content-type':'application/javascript'}})
 );
});

Есть два возможных спада. ObjectURL, как указано выше, или более легко, поместите файл реального JavaScript в /my _workers/worker1.js

Преимущества такого подхода:

  • Также могут поддерживаться SharedWorkers.
  • Вкладки могут совместно использовать одну кешированную копию по фиксированному адресу. Подход blob распространяет случайные объектныеURL для каждой вкладки.

Ответ 3

Вы можете создать один файл JavaScript, который знает о его контексте выполнения и может действовать как родительский script, так и рабочий. Начните с базовой структуры для файла следующим образом:

(function(global) {
    var is_worker = !this.document;
    var script_path = is_worker ? null : (function() {
        // append random number and time to ID
        var id = (Math.random()+''+(+new Date)).substring(2);
        document.write('<script id="wts' + id + '"></script>');
        return document.getElementById('wts' + id).
            previousSibling.src;
    })();
    function msg_parent(e) {
        // event handler for parent -> worker messages
    }
    function msg_worker(e) {
        // event handler for worker -> parent messages
    }
    function new_worker() {
        var w = new Worker(script_path);
        w.addEventListener('message', msg_worker, false);
        return w;
    }
    if (is_worker)
        global.addEventListener('message', msg_parent, false);

    // put the rest of your library here
    // to spawn a worker, use new_worker()
})(this);

Как вы можете видеть, script содержит весь код для родительской и рабочей точки зрения, проверяя, является ли его собственный отдельный экземпляр рабочим с !document. Несколько громоздкое вычисление script_path используется для точного расчета пути script относительно родительской страницы, поскольку путь, передаваемый в new Worker, относится к родительской странице, а не к script.

Ответ 4

Используя метод Blob, как это сделать для рабочего factory:

var BuildWorker = function(foo){
   var str = foo.toString()
             .match(/^\s*function\s*\(\s*\)\s*\{(([\s\S](?!\}$))*[\s\S])/)[1];
   return  new Worker(window.URL.createObjectURL(
                      new Blob([str],{type:'text/javascript'})));
}

Итак, вы можете использовать его вот так...

var myWorker = BuildWorker(function(){
   //first line of worker
   self.onmessage(){....};
   //last line of worker
});

EDIT:

Я только что расширил эту идею, чтобы упростить взаимодействие между потоками: bridged-worker.js.

ИЗМЕНИТЬ 2:

Вышеупомянутая ссылка - это суть, которую я создал. Кто-то еще позже превратил его в фактическое репо.

Ответ 5

Работники Web работают в совершенно разных контекстах как отдельные программы.

Это означает, что код не может быть перемещен из одного контекста в другой в виде объекта, так как тогда он сможет ссылаться на объекты посредством замыканий, принадлежащих другому контексту.
Это особенно важно, поскольку ECMAScript разработан как однопоточный язык, и поскольку веб-рабочие работают в отдельных потоках, тогда у вас будет риск выполнения операций, не связанных с потоком.

Это снова означает, что веб-работники должны быть инициализированы кодом в исходной форме.

Спектр из WHATWG говорит

Если происхождение результата Абсолютный URL-адрес не совпадает с происхождение записи script, затем выбросить исключение SECURITY_ERR.

Таким образом, скрипты должны быть внешними файлами с той же схемой, что и оригинал страница: вы не можете загрузить script из данные: URL или javascript: URL и https: страница не может запускать рабочих используя скрипты с http: URL.

но, к сожалению, на самом деле это не объясняет, почему нельзя было передать строку с исходным кодом в конструктор.

Ответ 6

лучше прочитать способ для рядового работника.

    var worker_fn = function(e) 
    {
        self.postMessage('msg from worker');            
    };

    var blob = new Blob(["onmessage ="+worker_fn.toString()], { type: "text/javascript" });

    var worker = new Worker(window.URL.createObjectURL(blob));
    worker.onmessage = function(e) 
    {
       alert(e.data);
    };
    worker.postMessage("start");

Ответ 7

Недавний ответ (2018)

Вы можете использовать Greenlet:

Переместите асинхронную функцию в ее собственный поток. Упрощенная однофункциональная версия Workerize.

Пример:

import greenlet from 'greenlet'

const getName = greenlet(async username => {
  const url = 'https://api.github.com/users/${username}'
  const res = await fetch(url)
  const profile = await res.json()
  return profile.name
})

console.log(await getName('developit'))

Ответ 8

Принимая ответ Adria и помещая его в функцию с возможностью копирования, которая работает с текущим Chrome и FF, но не с IE10 (рабочий из blob вызывает ошибку безопасности).

var newWorker = function (funcObj) {
    // Build a worker from an anonymous function body
    var blobURL = URL.createObjectURL(new Blob(
        ['(', funcObj.toString(), ')()'],
        {type: 'application/javascript'}
     ));

    var worker = new Worker(blobURL);

    // Won't be needing this anymore
    URL.revokeObjectURL(blobURL);

    return worker;
}

И вот рабочий пример http://jsfiddle.net/ubershmekel/YYzvr/

Ответ 9

Взгляните на плагин vkThread. С помощью плагина htis вы можете выполнять любую функцию в своем основном коде и выполнять ее в потоке (веб-рабочий). Таким образом, вам не нужно создавать специальный "файл веб-рабочего".

http://www.eslinstructor.net/vkthread/

- Вадим

Ответ 10

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

task.js Упрощенный интерфейс для запуска кода интенсивного процессора на всех ядрах (node.js, и веб)

Пример:

function blocking (exampleArgument) {
    // block thread
}

// turn blocking pure function into a worker task
const blockingAsync = task.wrap(blocking);

// run task on a autoscaling worker pool
blockingAsync('exampleArgumentValue').then(result => {
    // do something with result
});

Ответ 11

Вы можете использовать веб-работников в одном javascript fie с помощью встроенных веб-мастеров.

В приведенной ниже статье мы рассмотрим вас, чтобы вы могли легко понять веб-мастеров и их ограничения и отладить веб-мастеров.

Освоение веб-мастеров

Ответ 12

Я думаю, что лучший способ сделать это - использовать объект Blob, ниже вы можете увидеть простой пример.

// create a Blob object with a worker code
var blob = new Blob(["onmessage = function(e) { postMessage('msg from worker'); }"]);

// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL(blob);

// create a Worker
var worker = new Worker(blobURL);
worker.onmessage = function(e) {
  console.log(e.data);
};
worker.postMessage("Send some Data");

Ответ 13

Попробуйте использовать jThread. https://github.com/cheprasov/jThread

// You can use simple calling like this
jThread(
    function(arr){
        //... some code for Worker
        return arr;
    }
    ,function(arr){
        //... done code
    }
)( [1,2,3,4,5,6,7] ); // some params

Ответ 14

здесь консоль:

var worker=new Worker(window.URL.createObjectURL(new Blob([function(){
  //Long-running work here
  postMessage('done');
}.toString().split('\n').slice(1,-1).join('\n')],{type:'text/javascript'})));

worker.addEventListener('message',function(event){
  console.log(event.data);
});

Ответ 15

https://developer.mozilla.org/es/docs/Web/Guide/Performance/Using_web_workers

    // Syntax: asyncEval(code[, listener])

var asyncEval = (function () {

  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");

  oParser.onmessage = function (oEvent) {
    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
    delete aListeners[oEvent.data.id];
  };


  return function (sCode, fListener) {
    aListeners.push(fListener || null);
    oParser.postMessage({
      "id": aListeners.length - 1,
      "code": sCode
    });
  };

})();

Ответ 16

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

var worker_url = Worker.createURL(function(e){
  self.postMessage('Example post from Worker'); //your code here
});
var worker = new Worker(worker_url);

Ответ 17

Итак, я думаю, что у нас есть еще один классный вариант для этого, благодаря шаблонам в ES6. Это позволяет нам отказаться от дополнительной функции рабочего (и ее странной области) и просто написать код, который предназначен для рабочего как многострочный текст, подобно тому, как мы использовали для хранения текста, но без фактического необходимости в документе или DOM для этого. Пример:

const workerScript = `
self.addEventListener('message', function(e) {
  var data = e.data;
  console.log('worker recieved: ',data);
  self.postMessage('worker added! :'+ addOne(data.value));
  self.close();//kills the worker
}, false);
`;

Здесь сущность остальной части этого подхода.

Обратите внимание, что мы можем задействовать любые дополнительные зависимые функции, которые мы хотим для рабочего, просто собирая их в массив и запуская .toString для каждого из них, чтобы свести их к строкам (должно работать до тех пор, пока они являются функциями объявления), а затем просто добавляя к строке script. Таким образом, нам не нужно импортировать скрипты, которые, возможно, уже были включены в область кода, который мы пишем.

Единственный реальный недостаток этой конкретной версии заключается в том, что линтеры не смогут наполнить код рабочего сотрудника (поскольку это просто строка), что является преимуществом для "отдельного подхода к работе с работниками".

Ответ 18

Это просто дополнение к выше - у меня есть хорошие шаблоны для тестирования веб-работников в jsFiddle. Вместо Blob он использует jsFiddles ?js api:

function workerFN() {
  self.onmessage = function(e) {
    switch(e.data.name) {
      case "" : 
      break;
      default:
        console.error("Unknown message:", e.data.name);
    }
  }
}
// This is a trick to generate real worker script that is loaded from server
var url = "/echo/js/?js="+encodeURIComponent("("+workerFN.toString()+")()");
var worker = new Worker(url);
worker.addEventListener("message", function(e) {
  switch(e.data.name) {
    case "" : 
    break;
    default:
      console.error("Unknown message:", e.data.name);
  }
})

Обычный веб-рабочий и общий рабочий доступны шаблоны.

Ответ 19

Я обнаружил, что CodePen в настоящее время не синтаксически выделяет теги inline <script>, которые не являются type="text/javascript" (или которые не имеют атрибута типа).

Итак, я разработал аналогичное, но немного другое решение, используя помеченные блоки с помощью break, что является единственным способом, которым вы можете заручиться <script> без создания функции-оболочки (что необязательно).

<!DOCTYPE html>
<script id="worker1">
  worker: { // Labeled block wrapper

    if (typeof window === 'object') break worker; // Bail if we're not a Worker

    self.onmessage = function(e) {
      self.postMessage('msg from worker');
    };
    // Rest of your worker code goes here.
  }
</script>
<script>
  var blob = new Blob([
    document.querySelector('#worker1').textContent
  ], { type: "text/javascript" })

  // Note: window.webkitURL.createObjectURL() in Chrome 10+.
  var worker = new Worker(window.URL.createObjectURL(blob));
  worker.onmessage = function(e) {
    console.log("Received: " + e.data);
  }
  worker.postMessage("hello"); // Start the worker.
</script>

Ответ 20

Простая обещанная версия, Function#callAsWorker, которая принимает thisArg и аргументы (точно так же, как call) и возвращает обещание:

Function.prototype.callAsWorker = function (...args) {
    return new Promise( (resolve, reject) => {
        const code = 'self.onmessage = e => self.postMessage((${this.toString()}).call(...e.data));',
            blob = new Blob([code], { type: "text/javascript" }),
            worker = new Worker(window.URL.createObjectURL(blob));
        worker.onmessage = e => (resolve(e.data), worker.terminate());
        worker.onerror = e => (reject(e.message), worker.terminate());
        worker.postMessage(args);
    });
}

// Demo
function add(...nums) {
    return nums.reduce( (a,b) => a+b );
}
// Let the worker execute the above function, with the specified arguments
add.callAsWorker(null, 1, 2, 3).then(function (result) {
    console.log('result: ', result);
});

Ответ 21

Я использую такой код, вы можете определить свой onmessage как функцию, отличную от обычного текста, поэтому редактор может выделить ваш код и jshint.

const worker = createWorker();

createWorker() {
    const scriptContent = getWorkerScript();
    const blob = new Blob([
        scriptContent,
    ], {
        type: "text/javascipt"
    });
    const worker = new Worker(window.URL.createObjectURL(blob));
    return worker;
}

getWorkerScript() {
    const script = {
        onmessage: function (e) {
            console.log(e);
            let result = "Hello " + e.data
            postMessage(result);
        }
    };
    let content = "";
    for (let prop in script){
        content += `${prop}=${script[prop].toString()}`;
    }
    return content;
}

Ответ 22

Да, возможно, я сделал это, используя файлы Blob и передавая обратный вызов

Я покажу вам, что делает класс, который я написал, и как он управляет выполнением обратных вызовов в фоновом режиме.

Сначала вы создаете экземпляр GenericWebWorker с любыми данными, которые вы хотите передать обратному вызову, который будет выполняться в Web Worker, который включает в себя функции, которые вы хотите использовать, в данном случае число, дату и функцию, называемую blocker

var worker = new GenericWebWorker(100, new Date(), blocker)

Эта блокирующая функция будет выполняться бесконечно долго в течение n миллисекунд

function blocker (ms) {
    var now = new Date().getTime();
    while(true) {
        if (new Date().getTime() > now +ms)
            return;
    }   
}

а затем вы используете это так

worker.exec((num, date, fnBlocker) => {
    /*Everithing here does not block the main thread
      and this callback has access to the number, date and the blocker */
    fnBlocker(10000) //All of this run in backgrownd
    return num*10

}).then(d => console.log(d)) //Print 1000

Теперь пришло время увидеть магию в приведенном ниже примере

/*https://github.com/fercarvo/GenericWebWorker*/
class GenericWebWorker {
    constructor(...ags) {
        this.args = ags.map(a => (typeof a == 'function') ? {type:'fn', fn:a.toString()} : a)
    }

    async exec(cb) {
        var wk_string = this.worker.toString();
        wk_string = wk_string.substring(wk_string.indexOf('{') + 1, wk_string.lastIndexOf('}'));            
        var wk_link = window.URL.createObjectURL( new Blob([ wk_string ]) );
        var wk = new Worker(wk_link);

        wk.postMessage({ callback: cb.toString(), args: this.args });
 
        var resultado = await new Promise((next, error) => {
            wk.onmessage = e => (e.data && e.data.error) ? error(e.data.error) : next(e.data);
            wk.onerror = e => error(e.message);
        })

        wk.terminate(); window.URL.revokeObjectURL(wk_link);
        return resultado
    }

    async parallel(arr, cb) {
        var res = [...arr].map(it => new GenericWebWorker(it, ...this.args).exec(cb))
        var all = await Promise.all(res)
        return all
    }

    worker() {
        onmessage = async function (e) {
            try {                
                var cb = new Function('return ${e.data.callback}')();
                var args = e.data.args.map(p => (p.type == 'fn') ? new Function('return ${p.fn}')() : p);

                try {
                    var result = await cb.apply(this, args); //If it is a promise or async function
                    return postMessage(result)

                } catch (e) { throw new Error('CallbackError: ${e}') }
            } catch (e) { postMessage({error: e.message}) }
        }
    }
}


function blocker (ms) {
    var now = new Date().getTime();
    while(true) {
        if (new Date().getTime() > now +ms)
            return;
    }   
}

setInterval(()=> console.log("Not blocked " + Math.random()), 1000)

console.log("\n\nstarting blocking code in Worker\n\n")

var worker = new GenericWebWorker(100, new Date(), blocker)

worker.exec((num, date, fnBlocker) => {
    fnBlocker(7000) //All of this run in backgrownd
    return num*10    
})
.then(d => console.log('\n\nEnd of blocking code: result ${d}\n\n')) //Print 1000

Ответ 23

Вы можете поместить содержимое вашего файла worker.js в обратные метки (что позволяет использовать многострочную строковую константу) и создать работника из большого двоичного объекта следующим образом:

var workerScript = '
    self.onmessage = function(e) {
        self.postMessage('message from worker');
    };
    // rest of worker code goes here
';

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

Это удобно, если по какой-либо причине вы не хотите иметь отдельные теги сценария для работника.

Ответ 24

Другое решение - просто обернуть Worker в функцию, а затем создать BLOB-объект, вызывающий эту функцию следующим образом:

     function workerCode() {
        self.onmessage = function (e) {
          console.log("Got message from parent", e.data);
        };
        setTimeout(() => {
          self.postMessage("Message From Worker");
        }, 2000);
      }

      let blob = new Blob([
        "(" + workerCode.toString() + ")()"
      ], {type: "text/javascript"});

      // Note: window.webkitURL.createObjectURL() in Chrome 10+.
      let worker = new Worker(window.URL.createObjectURL(blob));
      worker.onmessage = function (e) {
        console.log("Received: " + e.data);
      };
      worker.postMessage("hello"); // Start the worker.