Связь веб-работников с помощью MessageChannel HTML5

Я хотел бы реализовать связь между веб-мастерами. Я прочитал документацию W3C, и я обнаружил, что MessageChannel - один из способов сделать это, но при чтении MessageChannel я не мог понять, как реализовать связь между рабочими, использующими канал сообщений.

Я получил это из MSDN

http://msdn.microsoft.com/en-in/library/ie/hh673525(v=vs.85).aspx

Здесь также нет соответствующей документации.

Мне нужно знать, как я могу общаться с веб-мастерами с помощью MessageChannel?

Вот 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);
}

Ответ 1

после некоторого времени работы с API MessageChannel. Я получил решение для общения с веб-мастерами с помощью MessageChannel. Вот Демонстрация рабочего кода.

Ответ 2

Вот чистый пример в чистом 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 );
    }
};

Это показывает, как обрабатывать сообщения из основного потока, как вы можете пересылать сообщения из основного потока другому работнику и как общаться между рабочими напрямую без участия основного потока.

Ответ 3

Ваше демо действительно работает для меня (Chrome 23.0.1271.101). Я получаю только DATA_CLONE_ERR, если я нажму вторую кнопку "Отправить субсайдеру". Это, вероятно, ожидается. Вы уже отправили port2 своего MessageChannel рабочему со своим первым вызовом postMessage сразу после создания канала. Вероятно, это незаконно, чтобы отправить его снова, хотя я не могу найти никакой явной документации об этом.

То, что вы, скорее всего, захотите сделать, это установить 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
}