15
15
16
16
## Broadcast Channel 是什么?
17
17
18
- 在前端,我们经常会用` postMessage ` 来实现页面间的通信,但这种方式更像是点对点的通信。对于一些需要广播(让所有页面知道)的消息,用` postMessage ` 不是非常自然。Broadcast Channel 就是用来弥补这个缺陷的。
18
+ 在前端,我们经常会用 ` postMessage ` 来实现页面间的通信,但这种方式更像是点对点的通信。对于一些需要广播(让所有页面知道)的消息,用 ` postMessage ` 不是非常自然。Broadcast Channel 就是用来弥补这个缺陷的。
19
19
20
20
顾名思义,Broadcast Channel 会创建一个所有同源页面都可以共享的(广播)频道,因此其中某一个页面发送的消息可以被其他页面监听到。
21
21
@@ -33,11 +33,11 @@ Broadcast Channel 的 API 非常简单易用。
33
33
const bc = new BroadcastChannel (' alienzhou' );
34
34
```
35
35
36
- 可以接受一个` DOMString ` 作为 name,用以标识这个 channel。在其他页面,可以通过传入相同的 name 来使用同一个广播频道。用 MDN 上的话来解释就是:
36
+ 可以接受一个 ` DOMString ` 作为 name,用以标识这个 channel 。在其他页面,可以通过传入相同的 name 来使用同一个广播频道。用 MDN 上的话来解释就是:
37
37
38
38
> There is one single channel with this name for all browsing contexts with the same origin.
39
39
40
- 该 name 值可以通过实例的` .name ` 属性获得
40
+ 该 name 值可以通过实例的 ` .name ` 属性获得
41
41
42
42
``` JavaScript
43
43
console .log (bc .name );
@@ -62,31 +62,32 @@ bc.onmessageerror = function(e) {
62
62
};
63
63
```
64
64
65
- > 除了为` .onmessage ` 赋值这种方式,也可以使用` addEventListener ` 来添加` 'message' ` 监听。
65
+ > 除了为 ` .onmessage ` 赋值这种方式,也可以使用 ` addEventListener ` 来添加 ` 'message' ` 监听。
66
66
67
67
### 发送消息
68
68
69
- Broadcast Channel 实例也有一个对应的` postMessage ` 用于发送消息:
69
+ Broadcast Channel 实例也有一个对应的 ` postMessage ` 用于发送消息:
70
70
71
71
``` JavaScript
72
- bc .postMessage (' hello' )
72
+ bc .postMessage (' hello' );
73
73
```
74
74
75
75
### 关闭
76
76
77
77
可以看到,上述短短几行代码就可以实现多个页面间的广播通信,非常方便。而有时我们希望取消当前页面的广播监听:
78
- - 一种方式是取消或者修改相应的` 'message' ` 事件监听
79
- - 另一种简单的方式就是使用 Broadcast Channel 实例为我们提供的` close ` 方法。
78
+
79
+ - 一种方式是取消或者修改相应的 ` 'message' ` 事件监听
80
+ - 另一种简单的方式就是使用 Broadcast Channel 实例为我们提供的 ` close ` 方法。
80
81
81
82
``` JavaScript
82
83
bc .close ();
83
84
```
84
85
85
86
两者是有区别的:
86
87
87
- 取消` 'message' ` 监听只是让页面不对广播消息进行响应,Broadcast Channel 仍然存在;而调用` close ` 方法这会切断与 Broadcast Channel 的连接,浏览器才能够尝试回收该对象,因为此时浏览器才会知道用户已经不需要使用广播频道了。
88
+ 取消 ` 'message' ` 监听只是让页面不对广播消息进行响应,Broadcast Channel 仍然存在;而调用 ` close ` 方法这会切断与 Broadcast Channel 的连接,浏览器才能够尝试回收该对象,因为此时浏览器才会知道用户已经不需要使用广播频道了。
88
89
89
- 在关闭后调用` postMessage ` 会出现如下报错
90
+ 在关闭后调用 ` postMessage ` 会出现如下报错
90
91
91
92
![ ] ( /img/169d80b1620cdac9.png )
92
93
@@ -106,12 +107,4 @@ Broadcast Channel 是一个非常好用的多页面消息同步 API,然而兼
106
107
107
108
![ ] ( /img/169d80efd65b5401.png )
108
109
109
- > 好在我们还有些其他方案可以作为补充(或者作为polyfill),其他的前端跨页面通信可以参考我的另一篇文章[ 《前端跨页面通信的方法》] ( https://juejin.im/post/5ca04406f265da30ac219ccc ) 。
110
-
111
- > 对文章感兴趣的同学欢迎关注 [ 我的博客 >> https://github.com/alienzhou/blog ] ( https://github.com/alienzhou/blog )
112
-
113
- ---
114
-
115
- ![ ] ( /img/16f6f67316cf3a36.png )
116
-
117
- ---
110
+ 好在我们还有些其他方案可以作为补充(或者作为 polyfill ),其他的前端跨页面通信可以参考我的另一篇文章[ 《前端跨页面通信的方法》] ( /2019/04/01/cross-tab-communication-in-frontend/ ) 。
0 commit comments