blob: 1cf9d986923091a58eb1977f6756a3184bb5344e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: Channel Messaging API
slug: Web/API/Channel_Messaging_API
translation_of: Web/API/Channel_Messaging_API
---
<p>Channel Messaging API 讓同屬一份文件不同瀏覽環境的兩份程式腳本 (如兩個 IFrame、或主頁面和 IFrame、文件和 {{domxref("SharedWorker")}}、或兩個 worker)，也能夠經由雙向 channel (通道) 兩端的 port (連接阜) 直接傳遞訊息互相溝通。</p>
<p>{{AvailableInWorkers}}</p>
<h2 id="Channel_訊息概念與使用情境">Channel 訊息概念與使用情境</h2>
<p>{{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} 建構子產生 channel， 一但生成了，便可以存取 channel 兩端的 port: {{domxref("MessageChannel.port1")}} 和 {{domxref("MessageChannel.port2")}}，這兩個屬性會回傳 domxref("MessagePort")}} objects.)。建立 channel 的 app 使用 port1，另一端用 port2，利用 {{domxref("window.postMessage")}} 方法帶入參數，向 port2 傳送訊息以及移轉物件 (這裡也就是只 port)。</p>
<p>一但可移轉物件被移轉後，前任擁有者便失去所有權，例如當 port 移轉出去後，原本持有該 port 的環境便不能再使用之。目前可移轉物件只有 {{domxref("ArrayBuffer")}} 以及 {{domxref("MessagePort")}}。</p>
<p>另一端的瀏覽環境則藉由 {{domxref("MessagePort.onmessage")}} 監聽訊息、從訊息事件物件的 data 屬性擷取訊息資料，然後再呼叫 {{domxref("MessagePort.postMessage")}} 回傳訊息。</p>
<p>如果想關閉訊息 channel，則呼叫 {{domxref("MessagePort.close")}}。</p>
<p>更多 API 使用細節請見<a href="/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging"> Using channel messaging</a>。</p>
<h2 id="Channel_訊息介面">Channel 訊息介面</h2>
<dl>
<dt>{{domxref("MessageChannel")}}</dt>
<dd>生成一個新的 message channel。</dd>
<dt>{{domxref("MessagePort")}}</dt>
<dd>控制 port，用來傳送和監聽訊息。</dd>
<dt>{{domxref("PortCollection")}}</dt>
<dd><code>MessagePort</code>s 陣列，實驗性質方案；用來同時廣播到多個訊息 port。</dd>
</dl>
<h2 id="範例">範例</h2>
<ul>
<li>Github 上有<a href="https://github.com/mdn/channel-messaging-basic-demo"> channel messaging basic demo</a> (<a href="http://mdn.github.io/channel-messaging-basic-demo/">run it live too</a>)，一個簡單示範主頁和 {{htmlelement("iframe")}} 間的訊息溝通。</li>
<li>還有 <a href="https://github.com/mdn/channel-messaging-multimessage">multimessaging demo</a> (<a href="http://mdn.github.io/channel-messaging-multimessage/">run this live</a>)，較為複雜的例子。</li>
</ul>
<h2 id="標準規範">標準規範</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', '#toc-comms')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Channel messaging defined in section 9.5. No difference to the the HTML5 Web Messaging spec.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 Web Messaging', '#channel-messaging')}}</td>
<td>{{Spec2('HTML5 Web Messaging')}}</td>
<td>W3C version of the spec.</td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>4</td>
<td>{{CompatGeckoDesktop(41)}}</td>
<td>10.0</td>
<td>10.6</td>
<td>5</td>
</tr>
<tr>
<td>PortCollection</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>Available in workers</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop(41)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome Mobile</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>4.4</td>
<td>4</td>
<td>{{CompatGeckoMobile(41)}}</td>
<td>{{CompatNo}}</td>
<td>10.0</td>
<td>11.5</td>
<td>5.1</td>
</tr>
<tr>
<td>PortCollection</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>Available in workers</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile(41)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="延伸閱讀">延伸閱讀</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li>
<li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
<li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel API</a></li>
</ul>
|
