reactjs 网络工作者导致内存使用量逐渐增加！如何使用可转移对象？

kmpatx3s 于 2023-01-05 发布在 React

关注(0)|答案(1)|浏览(131)

我正在尝试创建一个Web工作者逻辑到一个react自定义钩子，但不幸的是，我注意到内存使用量正在逐渐增加。经过研究，我发现为了在Web工作者和主线程之间传输大量数据，一个好的实践是使用可传输对象。我尝试添加可传输对象，但每次我得到以下错误：

// postMessage(arrayBuffer , '/', [arrayBuffer]) error:
Uncaught TypeError: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': Overload resolution failed.

// postMessage(arrayBuffer, [arrayBuffer]) error:
Uncaught DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': Value at index 0 does not have a transferable type.

有什么想法我可以解决这个问题（任何替代解决方案或任何可能的网络工作者改进），问题在哪里？
网络工作者主要工作：

连接到mqtt客户机
订阅主题
侦听每个主题的更改，将所有值存储到一个对象中，并每1秒将存储的主题数据对象发送到主线程（注意数据很大）

自定义钩子主作业：

创建网络工作者，
在每个onmessage事件中，更新redux存储

一个一个二个一个一个一个三个一个一个一个一个一个四个一个

reactjs

来源：https://stackoverflow.com/questions/74985316/web-worker-causes-a-gradual-increase-of-memory-usage-how-to-use-transferable-ob

1条答案

按热度按时间

js81xvg61#

i更新变换函数

function objToBuffer(obj){
  // const jsonString = JSON.stringify(obj);
  // return Buffer.from(jsonString);
  const jsonString = JSON.stringify(obj);
  const uint8_array = new TextEncoder().encode(jsonString);
  const array_buffer = uint8_array.buffer;
  return array_buffer;
}

function bufferToObj(array_buffer) {
  // const jsonString = Buffer.from(array_buffer).toString();
  // return JSON.parse(jsonString);

  const decoder = new TextDecoder('utf-8');
  const view = new DataView(array_buffer, 0, array_buffer.byteLength);
  const string = decoder.decode(view);
  const object = JSON.parse(string);
  return object;
}

在Web-worker文件中添加

const arrayBuffer = objToBuffer(this.data);
 postMessage(arrayBuffer, [arrayBuffer]);

最后在自定义钩子中添加onmessage

dispatch(setMqttData(bufferToObj(event.data)));

赞(0）回复(0）举报 2023-01-05

我来回答

reactjs 网络工作者导致内存使用量逐渐增加！如何使用可转移对象？

1条答案

相关问题

热门标签

最新问答