| <!DOCTYPE html> |
| <html lang="en-US"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>BroadcastChannel | WEEX</title> |
| <meta name="description" content="Weex"> |
| <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png"> |
| <script src="//g.alicdn.com/alilog/mlog/aplus_v2.js"></script> |
| <meta name="data-spm" dataSpmProtocol="i" content="a2c7j"> |
| <meta name="aplus-ajax" content="chksum"> |
| <meta name="aplus-waiting" content="MAN"> |
| <meta name="google-site-verification" content="FbH8DPHpxdDJlfkKLKXuXWOu69DI8ZRRP8O2Phg8UKw"> |
| <meta name="baidu-site-verification" content="WRr1iWvsYK"> |
| |
| <link rel="preload" href="/assets/css/styles.0ff943f0.css" as="style"><link rel="preload" href="/assets/js/app.0ff943f0.js" as="script"><link rel="preload" href="/assets/js/25.e9877e57.js" as="script"><link rel="prefetch" href="/assets/css/1.styles.aa72e838.css"><link rel="prefetch" href="/assets/css/10.styles.1fff5b86.css"><link rel="prefetch" href="/assets/css/11.styles.a03faa50.css"><link rel="prefetch" href="/assets/css/2.styles.fc5d9892.css"><link rel="prefetch" href="/assets/css/21.styles.9ebad2b1.css"><link rel="prefetch" href="/assets/css/3.styles.6b94323a.css"><link rel="prefetch" href="/assets/css/36.styles.6dbb9d8c.css"><link rel="prefetch" href="/assets/css/4.styles.706a5607.css"><link rel="prefetch" href="/assets/css/7.styles.469d3b64.css"><link rel="prefetch" href="/assets/css/8.styles.b36167bf.css"><link rel="prefetch" href="/assets/css/9.styles.5bed6ebe.css"><link rel="prefetch" href="/assets/js/10.1fff5b86.js"><link rel="prefetch" href="/assets/js/100.09076a87.js"><link rel="prefetch" href="/assets/js/101.71fa3538.js"><link rel="prefetch" href="/assets/js/102.8a9926d6.js"><link rel="prefetch" href="/assets/js/103.d6c3649e.js"><link rel="prefetch" href="/assets/js/104.adb2425b.js"><link rel="prefetch" href="/assets/js/105.a063ca34.js"><link rel="prefetch" href="/assets/js/106.620e227f.js"><link rel="prefetch" href="/assets/js/107.1c97d156.js"><link rel="prefetch" href="/assets/js/108.d1f236a9.js"><link rel="prefetch" href="/assets/js/109.10a909cc.js"><link rel="prefetch" href="/assets/js/11.a03faa50.js"><link rel="prefetch" href="/assets/js/110.6f9200c8.js"><link rel="prefetch" href="/assets/js/111.9c1831b3.js"><link rel="prefetch" href="/assets/js/112.e5c0d546.js"><link rel="prefetch" href="/assets/js/113.b1c17feb.js"><link rel="prefetch" href="/assets/js/114.c24b95ed.js"><link rel="prefetch" href="/assets/js/115.d7e38c3b.js"><link rel="prefetch" href="/assets/js/116.1aaa95ab.js"><link rel="prefetch" href="/assets/js/117.1a9e5539.js"><link rel="prefetch" href="/assets/js/118.8d915477.js"><link rel="prefetch" href="/assets/js/119.77f0a126.js"><link rel="prefetch" href="/assets/js/12.16a9b730.js"><link rel="prefetch" href="/assets/js/120.3cf0ba10.js"><link rel="prefetch" href="/assets/js/121.47fefbf1.js"><link rel="prefetch" href="/assets/js/122.3dd022e8.js"><link rel="prefetch" href="/assets/js/123.84abc63f.js"><link rel="prefetch" href="/assets/js/124.2568e233.js"><link rel="prefetch" href="/assets/js/125.5b665f24.js"><link rel="prefetch" href="/assets/js/126.25b58a0a.js"><link rel="prefetch" href="/assets/js/127.d62a58c6.js"><link rel="prefetch" href="/assets/js/128.e5774a02.js"><link rel="prefetch" href="/assets/js/129.9a813c06.js"><link rel="prefetch" href="/assets/js/13.f8bde866.js"><link rel="prefetch" href="/assets/js/130.edddc316.js"><link rel="prefetch" href="/assets/js/131.760aa65c.js"><link rel="prefetch" href="/assets/js/132.559d5ba7.js"><link rel="prefetch" href="/assets/js/133.cbdd35c7.js"><link rel="prefetch" href="/assets/js/134.c02d92e1.js"><link rel="prefetch" href="/assets/js/135.e6d5496a.js"><link rel="prefetch" href="/assets/js/136.8826af60.js"><link rel="prefetch" href="/assets/js/137.28b4573d.js"><link rel="prefetch" href="/assets/js/138.d370fc15.js"><link rel="prefetch" href="/assets/js/139.8d9150fc.js"><link rel="prefetch" href="/assets/js/14.a98602cc.js"><link rel="prefetch" href="/assets/js/140.f0a9b5e1.js"><link rel="prefetch" href="/assets/js/141.297fa6fe.js"><link rel="prefetch" href="/assets/js/142.82bbcbaa.js"><link rel="prefetch" href="/assets/js/143.2d1ed3b2.js"><link rel="prefetch" href="/assets/js/144.69a9bc6a.js"><link rel="prefetch" href="/assets/js/145.74d52c12.js"><link rel="prefetch" href="/assets/js/146.12ecdaf4.js"><link rel="prefetch" href="/assets/js/147.daad4b96.js"><link rel="prefetch" href="/assets/js/148.bb356182.js"><link rel="prefetch" href="/assets/js/149.56fdaace.js"><link rel="prefetch" href="/assets/js/15.ea6e5024.js"><link rel="prefetch" href="/assets/js/150.ee9c4994.js"><link rel="prefetch" href="/assets/js/151.2feae618.js"><link rel="prefetch" href="/assets/js/152.c7703521.js"><link rel="prefetch" href="/assets/js/153.3b555eab.js"><link rel="prefetch" href="/assets/js/154.c6329253.js"><link rel="prefetch" href="/assets/js/155.334c4ea4.js"><link rel="prefetch" href="/assets/js/156.1a29657f.js"><link rel="prefetch" href="/assets/js/157.ba8f07bc.js"><link rel="prefetch" href="/assets/js/158.a60a60ba.js"><link rel="prefetch" href="/assets/js/159.9ce96d49.js"><link rel="prefetch" href="/assets/js/16.14acc638.js"><link rel="prefetch" href="/assets/js/160.2a970224.js"><link rel="prefetch" href="/assets/js/161.a26e2b53.js"><link rel="prefetch" href="/assets/js/162.73535662.js"><link rel="prefetch" href="/assets/js/163.7518a0a5.js"><link rel="prefetch" href="/assets/js/164.17367778.js"><link rel="prefetch" href="/assets/js/165.46c8f055.js"><link rel="prefetch" href="/assets/js/166.1cc22037.js"><link rel="prefetch" href="/assets/js/167.3fbcb5c6.js"><link rel="prefetch" href="/assets/js/168.a3f80f1e.js"><link rel="prefetch" href="/assets/js/169.a6565c29.js"><link rel="prefetch" href="/assets/js/17.d6f2f3b8.js"><link rel="prefetch" href="/assets/js/170.566ddeda.js"><link rel="prefetch" href="/assets/js/171.4fd97bee.js"><link rel="prefetch" href="/assets/js/172.5295c6b9.js"><link rel="prefetch" href="/assets/js/173.ff25fd05.js"><link rel="prefetch" href="/assets/js/174.22ea6a1b.js"><link rel="prefetch" href="/assets/js/175.c6a04367.js"><link rel="prefetch" href="/assets/js/176.d3810924.js"><link rel="prefetch" href="/assets/js/177.facd2802.js"><link rel="prefetch" href="/assets/js/178.f4c6fbe9.js"><link rel="prefetch" href="/assets/js/179.1a3a2c12.js"><link rel="prefetch" href="/assets/js/18.83f6b39a.js"><link rel="prefetch" href="/assets/js/180.b54c8e90.js"><link rel="prefetch" href="/assets/js/181.88495b4c.js"><link rel="prefetch" href="/assets/js/182.8341d23c.js"><link rel="prefetch" href="/assets/js/183.332bcfe2.js"><link rel="prefetch" href="/assets/js/184.d8996a56.js"><link rel="prefetch" href="/assets/js/185.b8584f07.js"><link rel="prefetch" href="/assets/js/186.fa89e23f.js"><link rel="prefetch" href="/assets/js/187.90340eeb.js"><link rel="prefetch" href="/assets/js/188.efe631f8.js"><link rel="prefetch" href="/assets/js/189.72897b1a.js"><link rel="prefetch" href="/assets/js/19.94f071c0.js"><link rel="prefetch" href="/assets/js/190.1ec691ee.js"><link rel="prefetch" href="/assets/js/2.fc5d9892.js"><link rel="prefetch" href="/assets/js/20.13f7bbff.js"><link rel="prefetch" href="/assets/js/21.9ebad2b1.js"><link rel="prefetch" href="/assets/js/22.764b643d.js"><link rel="prefetch" href="/assets/js/23.f533737e.js"><link rel="prefetch" href="/assets/js/24.4eaa533c.js"><link rel="prefetch" href="/assets/js/26.8905d6a0.js"><link rel="prefetch" href="/assets/js/27.b199a955.js"><link rel="prefetch" href="/assets/js/28.524af0cf.js"><link rel="prefetch" href="/assets/js/29.b772949f.js"><link rel="prefetch" href="/assets/js/3.6b94323a.js"><link rel="prefetch" href="/assets/js/30.f5bcac64.js"><link rel="prefetch" href="/assets/js/31.c55e03aa.js"><link rel="prefetch" href="/assets/js/32.e575600a.js"><link rel="prefetch" href="/assets/js/33.3fff5656.js"><link rel="prefetch" href="/assets/js/34.82598567.js"><link rel="prefetch" href="/assets/js/35.8e1290ba.js"><link rel="prefetch" href="/assets/js/36.6dbb9d8c.js"><link rel="prefetch" href="/assets/js/37.d27fdc88.js"><link rel="prefetch" href="/assets/js/38.f8fc7b20.js"><link rel="prefetch" href="/assets/js/39.bf967d40.js"><link rel="prefetch" href="/assets/js/4.706a5607.js"><link rel="prefetch" href="/assets/js/40.e1864fd6.js"><link rel="prefetch" href="/assets/js/41.61bd3b64.js"><link rel="prefetch" href="/assets/js/42.34d8d61d.js"><link rel="prefetch" href="/assets/js/43.1aee493f.js"><link rel="prefetch" href="/assets/js/44.22177e9b.js"><link rel="prefetch" href="/assets/js/45.5c743d2f.js"><link rel="prefetch" href="/assets/js/46.4feffac9.js"><link rel="prefetch" href="/assets/js/47.367f9103.js"><link rel="prefetch" href="/assets/js/48.0c246d45.js"><link rel="prefetch" href="/assets/js/49.ee354be9.js"><link rel="prefetch" href="/assets/js/5.7d9779f7.js"><link rel="prefetch" href="/assets/js/50.bd81c7f0.js"><link rel="prefetch" href="/assets/js/51.a5f432dd.js"><link rel="prefetch" href="/assets/js/52.537aded4.js"><link rel="prefetch" href="/assets/js/53.84814584.js"><link rel="prefetch" href="/assets/js/54.5f780e97.js"><link rel="prefetch" href="/assets/js/55.9d44c91d.js"><link rel="prefetch" href="/assets/js/56.fc164b43.js"><link rel="prefetch" href="/assets/js/57.959b2d44.js"><link rel="prefetch" href="/assets/js/58.bd5c38e0.js"><link rel="prefetch" href="/assets/js/59.3eaece52.js"><link rel="prefetch" href="/assets/js/6.49a49457.js"><link rel="prefetch" href="/assets/js/60.4b8cb735.js"><link rel="prefetch" href="/assets/js/61.b54b9195.js"><link rel="prefetch" href="/assets/js/62.0116614c.js"><link rel="prefetch" href="/assets/js/63.85b1247d.js"><link rel="prefetch" href="/assets/js/64.8f1be6b5.js"><link rel="prefetch" href="/assets/js/65.6a241647.js"><link rel="prefetch" href="/assets/js/66.08c8bd13.js"><link rel="prefetch" href="/assets/js/67.002e0071.js"><link rel="prefetch" href="/assets/js/68.6c6a7c94.js"><link rel="prefetch" href="/assets/js/69.64d90e5d.js"><link rel="prefetch" href="/assets/js/7.469d3b64.js"><link rel="prefetch" href="/assets/js/70.b2c287c9.js"><link rel="prefetch" href="/assets/js/71.b7ad1135.js"><link rel="prefetch" href="/assets/js/72.7391b5c2.js"><link rel="prefetch" href="/assets/js/73.c5c77d81.js"><link rel="prefetch" href="/assets/js/74.96f80ffd.js"><link rel="prefetch" href="/assets/js/75.2920c7b7.js"><link rel="prefetch" href="/assets/js/76.a90bd3c9.js"><link rel="prefetch" href="/assets/js/77.3a0eeccd.js"><link rel="prefetch" href="/assets/js/78.6791678c.js"><link rel="prefetch" href="/assets/js/79.8b0c78e4.js"><link rel="prefetch" href="/assets/js/8.b36167bf.js"><link rel="prefetch" href="/assets/js/80.2641b89d.js"><link rel="prefetch" href="/assets/js/81.03d1925e.js"><link rel="prefetch" href="/assets/js/82.71061708.js"><link rel="prefetch" href="/assets/js/83.df220a8f.js"><link rel="prefetch" href="/assets/js/84.99fbef8f.js"><link rel="prefetch" href="/assets/js/85.dee8bcae.js"><link rel="prefetch" href="/assets/js/86.5200e4ce.js"><link rel="prefetch" href="/assets/js/87.96df0d82.js"><link rel="prefetch" href="/assets/js/88.e9171a32.js"><link rel="prefetch" href="/assets/js/89.53987bbc.js"><link rel="prefetch" href="/assets/js/9.5bed6ebe.js"><link rel="prefetch" href="/assets/js/90.8da0ff06.js"><link rel="prefetch" href="/assets/js/91.4bcce2cd.js"><link rel="prefetch" href="/assets/js/92.aca18707.js"><link rel="prefetch" href="/assets/js/93.93fdf568.js"><link rel="prefetch" href="/assets/js/94.e893b256.js"><link rel="prefetch" href="/assets/js/95.cb1d62b6.js"><link rel="prefetch" href="/assets/js/96.5529545c.js"><link rel="prefetch" href="/assets/js/97.d01eda68.js"><link rel="prefetch" href="/assets/js/98.384bebd6.js"><link rel="prefetch" href="/assets/js/99.fa349b8f.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.aa72e838.js"> |
| <link rel="stylesheet" href="/assets/css/styles.0ff943f0.css"> |
| </head> |
| <body> |
| <div id="app" data-server-rendered="true"><div class="theme-container vuepress-theme-fast"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/" class="home-link router-link-active"><img src="/logo@2x.svg" alt="WEEX" class="logo"></a><span class="version"><a href="/download/download.html" class="version-bg"><img src="/assets/img/version-bg.ab65ded9.svg" alt="v0.28"><span class="version-no">v0.28</span></a></span><div class="links"><form id="search-form" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form><nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link">Guide</a></div><div class="nav-item"><a href="/docs/" class="nav-link router-link-active">Docs</a></div><div class="nav-item"><a href="/tools/" class="nav-link">Third Party Tools</a></div><div class="nav-item"><a href="/download/" class="nav-link">Download</a></div><div class="nav-item"><a href="/community/" class="nav-link">Community</a></div><div class="nav-item"><a href="/blog/" class="nav-link">Blog</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Languages</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/docs/api/broadcast-channel.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----><a href="/zh/docs/api/broadcast-channel.html" class="nav-link">简体中文</a></li></ul></div></div></nav><a href="https://github.com/apache/incubator-weex" target="_blank" rel="noopener noreferrer" class="repo-link"><img src="/assets/img/github.7cb484a9.svg" alt="github" class="github-icon"></a></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link">Guide</a></div><div class="nav-item"><a href="/docs/" class="nav-link router-link-active">Docs</a></div><div class="nav-item"><a href="/tools/" class="nav-link">Third Party Tools</a></div><div class="nav-item"><a href="/download/" class="nav-link">Download</a></div><div class="nav-item"><a href="/community/" class="nav-link">Community</a></div><div class="nav-item"><a href="/blog/" class="nav-link">Blog</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Languages</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/docs/api/broadcast-channel.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----><a href="/zh/docs/api/broadcast-channel.html" class="nav-link">简体中文</a></li></ul></div></div></nav><ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>API</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/api/weex-variable.html" class="sidebar-link">Weex Variable</a></li><li><a href="/docs/api/android-apis.html" class="sidebar-link">Android APIs</a></li><li><a href="/docs/api/ios-apis.html" class="sidebar-link">iOS APIs</a></li><li><a href="/docs/api/js-service.html" class="sidebar-link">JS Service</a></li><li><a href="/docs/api/broadcast-channel.html" class="active sidebar-link">BroadcastChannel</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/broadcast-channel.html#api" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/docs/api/broadcast-channel.html#communication-procedure" class="sidebar-link">Communication Procedure</a></li><li class="sidebar-sub-header"><a href="/docs/api/broadcast-channel.html#usage-example" class="sidebar-link">Usage Example</a></li><li class="sidebar-sub-header"><a href="/docs/api/broadcast-channel.html#notice" class="sidebar-link">Notice</a></li></ul></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Built-in Components</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/components/a.html" class="sidebar-link"><a></a></li><li><a href="/docs/components/div.html" class="sidebar-link"><div></a></li><li><a href="/docs/components/text.html" class="sidebar-link"><text></a></li><li><a href="/docs/components/image.html" class="sidebar-link"><image></a></li><li><a href="/docs/components/list.html" class="sidebar-link"><list></a></li><li><a href="/docs/components/cell.html" class="sidebar-link"><cell></a></li><li><a href="/docs/components/loading.html" class="sidebar-link"><loading></a></li><li><a href="/docs/components/refresh.html" class="sidebar-link"><refresh></a></li><li><a href="/docs/components/recycle-list.html" class="sidebar-link"><recycle-list></a></li><li><a href="/docs/components/scroller.html" class="sidebar-link"><scroller></a></li><li><a href="/docs/components/slider.html" class="sidebar-link"><slider></a></li><li><a href="/docs/components/indicator.html" class="sidebar-link"><indicator></a></li><li><a href="/docs/components/textarea.html" class="sidebar-link"><textarea></a></li><li><a href="/docs/components/input.html" class="sidebar-link"><input></a></li><li><a href="/docs/components/waterfall.html" class="sidebar-link"><waterfall></a></li><li><a href="/docs/components/video.html" class="sidebar-link"><video></a></li><li><a href="/docs/components/web.html" class="sidebar-link"><web></a></li><li><a href="/docs/components/richtext.html" class="sidebar-link"><richtext></a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Built-in Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/animation.html" class="sidebar-link">animation</a></li><li><a href="/docs/modules/clipboard.html" class="sidebar-link">clipboard</a></li><li><a href="/docs/modules/dom.html" class="sidebar-link">dom</a></li><li><a href="/docs/modules/globalEvent.html" class="sidebar-link">globalEvent</a></li><li><a href="/docs/modules/meta.html" class="sidebar-link">meta</a></li><li><a href="/docs/modules/modal.html" class="sidebar-link">modal</a></li><li><a href="/docs/modules/navigator.html" class="sidebar-link">navigator</a></li><li><a href="/docs/modules/picker.html" class="sidebar-link">picker</a></li><li><a href="/docs/modules/storage.html" class="sidebar-link">storage</a></li><li><a href="/docs/modules/stream.html" class="sidebar-link">stream</a></li><li><a href="/docs/modules/webview.html" class="sidebar-link">webview</a></li><li><a href="/docs/modules/websockets.html" class="sidebar-link">webSockets</a></li><li><a href="/docs/modules/deviceInfo.html" class="sidebar-link">deviceInfo</a></li><li><a href="/docs/modules/console-log.html" class="sidebar-link">console-log</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Styles</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/styles/common-styles.html" class="sidebar-link">Common Styles</a></li><li><a href="/docs/styles/text-styles.html" class="sidebar-link">Text Styles</a></li><li><a href="/docs/styles/css-units.html" class="sidebar-link">CSS Units</a></li><li><a href="/docs/styles/color-name.html" class="sidebar-link">Color name</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Events</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/events/common-events.html" class="sidebar-link">Common Events</a></li><li><a href="/docs/events/event-bubbling.html" class="sidebar-link">Event Bubble</a></li><li><a href="/docs/events/gesture.html" class="sidebar-link">Gesture</a></li></ul></div></li></ul></div><div class="page"><div class="content"><blockquote><p>The <code>BroadcastChannel</code> is available since <span class="api-version">v0.9+</span>.</p></blockquote><p>As mentioned in <a href="/guide/platform-difference.html">Platform Difference with Web</a>, Weex is using different context for each page, even global variables are isolated, but <code>BroadcastChannel</code> is a way to achieve cross-page communication.</p><h2 id="api"><a href="#api" class="header-anchor">#</a> API</h2><blockquote><p><em>BroadcastChannel</em> is part of <a href="https://html.spec.whatwg.org/multipage/comms.html#broadcasting-to-other-browsing-contexts" target="_blank" rel="noopener noreferrer">W3C specifications<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>, as well as the <a href="https://html.spec.whatwg.org/multipage/comms.html#messageevent" target="_blank" rel="noopener noreferrer">MessageEvent<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p></blockquote><p>The constructor of <code>BroadcastChannel</code> only take one single parameter which is the channel name.</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> bc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BroadcastChannel</span><span class="token punctuation">(</span><span class="token string">'007'</span><span class="token punctuation">)</span> |
| </code></pre></div><p>The type declaration of the <code>BroadcastChannel</code> is:</p><div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">declare</span> <span class="token keyword">interface</span> <span class="token class-name">BroadcastChannel</span> <span class="token operator">=</span> <span class="token punctuation">{</span> |
| name<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">postMessage</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token parameter">message<span class="token punctuation">:</span> <span class="token builtin">any</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span> |
| <span class="token function-variable function">onmessage</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">:</span> MessageEvent</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span> |
| <span class="token function-variable function">close</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| </code></pre></div><ul><li><code>name</code>: The channel name, it's the indicator when broadcast messages.</li><li><code>postMessage</code>: Sends the given message to other BroadcastChannel objects set up for this channel.</li><li><code>onmessage</code>: The event handler. An event will be triggered when the instance received a message.</li><li><code>close</code>: Closes the BroadcastChannel object, opening it up to garbage collection.</li></ul><p>The type declaration of the <code>MessageEvent</code> is:</p><div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">declare</span> <span class="token keyword">interface</span> <span class="token class-name">MessageEvent</span> <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token keyword">type</span><span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token comment">// "message"</span> |
| data<span class="token punctuation">:</span> <span class="token builtin">any</span> |
| <span class="token punctuation">}</span> |
| </code></pre></div><h2 id="communication-procedure"><a href="#communication-procedure" class="header-anchor">#</a> Communication Procedure</h2><p><img src="/assets/img/BroadcastChannel.53d53290.png" alt="BroadcastChannel"></p><p>Just like using radio, each client joins a specific channel by creating a <code>BroadcastChannel</code> object with the same channel name. Then implement the <code>onmessage</code> event handler to listen on the underlying channel. Call the <code>postMessage()</code> method on the BroadcastChannel object will broadcast a message to every subscriber of the channel.</p><p>Indeed, it's a full-duplex (bi-directional) communication between all subscriber of the particular channel, each of them is able to receive any message that has been posted to it. Even the sender of the message can receive the message event itself. Communications between different channels will not affect each other.</p><p>To leave a channel, it is required to call the <code>close()</code> method on the BroadcastChannel object. This method only closed itself, and does not affect other subscribers. When a Weex page is destroyed, all subscribers in it will be closed at <code>destroyInstance</code>. If all subscribers of a channel are closed, the underlying channel would be destroyed and allows garbage collection to happen.</p><h2 id="usage-example"><a href="#usage-example" class="header-anchor">#</a> Usage Example</h2><p>In page A:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> Steve <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BroadcastChannel</span><span class="token punctuation">(</span><span class="token string">'Avengers'</span><span class="token punctuation">)</span> |
| Steve<span class="token punctuation">.</span><span class="token function">postMessage</span><span class="token punctuation">(</span><span class="token string">'Assemble!'</span><span class="token punctuation">)</span> |
| </code></pre></div><p>In page B:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> Hulk <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BroadcastChannel</span><span class="token punctuation">(</span><span class="token string">'Avengers'</span><span class="token punctuation">)</span> |
| </code></pre></div><p>In page C:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> Stack <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BroadcastChannel</span><span class="token punctuation">(</span><span class="token string">'Avengers'</span><span class="token punctuation">)</span> |
| Stack<span class="token punctuation">.</span><span class="token function-variable function">onmessage</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token comment">// Assemble!</span> |
| Stack<span class="token punctuation">.</span><span class="token function">postMessage</span><span class="token punctuation">(</span><span class="token string">'I am Tony and I am leaving now.'</span><span class="token punctuation">)</span> |
| <span class="token punctuation">}</span> |
| </code></pre></div><p>The page A, B and C are all create a BroadcastChannel object which is listening on the <code>'Avengers'</code> channel. They can use it to communicate with each other.</p><p>When Steve post the message <code>'Assemble!'</code>, Stack will receive a message event whose <code>data</code> equals the <code>'Assemble!'</code>, and then send another message back. But Hulk will not receive the message because he does not implement the <code>onmessage</code> method, so he is not a subscriber actually.</p><blockquote><p>note: Stack will not receive this message which posted by himself</p></blockquote><h2 id="notice"><a href="#notice" class="header-anchor">#</a> Notice</h2><blockquote><p><strong>The <code>message</code> object is not deep cloned.</strong> (This feature could be changed.)</p></blockquote><p>In page A:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BroadcastChannel</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span> |
| <span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">]</span> |
| a<span class="token punctuation">.</span><span class="token function">postMessage</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span> |
| </code></pre></div><p>In page B:</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BroadcastChannel</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span> |
| b<span class="token punctuation">.</span><span class="token function-variable function">onmessage</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token comment">// the event.data is a reference of list in page A</span> |
| event<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'C'</span><span class="token punctuation">)</span> |
| <span class="token punctuation">}</span> |
| </code></pre></div><p>In this case, the <code>event.data</code> in page B is a reference of <code>list</code> in page A. When pushing a new item <code>'C'</code>, it will also affect the <code>list</code> object in page A.</p><p>Compared to the deep clone, this behavior improves efficiency and reduces memory cost. However, developers are not recommended caching or modifying the <code>event</code> object after received it.</p></div><div class="page-nav"><p class="inner"><span class="prev"> |
| ← |
| <a href="/docs/api/js-service.html" class="prev"> |
| JS Service |
| </a></span><span class="next"><a href="/docs/components/a.html"> |
| <a> |
| </a> |
| → |
| </span></p></div><div class="page-edit"><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">12/10/2020</span></div><div class="edit-link"><a href="https://github.com/apache/incubator-weex-site/edit/master/docs/docs/api/broadcast-channel.md" target="_blank" rel="noopener noreferrer">Edit this page</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><a href="https://github.com/apache/incubator-weex-site/issues/new?body=https%3A%2F%2Fweex.io%2F" target="_blank" rel="noopener noreferrer" class="issueText">Suggest</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="score"><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon">Excellent doc</span><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon bad">Unusable doc</span></div></div><div class="license-wrap" style="display:none;"><footer class="footer-container" data-v-0ad13d84><div class="footer-body" data-v-0ad13d84><img src="/logo@2x.svg" class="logo" data-v-0ad13d84><img src="//img.alicdn.com/tfs/TB11BRiIW6qK1RjSZFmXXX0PFXa-365-365.png" class="apache" data-v-0ad13d84><div class="cols-container" data-v-0ad13d84><div class="col col-12" data-v-0ad13d84><h3 data-v-0ad13d84>Disclaimer</h3><p data-v-0ad13d84>Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the |
| Incubator. Incubation is required of all newly accepted projects until a further review indicates that the |
| infrastructure, communications, and decision making process have stabilized in a manner consistent with |
| other successful ASF projects. While incubation status is not necessarily a reflection of the completeness |
| or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>ASF</dt><dd data-v-0ad13d84><a href="http://www.apache.org" target="_self" data-v-0ad13d84>Foundation</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/licenses/" target="_self" data-v-0ad13d84>License</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/events/current-event" target="_self" data-v-0ad13d84>Events</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/foundation/sponsorship.html" target="_self" data-v-0ad13d84>Sponsorship</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/foundation/thanks.html" target="_self" data-v-0ad13d84>Thanks</a></dd></dl></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>Documentation</dt><dd data-v-0ad13d84><a href="/guide/develop/create-a-new-app.html" target="_self" data-v-0ad13d84>Quick start</a></dd><dd data-v-0ad13d84><a href="/guide/develop/setup-develop-environment.html" target="_self" data-v-0ad13d84>Developer guide</a></dd></dl></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>Resources</dt><dd data-v-0ad13d84><a href="/blog/write-a-blog.html" target="_self" data-v-0ad13d84>Blog</a></dd><dd data-v-0ad13d84><a href="/community/" target="_self" data-v-0ad13d84>Community</a></dd><dd data-v-0ad13d84><a href="/guide/contribute/thanks.html" target="_self" data-v-0ad13d84>Thanks by Weex</a></dd><dd data-v-0ad13d84><a href="https://www.apache.org/security/" target="_self" data-v-0ad13d84>Security</a></dd></dl></div></div><div class="copyright" data-v-0ad13d84><span data-v-0ad13d84>Copyright © 2018-2019 The Apache Software Foundation. Apache and the Apache feather |
| logo are trademarks of The Apache Software Foundation.</span></div></div></footer></div></div><!----></div></div> |
| <script src="/assets/js/app.0ff943f0.js" defer></script><script src="/assets/js/25.e9877e57.js" defer></script> |
| </body> |
| </html> |
