#onmessage 和#postmessage 如何在主线程和 HTML5 的网络工作者之间进行通信？

Question

I"m learning about HTML5 workers from here and the author uses self.onmessage and self.postmessage to communicate between the main thread and the worker " 因为 worker 无法访问 DOM。”但是在下面看起来 self 指的是主线程和 worker。

function CalculatePi(loop)
{
    var c = parseInt(loop);
    var f = parseFloat(loop);
    var n=1;

    //these errors will need more work…
    if (isNaN(c) || f != c ) {
      throw("errInvalidNumber");
    } else if (c<=0) {
      throw("errNegativeNumber");
    }

    for (var i=0,Pi=0;i<=c;i++) {
      Pi=Pi+(4/n)-(4/(n+2));
      n=n+4;
    }
    self.postMessage({'PiValue': Pi});
}
//wait for the start 'CalculatePi' message
//e is the event and e.data contains the JSON object
self.onmessage = function(e) {
  CalculatePi(e.data.value);
}

上面的代码来自一个单独的包含worker的js文件，我理解self.onmessage中的self是指worker收到主线程的消息开始计算，但是为什么它会使用 self.postMessage 到 post 一条消息返回给自己呢？ #postMessage 和#onmessage 的默认回执是否包括主线程和工作线程？

后来作者post通过这个函数计算圆周率：

worker.onmessage = function(e) {
  document.getElementById("PiValue").innerHTML = e.data.PiValue;
};

当工作人员无权访问 DOM 时，这是如何工作的？明明这里用的是document.getElementById

Answer 1

在您的文件 worker.js 中，将 self.postMessage 视为工作人员（自己）应该 post 一条消息的 order/instruction。因为它只能与创建它的 mainJS 通信，所以这条消息就在那里。 :) 另外在你的mainJS中worker.onmessage应该理解为事件"a message comes from the worker".

所以基本上你的两个脚本都有两个选项：在 mainJS 中：worker.postMessage("message"); 向工作人员发送消息 - worker.onmessage = function(event){...} 收听来自工作人员的消息

在工作脚本中：(self or) this.onmessage = function(event){...} 监听来自 mainJS 的消息 - self.postMessage("message"); 将一些东西发回 mainJS

#onmessage 和#postmessage 如何在主线程和 HTML5 的网络工作者之间进行通信？

How does #onmessage and #postmessage work to communicate between main thread and HTML5's webworkers?

html

javascript

multithreading

web-worker