Обмен сообщениями между веб-воркером и основным потоком

Последнее обновление: 14.11.2023

Основной поток и запускаемые в нем веб-воркеры могут взаимодействовать посредством сообщений. Для отправки сообщения веб-воркеру у объекта Worker вызывается метод postMessage():

postMessage(message)
postMessage(message, options)
postMessage(message, transfer)

В качестве первого и обязательного параметра message передается отправляемое сообщение. В качестве сообщения может выступать произвольное значение, например, строка или объект. При передаче веб-воркер получает копию этих данных.

Дополнительный, необязательный параметр options представляет конфигурационный объект, который с помощью свойства transfer устанавливает дополнительно передаваемые данные. Те же данные передаются в третьей версии функции через параметр transfer. При передаче веб-воркеру переходит владение этими данными, а основной код больше не может использовать эти данные.

Чтобы получать сообщение на стороне веб-воркера, необходимо зарегистрировать функцию-обработчик для события получения сообщения - события message. Например, это можно сделать через свойство onmessage веб-воркера.

// установка обработчика события через addEventListener
worler.addEventListener("message", (event) => { console.log(event.data);});

// установка обработчика события через свойство onmessage
worker.onmessage = (event) => {console.log(event.data);};

В обработчика события передается объект MouseEvent, у которого через свойство data можно получить переданные данные.

Аналогично чтобы отправить из веб-воркера сообщение в основной поток, у веб-воркера также вызывается метод postMessage(). Внутри основного потока можно получить доступ к сообщению в обработчике события message

Для примера определим следующий скрипт worker.js:

// прослушиваем событие message
self.addEventListener("message", (event) => { 
	// выводим полученные из основного потока данные
	console.log(`[Worker] Message received: ${event.data}`);
	// отправляем в ответ основному потоку некоторое сообщение
	self.postMessage("Hello main thread");
});

С помощью слова self получаем доступ к объекту веб-воркера и устанавливаем для него обработчик события "message". В этом обработчике мы получаем переданные из основного потока данные и с помощью вызова self.postMessage отправляем основному потоку некоторый ответ.

В процессе работы веб-воркера может произойти ошибка, в этом случае мы можем обработать событие error объекта Worker.

И определим следующую веб-страницу:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<script>
const worker = new Worker("worker.js");

const message = "Hello web worker";
console.log(`[Main thread] Send message: ${message}`);
// отправляем веб-воркеру сообщение
worker.postMessage(message); 
// получаем от веб-воркера сообщения
worker.addEventListener("message", (e) => console.log(`[Main thread] Response from worker: ${e.data}`));
// если произошла ошибка
worker.addEventListener("error", (e) => console.log("Error occurred"));
</script>
</body>
</html>

Здесь аналогичным образом с помощью вызова worker.postMessage() посылаем веб-воркеру сообщение и также с помощью обработчика события "message" получаем ответ.

Результат работы:

Обмен сообщениями между Worker и веб-страницей в Web Worker API в javascript

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм