Javascript: How to use an array buffer with views to send transferable Objects

Question

Lets say I have an arrays called

(Arr1,Arr2) 

and the first array has 2000 objects that have the following

{Cyclic:my.parent,string:"imAString",int:10,Position:{bunchofints}}

lets say I wanted to define Arr2 as

for (i in arr1){let arr1[i]= currentObject   arr2.push(currentObject.Position)}

then for sending arr2 to a web worker.

that is the objective and I was wondering how I would go about doing, first send and access the first array then do the other . this and ik there are array buffers that can be defined then a data view can be made from the buffer but I have no idea how you would go about sending what i have above to a worker considering i don't know what is required to send the buffer and how to add the necessary restrictions like byte length. I saw a post that the guy used something like

    var arrayBuffer = new ArrayBuffer("?what should go here");
    var data = new DataView(arrayBuffer);
    var tempArray = new Float32Array(data.byteLength/Float32Array.BYTES_PER_ELEMENT);  

is this on the lines of creating what i want and if not , how can i get to transferring my objects to the worker, Thanks have a blast .

Ps: the reason I made this thread is to simplify the already existing information that I thought was a bit general and unwelcoming to new people.

Answer 1

You can use JSON.stringify() to covert a JavaScript plain object to a string TextEncoder() .encode() method to convert string to a Uint8Array, pass Uint8Array .buffer property to second parameter of postMessage(), then delete the original object defined as a property of window or other object.

At Worker thread use TextDecoder() .decode() method and JSON.parse() to get the transferred object. Define the object as a property of Workerobject within message event.

Perform same task of converting object to string and converting to TypedArray to get ArrayBuffer at .buffer property to transfer ArrayBuffer representation of plain object to Window, delete the property at Worker.

At window

this.data = {Cyclic:123,string:"imAString",int:10,Position:{a:1, b:2, c:3}};

const worker = new Worker("worker.js");    
const encoder = new TextEncoder();    
const decoder = new TextDecoder();

worker.onmessage = e => {
  console.log(e.data)
}

console.log("original data in Window:", this.data);

this.encoded = encoder.encode(JSON.stringify(this.data));

worker.postMessage(this.encoded, [this.encoded.buffer]);

delete this.data;
delete this.encoded;

console.log("data deleted in Window:", this.data, this.encoded);

worker.onmessage = e => {
  this.data = JSON.parse(decoder.decode(e.data));
  console.log("data in message event at window:", this.data);
}

at Worker

const decoder = new TextDecoder();
const encoder = new TextEncoder();

self.onmessage = e => {
  console.log(e.data);
  self.data = JSON.parse(decoder.decode(e.data));
  self.data.string = "imAStringToo";
  self.encoded = encoder.encode(JSON.stringify(self.data));
  console.log("data in Worker:", self.data);
  self.postMessage(self.encoded, [self.encoded.buffer]);
  delete self.data; 
  delete self.encoded;
  console.log("data deleted in Worker:", self.data, self.encoded);
}

plnkr http://plnkr.co/edit/my7GS0XRC5iEwjL0I2th?p=preview