Nhân viên Web liên lạc bằng cách sử dụng MessageChannel HTML5

Question

Tôi muốn thực hiện liên lạc giữa các nhà cung cấp web. Tôi đọc tài liệu W3C và tôi thấy MessageChannel là một trong những cách để làm điều đó, nhưng trong khi đọc MessageChannel tôi không thể hiểu làm thế nào để thực hiện thông tin liên lạc giữa các công nhân sử dụng messagechannel.

Tôi nhận này từ MSDN

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

Đây cũng là không có tài liệu thích hợp để làm điều đó.

Tôi cần biết, làm thế nào tôi có thể liên lạc với các nhà cung cấp web bằng MessageChannel?

Đây là Demo ném 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(""); 

    }) 

và công nhân

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

Answer 1

sau khi làm việc một thời gian trên API MessageChannel. Tôi đã có giải pháp để giao tiếp với các webwork bằng MessageChannel. Đây là một Demo of working code.

Answer 2

bản demo của bạn thực sự làm việc cho tôi (Chrome 23.0.1271.101). Tôi chỉ nhận được DATA_CLONE_ERR nếu tôi nhấn nút "gửi tới người phụ" thứ hai. Điều này có thể được mong đợi. Bạn đã gửi port2 trong số MessageChannel cho người lao động bằng cuộc gọi postMessage đầu tiên ngay sau khi bạn tạo kênh. Nó có thể là bất hợp pháp để gửi nó một lần nữa, mặc dù tôi không thể tìm thấy bất kỳ tài liệu rõ ràng về điều này hoặc.

Điều bạn có thể muốn làm là đặt onmessage trên cổng nhận được trong công nhân, sau đó bạn có thể xử lý các thư được gửi qua cổng trong tương lai. Một cái gì đó như:

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 
} 

Answer 3

Dưới đây là một ví dụ sạch trong javascript tinh khiết về cách thiết lập này giữa hai công nhân:

Trong chủ đề chính:

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

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

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

Điều này cho thấy cách xử lý thư từ chuỗi chính, cách bạn có thể chuyển tiếp thư từ chuỗi chính đến người lao động khác và cách liên lạc trực tiếp giữa người lao động mà không có chủ đề chính.