SharedWorker

Интерфейс SharedWorker представляет собой определенный тип рабочего процесса, к которому можно получить доступ из нескольких контекстов просмотра, таких как несколько окон, фреймов или даже рабочих процессов. Они реализуют интерфейс, отличный от выделенных рабочих процессов, и имеют другой глобальный контекст, SharedWorkerGlobalScope.

SharedWorker()

Создает общий веб-рабочий процесс, который выполняет скрипт по указанному URL.

Наследует свойства от родительского класса, EventTarget.

SharedWorker.port Только для чтения

Возвращает объект MessagePort, используемый для связи с общим рабочим процессом и управления им.

error

Срабатывает при возникновении ошибки в общем рабочем процессе.

Наследует методы от родительского класса, EventTarget.

В нашем примере основного общего рабочего процесса (запустить общий рабочий процесс) у нас есть две HTML-страницы, каждая из которых использует JavaScript для выполнения простого вычисления. Различные скрипты используют один и тот же файл рабочего процесса для выполнения вычислений — они оба могут получить к нему доступ, даже если их страницы выполняются в разных окнах.

Следующий фрагмент кода демонстрирует создание объекта SharedWorker с помощью конструктора SharedWorker(). Оба скрипта содержат это:

const myWorker = new SharedWorker("worker.js");

Затем оба скрипта получают доступ к рабочему процессу через объект MessagePort, созданный с помощью свойства SharedWorker.port. Если обработчик события onmessage прикреплен с помощью addEventListener, порт вручную запускается с помощью его метода start().

myWorker.port.start();

При запуске порта оба скрипта отправляют сообщения в рабочий процесс и обрабатывают сообщения, отправленные из него, соответственно с помощью port.postMessage() и port.onmessage.

[first, second].forEach((input) => {
  input.onchange = () => {
    myWorker.port.postMessage([first.value, second.value]);
    console.log("Message posted to worker");
  };
});

myWorker.port.onmessage = (e) => {
  result1.textContent = e.data;
  console.log("Message received from worker");
};

Внутри рабочего процесса мы используем обработчик onconnect для подключения к тому же порту, что и выше. Порты, связанные с этим рабочим процессом, доступны в свойстве ports события connect — затем мы используем метод MessagePort start() для запуска порта и обработчик onmessage для обработки сообщений, отправленных из основных потоков.

onconnect = (e) => {
  const port = e.ports[0];

  port.addEventListener("message", (e) => {
    const workerResult = `Result: ${e.data[0] * e.data[1]}`;
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};

• Worker