Properly Fire Functions within Web Workers using Vue.Js

Question

im attempting to use vue-worker to offload a task that processes an selected input file to base64, to a background thread.However i'm having no success. Here is what I am attempting:

 // file is selected file from input
 const getBase64 = (file) => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader()
     reader.readAsDataURL(file)
     reader.onload = () => resolve(reader.result)
     reader.onerror = error => reject(error)
   })
 }

this.$worker.run((file, getBase64) => {

  getBase64(file).then((data) => {
     return data
  })

}, [file, getBase64])
.then(result => {
  console.log(result)
})
.catch(e => {
  console.error(e)
})

However I get the following error:

DOMException: Failed to execute 'postMessage' on 'Worker': function getBase64(file) { return new Promise(function (resolve, reject) { var reader = new FileReader();...... } could not be cloned.

What exactly does this error relate to & is what I'm trying accomplish possible?

In $worker.run you're not return getBase64 function or anything — JanuszO
– JanuszO, Commented Oct 24, 2019 at 7:45

IVO GELOV · Accepted Answer · 2018-08-19 11:03:03Z

I have not used vue-worker so this is not an exact answer but I hope it may still help you in some way.

I am using worker-loader like this:

The worker script - calc.worker.js

import regress from '@/lib/regression'

// Setup an event listener that will handle messages sent to the worker.
self.addEventListener('message', function(e)
{
  if(e.data && e.data.cmd) switch(e.data.cmd)
  {
    case 1: // regression of combined data
      setTimeout(function()
      {
        combined(e.data);
      },20);
      break;
    case 2: // regressions of individual campaigns
      setTimeout(function()
      {
        individual(e.data);
      },20);
      break;
  }
}, false);

function combined(data)
{
  do_regress(data.regression,data.param,data.outliers);
  self.postMessage(data);
}

function individual(data)
{
  let i;
  for(i=0;i<data.param.length;i++) 
    do_regress(data.regression,data.param[i],data.outliers);
  self.postMessage(data);
}

How to use the worker script from a *.vue component

<script>
import CalcWorker from '@/calc.worker.js'

export default
{
  data()
  {
    return {
      worker: new CalcWorker(),
      individual: 0,
      kind: 1,
      regression: [],
      outliers: []
    }
  },
  created()
  {
    // Setup an event listener that will handle messages received from the worker.
    this.worker.addEventListener('message', this.worker_ready, false);
    this.update();
  },
  beforeDestroy: function()
  {
    this.worker.terminate();
  },
  methods:
  {
    update()
    {
      this.worker.postMessage(
      {
        cmd: 2,
        param: this.individual,
        kind: this.kind,
        regression: this.regression,
        outliers: this.outliers
      });
    },
    worker_ready(e)
    {
      switch(e.data.cmd)
      {
        case 1:
          ......
          break;
        case 2:
          ......
          break;
      }
    }
  }
}
</script>

Collectives™ on Stack Overflow

Properly Fire Functions within Web Workers using Vue.Js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related