Web Workers communication using MessageChannel HTML5

Question

I would like to implement communication between webworkers. I read the W3C documentation and I found MessageChannel is one of the ways to do it, but while reading MessageChannel I couldn't understand how to implement communication between workers using messagechannel.

I got this from MSDN

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

Here is also no proper documentation to do it.

I need to know, how can I communicate webworkers using MessageChannel?

Here is the Demo throwing 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("");

    })

and worker

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);
}

Wilt · Answer 1 · 2023-03-17T19:04:53.467

Here a clean example in pure javascript on how to set this up between two workers:

In main thread:

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"
    });
}

In 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 );
    }
};

In 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 );
    }
};

This shows to how to handle messages from main thread, how you can forward messages from the main thread to the other worker and how to communicate between the workers directly without the main thread being involved.

score 3 · Answer 2 · answered Jan 08 '13 at 02:50

Your demo actually works for me (Chrome 23.0.1271.101). I only get the DATA_CLONE_ERR if I hit the second "send to subworker" button. This is probably expected. You already sent port2 of your MessageChannel to the worker with your first postMessage call right after you created the channel. It's probably illegal to send it again, though I can't find any explicit documentation about this either.

What you likely want to do is set onmessage on the port received in the worker, then you can handle messages sent through the port in the future. Something like:

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
}

Thanks for clean explanation. how can I send msgs to received port and get the messages in mainjs — kongaraju, Jan 08 '13 at 06:20
Not sure I understand your question, your code already does that. In the worker you use `receivedPort.postMessage()` to send messages to the main thread. In the main thread messages will be received by the function you assigned to `channel.port1.onmessage`. — Nik Haldimann, Jan 08 '13 at 15:14

kongaraju · Accepted Answer · 2013-10-01T07:27:05.000

1

after working some time on MessageChannel API. I got solution to communicate webworkers using MessageChannel. Here is a Demo of working code.

edited Oct 01 '13 at 07:27

answered Jan 08 '13 at 11:47

kongaraju

9,344
11
55
78

Web Workers communication using MessageChannel HTML5

3 Answers3