MessageChannel和BroadcastChannel

小咪咪 2022-09-12 10:45 3阅读 0赞

常见的 **macro task** 有**`setTimeout`、`MessageChannel`、`postMessage`、`setImmediate`**。而常见的 **micro task** 有 **`MutationObsever` 和 `Promise.then`**。

# MessageChannel #

Channel Messaging API的**`MessageChannel`** 接口允许我们创建一个新的消息通道，并通过它的两个[MessagePort][] 属性发送数据。

> **Note:** 此特性在 [Web Worker][] 中可用

##  iframe通信 ##

//主页面
    <iframe id="iframe1" src="./iframe1.html"></iframe>
    <iframe id="iframe2" src="./iframe2.html"></iframe>
    <script>
        window.onload = function(){
            var {port1,port2} = new MessageChannel();
            var iframe1 = document.getElementById('iframe1');
            iframe1.contentWindow.postMessage('main','*',[port1]);
            var iframe2 = document.getElementById('iframe2');
            iframe2.contentWindow.postMessage('main','*',[port2]);
        }
    </script>
    
    //iframe1
    <div id="message"></div>
    <script>
        window.addEventListener('message',function(event){
            console.log(event);
            let messageDom = document.getElementById('message');
            messageDom.innerHTML = "收到"  + event.origin + "消息：" + event.data;
    
            let port = event.ports[0];
            port.onmessage = function(e){
                messageDom.innerHTML += '<br/>收到' + e.origin + '消息: ' + e.data;
            }
            port.postMessage('from iframe1');
      }, false);
    </script>
    
    //iframe2
    <div id="message"></div>
    <script>
        window.addEventListener('message',function(event){
            console.log(event);
            let messageDom = document.getElementById('message');
            messageDom.innerHTML = "收到"  + event.origin + "消息：" + event.data;
    
            let port = event.ports[0];
            port.onmessage = function(e){
                messageDom.innerHTML += '<br/>收到' + e.origin + '消息: ' + e.data;
            }
            port.postMessage('from iframe2');
        }, false);
    </script>

## Web Worker通信 ##

# BroadcastChannel #

**Broadcast Channel API** 可以实现同 [源][Link 1] 下浏览器不同窗口，Tab页，frame或者 iframe 下的 [浏览器上下文][Link 2] (通常是同一个网站下不同的页面)之间的简单通讯。

> **Note:** 此特性在 [Web Worker][] 中可用

广播频道会被命名和绑定到指定的源。

通过创建一个监听某个频道下的 [BroadcastChannel][] 对象，你可以接收发送给该频道的所有消息。一个有意思的点是，你不需要再维护需要通信的 iframe 或 worker 的索引。它们可以通过构造 [BroadcastChannel][] 来简单地“订阅”特定频道，并在它们之间进行全双工（双向）通信。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATUlOT-WQlg_size_20_color_FFFFFF_t_70_g_se_x_16][]

[MessagePort]: https://developer.mozilla.org/zh-CN/docs/Web/API/MessagePort
[Web Worker]: https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Glossary/Origin
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Glossary/Browsing_context
[BroadcastChannel]: https://developer.mozilla.org/zh-CN/docs/Web/API/BroadcastChannel
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATUlOT-WQlg_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/6bcea138d2874e2da6c84b316c86c3d9.png