如何通过 JavaScript - postMessage() 中的 web worker 传递可转移对象数组，即缓冲区以及不可转移的 object，即 json obj？

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 ie 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]);