---
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>