веб-работники вместо загрузки другой страницы - PullRequest
Новая
       16

веб-работники вместо загрузки другой страницы

0 голосов
/ 04 мая 2018

Я хотел бы создать веб-работников в строке вместо ссылки на внешний скрипт (чтобы я мог развернуть одну HTML-страницу вместо HTML-файла и JS-файла). Я нашел классный метод онлайн с использованием Blobs здесь , но по какой-то причине я не могу заставить его работать. Я также заметил смешанные результаты в разделе комментариев этой статьи.

Я получаю ошибку: Failed to load resource: the server responded with a status of 404 (Not Found), какие ошибки в строке: localhost:63342/[object%20Worker]:1

Я предполагаю, что проблема не в веб-работнике, а в создании временного ресурса URL? Если так, то что мне все еще не хватает?

Вот мой код в теге script в файле HTML: 

function createWorker(fn) {
    var blob = new Blob(['self.onmessage = ', fn.toString()], { type: 'text/javascript' });
    var url = window.URL.createObjectURL(blob);

    return new Worker(url);
}

var generic = function(e) {
    self.postMessage('in line web worker code');
};

var worker = createWorker(generic);

if (window.Worker) {
    var getEquipmentW = new Worker(worker);

    getEquipmentW.postMessage({
        msg: 'hi'
    });

    getEquipmentW.onmessage = function (e) {
        console.log(e.data);
    };
}

Ответы [ 2 ]

0 голосов
/ 25 января 2019

Я отвечу на свой вопрос, вы можете включить веб-работника в отдельный тег script. Я полагаю, что тип сценария не является официальным, поэтому код в этом теге не будет оцениваться до позднего времени. Это будет выглядеть примерно так: 

<script id="myWorkerCode" type="javascript/worker">

self.onmessage = function(e) {
    const data = e.data
    self.postMessage('received some data in worker thread');
};
</script>

затем в сценарии, где вам нужен работник, создайте BLOB-объект и присвойте контенту тип "javascript". сделайте этот BLOB-объект URL-адресом, который можно вставить в конструктор Worker: 

if(window.Worker) {
            // select the id of the script that contains your worker code
            const blob = new Blob([
                document.querySelector('#myWebWorker').textContent
            ], {type: "text/javascript"})

            // Note: window.webkitURL.createObjectURL() in Chrome 10+.
            const worker = new Worker(window.URL.createObjectURL(blob));

            worker.onMessage = (e) => {
               console.log('received data in main thread')
            };
        }

Это больше "in-a-line-over", чем "inline", но позволяет веб-работникам составляться и использоваться в одном файле. Хитрость заключается в использовании тегов сценария и преобразовании неоцененного javascript путем назначения тегов сценария для указанных типов в приведенном выше коде. Все еще не самое элегантное решение, но очень удобное при переносе процессов в другой поток.

0 голосов
/ 04 мая 2018

Ваша функция createWorker уже возвращает работника, поэтому вы можете заменить: 

var worker = createWorker(generic);
var getEquipmentW = new Worker(worker);

С этим: 

var getEquipmentW = createWorker(generic);
...