Основной поток и запускаемые в нем веб-воркеры могут взаимодействовать посредством сообщений. Для отправки сообщения веб-воркеру у объекта 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" получаем ответ.
Результат работы: