jquery 使用MessageChannel HTML5的Web Workers通信

zvms9eto  于 2023-03-29  发布在  jQuery
关注(0)|答案(3)|浏览(145)

我想实现webworker之间的通信。我阅读了W3C文档,我发现MessageChannel是实现它的方法之一,但在阅读MessageChannel时,我无法理解如何使用MessageChannel实现worker之间的通信。
我从MSDN得到这个
http://msdn.microsoft.com/en-in/library/ie/hh673525(v=vs.85).aspx
这里也没有合适的文档来做这件事。
我需要知道,如何使用MessageChannel与Web工作者进行沟通?
下面是Demo抛出的DATA_CLONE_ERR

var worker = new Worker("sub1_worker.js");
    worker.onmessage = function(e) {
        $("#log").append("<br>" + e.data);
    }
    var channel = new MessageChannel();

    worker.postMessage("ping", [channel.port2]);

    channel.port1.onmessage = function(event) {
        // Message is in event.data
        alert("Message is: " + event.data);
    }

    channel.port1.postMessage('hello');


    $("#send1").click(function() {
        var msg = $("#msg").val();
        if (msg && msg != "start")
            worker.postMessage("ping2");

        $("#msg").val("");

    })
    $("#send2").click(function() {
        var msg = $("#msg").val();
        if (msg && msg != "start")
            worker.postMessage("ping3",[channel.port2]);
        $("#msg").val("");

    })

和工人

onmessage = getMessage;

function getMessage(e){

    if(e.ports[0])
    e.ports[0].postMessage("msg from sub worker 1 "+ e.data);
    else
    postMessage("msg from sub worker 1 "+ e.data);
}
dgsult0t

dgsult0t1#

这里有一个纯JavaScript的干净例子,说明如何在两个工作者之间设置它:
在主线程中:

function setup(){
    var channel = new MessageChannel();
    var worker1 = new Worker("worker1.js");
    var worker2 = new Worker("worker2.js");

    // Setup the connection: Port 1 is for worker 1
    worker1.postMessage({
        command : "connect",
    },[ channel.port1 ]);

    // Setup the connection: Port 2 is for worker 2
    worker2.postMessage({
        command : "connect",
    },[ channel.port2 ]);

    worker1.postMessage({
        command: "forward",
        message: "this message is forwarded to worker 2"
    });
}

worker1.js中:

var worker2port;
var onMessageFromWorker2 = function( event ){
    console.log("Worker 1 received a message from worker 2: " + event.data);

    //To send something back to worker 2
    //worker2port.postMessage("");
};

self.onmessage = function( event ) {
    switch( event.data.command )
    {
        // Setup connection to worker 2
        case "connect":
            worker2port = event.ports[0];
            worker2port.onmessage = onMessageFromWorker2;
            break;

        // Forward messages to worker 2
        case "forward":
            // Forward messages to worker 2
            worker2port.postMessage( event.data.message );
            break;

        //handle other messages from main
        default:
            console.log( event.data );
    }
};

单位:worker2.js

var worker1port;
var onMessageFromWorker1 = function( event ){
    console.log("Worker 2 received a message from worker 1: " + event.data);

    //To send something back to worker 1
    //worker1port.postMessage("");
};

self.onmessage = function( event ) {
    switch( event.data.command )
    {
        // Setup connection to worker 1
        case "connect":
            worker1port = event.ports[0];
            worker1port.onmessage = onMessageFromWorker1;
            break;

        // Forward messages to worker 1
        case "forward":
            // Forward messages to worker 1
            worker1port.postMessage( event.data.message );
            break;

        //handle other messages from main
        default:
            console.log( event.data );
    }
};

这展示了如何处理来自主线程的消息,如何将消息从主线程转发到其他工作线程,以及如何在不涉及主线程的情况下直接在工作线程之间进行通信。

cygmwpex

cygmwpex2#

你的演示真的很适合我(Chrome 23.0.1271.101).如果我点击第二个“send to subworker”按钮,我只会得到DATA_CLONE_ERR.这可能是预期的.您已经在创建通道后通过第一个postMessage调用将MessageChannelport2发送给了worker.再次发送可能是非法的,虽然我也找不到任何关于这方面的明确文档。
您可能需要在worker中接收的端口上设置onmessage,然后您可以处理将来通过该端口发送的消息。类似于:

onmessage = getMessage;

function getMessage(e){
  if(e.ports[0]) {
    var receivedPort = e.ports[0];
    receivedPort.postMessage("msg from sub worker 1 "+ e.data);
    receivedPort.onmessage = getPortMessage
  }
  else
    postMessage("msg from sub worker 1 "+ e.data);
}

function getPortMessage(e) {
  // Messages sent through the port will be handled here
}
c3frrgcw

c3frrgcw3#

在MessageChannel API上工作了一段时间后。我得到了使用MessageChannel与webworker通信的解决方案。这里是一个Demo of working code.

相关问题