How to pass array of transferable objects i.e. buffer along with non transferable object i.e. json obj via web worker in JavaScript - postMessage()?

Question

So, here is what I am trying to achieve:

1. Call a specific function onMessage() in main thread from web-worker.
2. Passing an array of transferable objects i.e. Uint16Array buffer, Float32Array buffer etc.
3. Along with all of above, I want to pass a simple boolean object or an integer or a string value while posting message.

For example:

const cornersArray = new Uint16Array(5000), // should go as Transferable object
  trailsArray = new Float32Array(7000); // should go as Transferable object

const state = 1, // integer
  quality = 'High', // string
  isTracking = true; // boolean


this.Worker.postMessage({
  event: 'ShowTrails',
  data: {
    cornersArray: cornersArray,
    trailsArray: trailsArray,
    state: state,
    quality: quality,
    isTracking: isTracking
  }
}, [cornersArray.buffer, trailsArray.buffer]);

So, onMessage() at main thread, this should call ShowTrails() and data should be passed as a parameter. But this is throwing error that objects passed are not detachable, failing in postMessage().

I am very noob in this, first time using web workers, please help me how to make this happen. I must be doing something wrong here while passing data.

Thanks!

Answer 1

You are not passing the transferrable buffer correctly. Try this:

this.Worker.postMessage({
  event: 'ShowTrails',
  data: {
    cornersArray: cornersArray.buffer,
    trailsArray: trailsArray.buffer,
    state: state,
    quality: quality,
    isTracking: isTracking
  }
}, [cornersArray.buffer, trailsArray.buffer]);