Web worker con vue


#1

Hola a todos!; llevo unos días peleándome con los web workers y Vue.
Os resumo la situación:

Desde el app.vue tengo un method, que llamará a un web worker, el código es el siguiente:

const miWorker = new Worker(worker);
const message = { addThis: { num1: 1, num2: 2 } };

  miWorker.onmessage = function(e) {
    console.log(`el valor devuelto es ${e.data.result}`);
  };
  miWorker.postMessage(message);

Como veis, la variable worker es igualada a un objeto worker, que contiene el código worker.js. Él código del worker.js, para probar un ejemplo, es el siguiente:

this.onmessage = function checkConsumos(e) {
if (e.data.addThis !== undefined) {
console.log(e.data.addThis.num1);
this.postMessage({ result: e.data.addThis.num1 + e.data.addThis.num2 });
}
};

El problema es que no solo no pinta es que además me está dando este error:

worker.js:1 Uncaught SyntaxError: Unexpected token < worker.js:1

image

Lo del DOCTYPE html como sabréis, viene del index.html, pero da error en el worker, que ya veis el código. Entiendo que algo hay en Vue, en el index.html. cuando inyecta los js y el webpack hace sus “cosillas” que no le gusta al web worker. Por más que le doy vueltas, no logro encontrar solución.

No dispongo de back y necesito hacer unos cálculos que conllevan bastante carga, por eso necesito el web worker, para delegar en él esos cálculos y la página no se quede bloqueada.

Si alguien puede ayudarme le estaría muy agradecido

Un saludo!!!


#2

No tengo experiéncia con los web workers, pero ante este tipo de errores lo que suelo hacer es partir desde una base estable e ir añadiendo desde allí mi código.

En tu caso intentaría ejecutar desde el web worker el clasico Hello World, si funciona sabría que el error viene de mi código e iria añadiento partes de mi código hasta reproducir el error. Y si no funciona ni el Hello World, entonces la pregunta pasaría a ser “Como usar web workers con Vue”.


#3

Hola!, logré dar con la solución. El problema estaba en webpack y la manera que tiene de hacer las importaciones de los js. Lo que hice fue instalar la librería worker-loader y en la configuración que tengo de webpack en mi caso en el archivo webpack.base.conf.js añadir este trocito:

{
test: /.worker.js$/,
use: { loader: ‘worker-loader’ }
},

Con respecto al worker, no he tenido que hacer ningún cambio, estaba bien construido y ya funciona perfectamente, en segundo plano los cálculos y la página totalmente liberada mientras estos acaban.

Un saludo y muchas gracias!


#4

Perfecto, buen aporte. Saludos!


#5

hola! veo que estás pasando objetos directamente al Worker, creo que no es un buen método, lo mejor es pasar JSON String, ejemplo:

miWorker.postMessage(JSON.stringify(message));


#6

Hola!, según la documentación, se pueden pasar los objetos dentro y fuera de los workers con total seguridad, ya que estos se convierten en JSON de manera interna.

Saludos!