JS messagechannel transport

window.MessageChannel It is also an asynchronous operation provided by the browser API, Belongs to macro task

This api Will create a pipe , The two ends of the pipe represent a messagePort, Can pass through portMessage Send data to the other party , adopt onmessage To receive the data sent by the other party

Basic use

const ch = new MessageChannel()
const port1 = ch.port1
const port2 = ch.port2

port1.onmessage = function(d) {
    
    console.log(`port1 The message received is ：${
      d.data}`)
}

port2.onmessage = function(d) {
    
    console.log(`port2 The message received is ：${
      d.data}`)
}

//  Send a message 
port1.portMessage('port1 Message sent ')
port2.portMessage('port2 Message sent ')

Application scenarios
Let two web worker Can pass MessageChannel signal communication , That is to achieve multi-threaded communication

// index.html
<script>
    var w1 = new Worker("worker1.js");
    var w2 = new Worker("worker2.js");
    var ch = new MessageChannel();
    w1.postMessage("port1", [ch.port1]); // The second parameter will not be invalidated by code conversion 
    w2.postMessage("port2", [ch.port2]);
    w2.onmessage = function(e) {
    
        console.log(e.data);
    }
</script>
====worker1.js
// worker1.js
self.onmessage = function(e) {
    
  const  port = e.ports[0];
  port.postMessage("this is from worker1") //woker1 Pass through port1 Send to port2 
}

====worker2.js
// worker2.js
self.onmessage = function(e) {
    
    const port = e.ports[0];
    port.onmessage = function(e) {
     
        postMessage(e.data) //woker2 In the listening woker1 in port1 Data transferred , Then trigger itself woker Monitor function of 
    }
}