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
159
160
161
162
163
|
---
title: Worker.postMessage()
slug: Web/API/Worker/postMessage
tags:
- API
- JavaScript
- Web Workers
- Worker
- postMessage
- Ссылка
- метод
translation_of: Web/API/Worker/postMessage
---
<p>{{APIRef("Web Workers API")}}</p>
<p>Метод <code><strong>postMessage()</strong></code> интерфейса {{domxref("Worker")}} отправляет сообщение во внутреннее пространство <code>worker</code>-а. Метод имеет один параметр с данными для отправки в <code>worker</code>. Данные могут быть любым значением или объектом JavaScript, которые может обработать <a href="/ru/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">алгоритм структурированного клонирования</a>, подерживающий циклические ссылки.</p>
<p><code>Worker</code> может отправить обратно информацию потоку создавшему его с помощью метода {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush: js">worker.postMessage(message, [transfer]);</pre>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt><em>message</em></dt>
<dd><code>Object</code> передаваемый в <code>worker</code>. Будет содержаться в поле <code>data</code> описания события обработчика {{domxref("DedicatedWorkerGlobalScope.onmessage")}}. Это может быть любое значение или объект JavaScript, которые может обработать алгоритм структурированного клонирования, подерживающий циклические ссылки.</dd>
<dt><em>transfer</em> {{optional_inline}}</dt>
<dd>Необязательный <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array">array</a></code> с передаваемыми ({{domxref("Transferable")}}) объектами (из тех, что были указаны в <code>message</code>) на которые передаются права собственности. Если право на объект передается, он становится непригодным (<em>neutered</em>) в контексте, из которого был отправлен, и становится доступным только в <code>worker</code>, которому он был отправлен.</dd>
<dd>Переданные (<code>transferable</code>) объекты могут быть экземплярами классов {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}} или {{domxref("ImageBitmap")}}. null не является допустимым значением для передачи прав.</dd>
</dl>
<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
<p>Void.</p>
<h2 id="Пример">Пример</h2>
<p>В следующем фрагменте кода показано создание объекта {{domxref("Worker")}} с помощью конструктора {{domxref("Worker.Worker", "Worker()")}}. При изменении значений одного из двух полей формы (<code>first</code> и <code>second</code>) событием {{event("change")}} вызывается функция <code>postMessage()</code> для отправки значений полей текущему worker.</p>
<pre class="brush: js">var myWorker = new Worker('worker.js');
first.onchange = function() {
myWorker.postMessage([first.value,second.value]);
console.log('Сообщение отправлено работнику');
}
second.onchange = function() {
myWorker.postMessage([first.value,second.value]);
console.log('Сообщение отправлено работнику');
}
</pre>
<p>Больше примеров можно найти здесь: <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
<div class="note">
<p><strong>Замечание</strong>: <code>postMessage()</code> может отправить только один объект за раз. Если нужно передать несколько значений, то можно отправить массив, как показано выше.</p>
</div>
<h3 id="Пример_с_Transfer">Пример с Transfer</h3>
<p>В этом примере показано дополнение Firefox, которое передает <code>ArrayBuffer</code> из основного потока в <code>ChromeWorker</code>, а затем <code>ChromeWorker</code> передает его обратно в основной поток.</p>
<h4 id="Код_основного_потока">Код основного потока:</h4>
<pre class="brush: js">var myWorker = new ChromeWorker(self.path + 'myWorker.js');
function handleMessageFromWorker(msg) {
console.log('входящее сообщение от работника:', msg);
switch (msg.data.aTopic) {
case 'do_sendMainArrBuff':
sendMainArrBuff(msg.data.aBuf)
break;
default:
throw 'свойство aTopic отсутствует в сообщении ChromeWorker';
}
}
myWorker.addEventListener('message', handleMessageFromWorker);
// Создание и отправка буфера
var arrBuf = new ArrayBuffer(8);
console.info('arrBuf.byteLength, ДО передачи:', arrBuf.byteLength);
myWorker.postMessage(
{
aTopic: 'do_sendWorkerArrBuff',
aBuf: arrBuf // буфер который передается 3 строками ниже
},
[
arrBuf // буфер созданный на строке 9
]
);
console.info('arrBuf.byteLength, ПОСЛЕ передачи:', arrBuf.byteLength);
</pre>
<h4 id="Код_Worker-а">Код Worker-а</h4>
<pre class="brush: js">self.onmessage = function (msg) {
switch (msg.data.aTopic) {
case 'do_sendWorkerArrBuff':
sendWorkerArrBuff(msg.data.aBuf)
break;
default:
throw 'свойство aTopic отсутствует в сообщении ChromeWorker';
}
}
function sendWorkerArrBuff(aBuf) {
console.info('от рабочего, ДО отправки обратно, aBuf.byteLength:', aBuf.byteLength);
self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
console.info('от рабочего, ПОСЛЕ отправки обратно, aBuf.byteLength:', aBuf.byteLength);
}
</pre>
<h4 id="Лог_консоли">Лог консоли</h4>
<pre>arrBuf.byteLength, ДО передачи: 8 bootstrap.js:40
arrBuf.byteLength, ПОСЛЕ передачи: 0 bootstrap.js:42
от рабочего, ДО отправки обратно, aBuf.byteLength: 8 myWorker.js:5:2
входящее сообщение от работника: message { ... } bootstrap.js:20
буфер вернулся в основной поток, aBuf.byteLength: 8 bootstrap.js:12
от рабочего, ПОСЛЕ отправки обратно, aBuf.byteLength: 0 myWorker.js:7:2</pre>
<p><code>byteLength</code> равен 0 потому, что это переданный (<code>transferable</code>) объект. Полный пример демо дополнения Firefox можно найти здесь: <a href="https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b">GitHub :: ChromeWorker - demo-transfer-arraybuffer</a></p>
<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', "#dom-worker-postmessage", "Worker.postMessage()")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
<p>{{Compat("api.Worker.postMessage")}}</p>
<p>[1] Internet Explorer не поддерживает {{domxref("Transferable")}} объекты.</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>Интерфейс {{domxref("Worker")}}</li>
</ul>
|
