blob: 54f1215ad5e68a9645e109dd4dd92e3d270b2124 (
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
|
---
title: MessageEvent
slug: Web/API/MessageEvent
tags:
- API
- WebSockets
- リファレンス
translation_of: Web/API/MessageEvent
---
<p>{{APIRef("HTML DOM")}}</p>
<p><code><strong>MessageEvent</strong></code> インターフェースは対象のオブジェクトから受け取ったメッセージを表します。</p>
<p>次のメッセージを表すために使用されます。</p>
<ul>
<li><a href="/ja/docs/Server-sent_events">Server-sent events</a> ({{domxref("EventSource.onmessage")}} を参照).</li>
<li><a href="/ja/docs/Web/API/WebSockets_API">Web sockets</a> (<a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> インターフェースの <code>onmessage</code> プロパティを参照).</li>
<li>Cross-document messaging ({{domxref("Window.postMessage()")}} および {{domxref("Window.onmessage")}} を参照).</li>
<li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel messaging</a> ({{domxref("MessagePort.postMessage()")}} および {{domxref("MessagePort.onmessage")}} を参照).</li>
<li>Cross-worker/document messaging (上記 2エントリほか、{{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}} なども参照)</li>
<li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast channels</a> ({{domxref("Broadcastchannel.postMessage()")}}) および {{domxref("BroadcastChannel.onmessage")}} を参照).</li>
<li>WebRTC データチャネル ({{domxref("RTCDataChannel.onmessage")}} を参照).</li>
</ul>
<p>このイベントによって引き起こされるアクションは、対応する {{event("message")}} イベント (例えば、 上記の <code>onmessage</code> ハンドラーを使ったもの) のイベントハンドラーとして設定された関数の中で定義されています。</p>
<p>{{AvailableInWorkers}}</p>
<h2 id="コンストラクター">コンストラクター</h2>
<dl>
<dt>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}</dt>
<dd>新しい <code>MessageEvent</code> を作成します。</dd>
</dl>
<h2 id="プロパティ">プロパティ</h2>
<p><em>このインターフェースは親 {{domxref("Event")}} からプロパティを継承します。</em></p>
<dl>
<dt>{{domxref("MessageEvent.data")}} {{readonlyInline}}</dt>
<dd>メッセージエミッターによって送信されたデータ。</dd>
<dt>{{domxref("MessageEvent.origin")}} {{readonlyInline}}</dt>
<dd>メッセージエミッターの出所を表す {{domxref("USVString")}} 。</dd>
<dt>{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}</dt>
<dd>イベントの一意の ID を表す {{domxref("DOMString")}} 。</dd>
<dt>{{domxref("MessageEvent.source")}} {{readonlyInline}}</dt>
<dd>({{domxref("WindowProxy")}}、 {{domxref("MessagePort")}}、 もしくは {{domxref("ServiceWorker")}} オブジェクトの場合がある) <code>MessageEventSource</code> で、メッセージエミッターを表します。</dd>
<dt>{{domxref("MessageEvent.ports")}} {{readonlyInline}}</dt>
<dd>メッセージが送信される (例えば、channel messaging や shared worker にメッセージを送信した場合) チャネルと対応したポートを表す {{domxref("MessagePort")}} オブジェクトの配列です。 </dd>
</dl>
<h2 id="メソッド">メソッド</h2>
<p><em>このインターフェースは親 {{domxref("Event")}} から継承します。</em></p>
<dl>
<dt>{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}</dt>
<dd>メッセージイベントを初期化します。<strong>これ以上このメソッドを使用しないでください。代わりに、</strong><strong>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} コンストラクターを使用してください。</strong></dd>
</dl>
<h2 id="例">例</h2>
<p> <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">基礎的な shared worker の例</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>) の中では、2 つの HTML ページがあり、それぞれのページが単純な計算をする JavaScript を実行しています。異なるスクリプトが計算を実行するために同一の worker ファイルを使用しています。ページの異なるウィンドウ内で動作していても、どちらのスクリプトも worker ファイルにアクセスできます。</p>
<p>次のコードスニペットは、{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} コンストラクターで <code>SharedWorker</code> オブジェクトの作成を示します。どちらのスクリプトもこれを含んでいます。</p>
<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
</pre>
<p>次にどちらのスクリプトも {{domxref("SharedWorker.port")}} プロパティで作成された {{domxref("MessagePort")}} オブジェクトを通して worker にアクセスします。onmessage event が addEventListener で加えられると、<code>start()</code> メソッドでポートは手動で開きます。</p>
<pre class="brush: js">myWorker.port.start();</pre>
<p>ポートが開くと、どちらのスクリプトも worker にメッセージを送信し、送信されたメッセージを <code>port.postMessage()</code> と <code>port.onmessage</code> でそれぞれ処理します。</p>
<pre class="brush: js">first.onchange = function() {
myWorker.port.postMessage([first.value,second.value]);
console.log('Message posted to worker');
}
second.onchange = function() {
myWorker.port.postMessage([first.value,second.value]);
console.log('Message posted to worker');
}
myWorker.port.onmessage = function(e) {
result1.textContent = e.data;
console.log('Message received from worker');
}</pre>
<p>worker の内部では、同一のポートに接続するために {{domxref("SharedWorkerGlobalScope.onconnect")}} ハンドラーを使っています。その worker と対応したポートは、{{event("connect")}} イベントの <code>ports</code> プロパティで接続可能です。その後、ポートを開くために {{domxref("MessagePort")}} の <code>start()</code> メソッドを、メインのスレッドから送信されたメッセージを処理するために<code>onmessage</code> ハンドラーを使用します。</p>
<pre class="brush: js">onconnect = function(e) {
var port = e.ports[0];
port.addEventListener('message', function(e) {
var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
port.postMessage(workerResult);
});
port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
}</pre>
<h2 id="仕様">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様書</th>
<th scope="col">策定状況</th>
<th scope="col">コメント</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
<p>{{Compat("api.MessageEvent")}}</p>
<h2 id="関連情報">関連情報</h2>
<ul>
<li>{{domxref("ExtendableMessageEvent")}} — similar to this interface but used in interfaces that needs to give more flexibility to authors.</li>
</ul>
|
