javascript - 向 Web Worker 发送多个数组 -> 无法克隆对象

Question

我有 4 个数字 Javascript 数组，分别称为 latitude_array、longitude_array、camera_angle_array 和 time_array。

我只是希望将这些传递给网络 worker ，对它们进行一些处理并检索它们。

我发现我当前的方法存在巨大的开销，即使用以下方式发送数组:

var arrays_to_pass = [latitude_array, longitude_array, camera_angle_array, time_array];
thin_data_worker.postMessage(arrays_to_pass);

然后反过来从网络 worker 那里检索它们。

我想使用可传输对象来将 4 个数组传递给工作人员并让它们返回以加快速度。

但是，我显然不了解网络 worker ，因为我尝试执行以下操作:

var object = {latitude:latitude_array, longitude:longitude_array, camera_angle:camera_angle_array,time:time_array}; 
thin_data_worker.postMessage(object, [object.latitude, object.longitude, object.camera_angle, object.time]);

但在 Firefox 中我收到错误“无法克隆对象”。

网络 worker 正在尝试使用以下方式检索数组:

self.addEventListener('message', function(e) {
  var latitude_array = e.data.latitude;
  var longitude_array = e.data.longitude;
  var camera_angle_array = e.data.camera_angle;
  var time_array = e.data.time;
)};

我如何从网络 worker 那里传递这 4 个数组(并取回它们)？

Answer 1

您不需要为“消息”事件附加事件处理程序。默认情况下会处理它。

通过查看您的代码，我了解到您试图创建 dedicated worker .

按照这个方法就可以了。

首先创建worker.js文件并存储它。

这是worker.js

onmessage = function(fromConsumer){
    console.log(fromConsumer.data); //Will print the passed array 
    postMessage("I am sending the data  to consumer.");
}

然后从您创建工作人员的脚本中创建工作人员对象。

 var my = new Worker('path_to_worker_js/worker.js');

 my.postMessage([1,2,4]);  // sending the array

 my.onmessage = function(dataFromWorker){

      console.log(dataFromWorker); //From consumer
 }

在此脚本中， 您创建了 my 对象并借助 postMessage 方法发送数据。 然后在worker.js中，我们监听onmessage事件并使用fromConsumer.data等参数获取传递的数据。再次从这里我们使用将数据发送给消费者发布消息。

现在，我们已经监听了工作对象上的 onmessage 事件，例如 my.onmessage

您可以阅读更多from here

更新:

来自docs

Data passed between the main page and workers is copied, not shared. Objects are serialized as they're handed to the worker, and subsequently, de-serialized on the other end. The page and worker do not share the same instance, so the end result is that a duplicate is created on each end. Most browsers implement this feature as structured cloning.