JavaScript Worker.onmessage — отримати результат від робітника

Обробник onmessage спрацьовує, коли робітник надіслав дані назад.

правити

Загальний опис

Дані лежать у event.data — не в самому event. Це друга за поширеністю помилка після забутого postMessage.

Один канал, багато задач — тому в реальному коді всередину повідомлення кладуть тип, а обробник розгалужується по ньому. Інакше відповіді на різні запити переплутаються.

Замість onmessage можна писати addEventListener('message', ...) — тоді обробників може бути кілька.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
onmessage	4+	3.5+	4+	11.5+	12+	10+

Підтримка: мобільні переглядачі

Переглядач
onmessage	4.4+	yes	yes	5+

Приклади

+ запропонувати свій приклад у пісочниці

const worker = new Worker('/worker.js');

worker.onmessage = event => {
    // дані в event.data, не в event!
    const { type, payload } = event.data;

    switch (type) {
        case 'progress':
            bar.value = payload;
            break;

        case 'done':
            console.log('Результат:', payload);
            worker.terminate();
            break;

        case 'error':
            console.error(payload);
            break;
    }
};

worker.postMessage({ type: 'start', size: 1e8 });