JavaScript Academy · Урок

Обмен сообщениями с postMessage

Обменивайтесь данными между главным потоком и рабочим потоком.

«Обмен сообщениями с postMessage» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Обмен сообщениями

Поскольку основной поток и worker используют разную память, они взаимодействуют, передавая сообщения. Метод postMessage отправляет данные, а событие message принимает их.

Отправка данных в worker

Из основного потока вызовите worker.postMessage(data). Данные могут иметь почти любой тип: числа, строки, объекты и массивы.

const worker = new Worker('worker.js');
worker.postMessage({ task: 'sum', numbers: [1, 2, 3, 4] });

Получение в worker

Внутри worker обрабатывайте событие message. Отправленное значение поступает в event.data.

// worker.js
self.onmessage = (event) => {
  const { task, numbers } = event.data;
  console.log('worker received task:', task);
};

Отправка ответа

worker вычисляет результат и отправляет его обратно с помощью собственного postMessage (используя self или неявный глобальный объект).

// worker.js
self.onmessage = (event) => {
  const { numbers } = event.data;
  const total = numbers.reduce((a, b) => a + b, 0);
  self.postMessage(total); // send result back
};

Получение ответа

Вернувшись в основной поток, прослушивайте событие message у объекта worker, чтобы получить результат.

worker.onmessage = (event) => {
  console.log('result from worker:', event.data);
};

Стиль addEventListener

Вместо свойства onmessage можно использовать addEventListener('message', ...). Это позволяет добавлять несколько обработчиков.

worker.addEventListener('message', (event) => {
  console.log('got:', event.data);
});

Структурированное клонирование

Сообщения копируются с помощью алгоритма структурированного клонирования, а не передаются совместно. Он обрабатывает объекты, массивы, карты, множества, даты и типизированные массивы, но не функции, узлы DOM или методы классов.

// OK to send: numbers, strings, plain objects, arrays,
// Map, Set, Date, ArrayBuffer, typed arrays.
// NOT cloneable: functions, DOM nodes, Error stacks lost.

Протокол сообщений

Для нескольких операций отправляйте поле type, чтобы worker знал, что нужно сделать. Это сохраняет гибкость одного worker.

// main:
worker.postMessage({ type: 'multiply', a: 6, b: 7 });

// worker.js:
self.onmessage = (e) => {
  if (e.data.type === 'multiply') {
    self.postMessage(e.data.a * e.data.b);
  }
};

Сопоставление запросов

При отправке множества сообщений добавляйте id, чтобы сопоставлять ответы с запросами. worker отправляет этот идентификатор обратно.

// main: worker.postMessage({ id: 42, value: 'x' });
// worker: self.postMessage({ id: e.data.id, done: true });
// main can now match reply id 42 to its request.

Двусторонний обмен

Обмен сообщениями является двусторонним и асинхронным. Страница может продолжать отправлять задачи, пока worker передаёт частичные результаты, и всё это без блокировки интерфейса.

// Worker can report progress repeatedly:
// self.postMessage({ type: 'progress', percent: 50 });
// self.postMessage({ type: 'done', result: data });

Удаление обработчиков

Когда worker больше не нужен, удаляйте обработчики и завершайте его работу, чтобы избежать утечек, особенно в одностраничных приложениях, которые постоянно создают новые worker.

worker.onmessage = null;
worker.terminate();

Проверка знаний

Проверьте, насколько хорошо Вы поняли обмен сообщениями worker.

Повторение

Вы изучили обмен сообщениями worker:

postMessage(data) отправляет сообщение, а событие message его получает.
Данные поступают в event.data.
Обе стороны могут отправлять сообщения, поэтому обмен является двусторонним.
Данные копируются посредством структурированного клонирования, а не передаются совместно.
Для нескольких задач используйте протокол с type и id.

Далее Вы изучите передаваемые объекты для обмена данными без копирования.

Часто задаваемые вопросы

Урок «Обмен сообщениями с postMessage» бесплатный?

Да — полный текст урока «Обмен сообщениями с postMessage» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Обмен сообщениями с postMessage»?

Обменивайтесь данными между главным потоком и рабочим потоком. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Обмен сообщениями с postMessage»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy