zoukankan      html  css  js  c++  java
  • 浅析前端广播式通信频道Broadcast Channel是什么、通信方式、如何使用、前端跨页面通信BroadcastChannel(广播频道监听/同源)与window.postMessage(点对点/可跨域)的区别

      BroadCast Channel 可以帮我们创建一个用于广播的通信频道。当所有页面都监听同一频道的消息时,其中某一个页面通过它发送的消息就会被其他所有页面收到。它的API和用法都非常简单。下面我们来简单了解一下:

    一、Broadcast Channel 是什么

    1、首先,我们想一个问题:在前端如何实现广播式通信呢?

      我们经常会用 postMessage 来实现页面间的通信,但这种方式更像是点对点的通信。对于一些需要广播(让所有页面知道)的消息,用 postMessage 不是非常自然。

      Broadcast Channel 就是用来弥补这个缺陷的。当我们使用广播通信时我们只要在一个页面发送信息,其他所有的页面都能接收到这条信息,但是前提是同源页面

      顾名思义,Broadcast Channel 会创建一个所有同源页面都可以共享的(广播)频道,因此其中某一个页面发送的消息可以被其他页面监听到

    2、Broadcast Channel 通信方式

      Broadcast Channel API允许同源(同一站点)的浏览器上下文(包括窗口,标签,框架或iframe)之间的简单通信。通信的方式如图:

    二、前端跨页面通信 Broadcast Channel 与 window.postMessage区别

      BroadcastChannel,叫做“广播频道”,官方文档说,该API是用于同源不同页面之间完成通信的功能。

      与window.postMessage的区别:BroadcastChannel只能用于同源的页面之间进行通信,而window.postMessage却可以用于任何的页面之间

      基于BroadcastChannel的同源策略,它无法完成跨域的数据传输,跨域的情况,我们还是使用window.postMessage来处理

    三、如何使用广播通信

      Broadcast Channel 的 API 非常简单易用。

    1、创建:首先我们会使用构造函数创建一个实例:

    const bc = new BroadcastChannel('test_channel');

      test_channel 参数用来指定channel的名称,用以标识这个 channel,在其他页面,可以通过传入相同的 name 来使用同一个广播频道,连接到相同名称的BroadcastChannel,可以监听到这个channel分发的消息。用 MDN 上的话来解释就是:

    There is one single channel with this name for all browsing contexts with the same origin.

      该 name 值可以通过实例的 bc.name 属性获得。

    2、监听消息:广播创建完成后,就可以在页面监听广播的消息:

    bc.onmessage = function(e) {
        console.log('receive:', e.data);
    };
    // 对于错误也可以绑定监听:
    bc.onmessageerror = function(e) {
        console.warn('error:', e);
    };

      除了为.onmessage赋值这种方式,也可以使用addEventListener来添加'message'监听。

    3、发送消息:广播实例也有一个对应的postMessage用于发送消息:bc.postMessage('hello')

    4、关闭广播监听:

      可以看到,上述短短几行代码就可以实现多个页面间的广播通信,非常方便。而有时我们希望取消当前页面的广播监听:

    (1)一种方式是取消或者修改相应的'message'事件监听

    (2)另一种简单的方式就是使用 Broadcast Channel 实例为我们提供的close方法:bc.close();

      两者是有区别的:

    (1)取消'message'监听只是让页面不对广播消息进行响应,Broadcast Channel 仍然存在;

    (2)而调用close方法这会切断与 Broadcast Channel 的连接,浏览器才能够尝试回收该对象,因为此时浏览器才会知道用户已经不需要使用广播频道了。

      在关闭后调用postMessage会出现如下报错:

      如果之后又再需要广播,则可以重新创建一个相同 name 的 Broadcast Channel。

  • 相关阅读:
    POJ 1251 Jungle Roads
    1111 Online Map (30 分)
    1122 Hamiltonian Cycle (25 分)
    POJ 2560 Freckles
    1087 All Roads Lead to Rome (30 分)
    1072 Gas Station (30 分)
    1018 Public Bike Management (30 分)
    1030 Travel Plan (30 分)
    22. bootstrap组件#巨幕和旋转图标
    3. Spring配置文件
  • 原文地址:https://www.cnblogs.com/goloving/p/15391279.html
Copyright © 2011-2022 走看看