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

Ответ 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
}