diff options
Diffstat (limited to 'files/ru/web/api/worker/postmessage/index.html')
| -rw-r--r-- | files/ru/web/api/worker/postmessage/index.html | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/files/ru/web/api/worker/postmessage/index.html b/files/ru/web/api/worker/postmessage/index.html new file mode 100644 index 0000000000..1d6279b648 --- /dev/null +++ b/files/ru/web/api/worker/postmessage/index.html @@ -0,0 +1,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> |