Как правильно работать с воркерами в js?

Question

[SvinkaBacilka]

Работаю с веб воркерами и столкнулся с такой проблемой:

• Данные не попадают в воркер через worker.postMessage(someData)
  
• Несмотря на многие примеры в интернете я не могу вызвать console.log('text') в воркере
  
• Как это дебажить??? Мало того что консоль не отработывает так после изменения файла воркера вебпак не подтягивает его и работает со старым
  

Буду очень благодарен за подробное описание этой технологии и как с ней работать.
P. S. Устал читать статьи с одним и тем же примером из документации и о том как это стильно, можно, молодёжно и основной поток не блокирует.

Конфиг vue.config.js

configureWebpack: process.env.NODE_ENV === 'development'
    ? {
      module: {
        rules: [
          {
            test: /\.worker\.js$/,
            use: {
              loader: 'worker-loader',
              options: {
                inline: true
              }
            }
          }
        ]
      }
    }
    : {},

Код воркера

self.addEventListener('message', event => {
  const data = event.data;
  switch (data.cmd) {
    case 'getInfo':
      // eslint-disable-next-line no-case-declarations
      const info = fetchInfo(data.token);
      self.postMessage(info);
      break;
    default:
      throw 'Unknown command'
  }
});

Код создания воркера

import Worker from './custom.worker.js'

const worker = new Worker();
      worker.postMessage({
        cmd: 'getInfo',
        data: {
          token
        },
      })

Comments

[Kovalsky]

Если у вас не работает postMessage, то это значит что сообщение об ошибке в какую-то консоль точно выводится. Либо скорее всего вы в коде воркера просто никак не обрабатываете сообщение. Либо консоль фильтруете. Вариантов много

[Игорь]

Буду очень благодарен за подробное описание этой технологии и как с ней работать.

Буду благодарен если вы покажите код который работает не так как ожидается

[SvinkaBacilka]

Kovalsky, loonny,
Конфиг vue.config.js:

configureWebpack: process.env.NODE_ENV === 'development'
    ? {
      module: {
        rules: [
          {
            test: /\.worker\.js$/,
            use: {
              loader: 'worker-loader',
              options: {
                inline: true
              }
            }
          }
        ]
      }
    }
    : {},

Код воркера:

self.addEventListener('message', event => {
  const data = event.data;
  switch (data.cmd) {
    case 'getInfo':
      // eslint-disable-next-line no-case-declarations
      const info = fetchInfo(data.token);
      self.postMessage(info);
      break;
    default:
      throw 'Unknown command'
  }
});

Код создания воркера:

import Worker from './custom.worker.js'

const worker = new Worker();
      worker.postMessage({
        cmd: 'getInfo',
        data: {
          token
        },
      })

[Игорь]

SvinkaBacilka, Так, либо я что-то путаю, либо вы воркер не правильно создаете. Дайте мне пару минут, сам попробую (спишем это на позднее время)

[Игорь]

SvinkaBacilka, У меня webStorm не запускается. Создавайте воркер так, без импорта

const worker = new Worker('./custom.worker.js');
      worker.postMessage({
        cmd: 'getInfo',
        data: {
          token
        },
      })

Answer 1

[Игорь]

UDP:
Для работы с воркерами, установите "worker-loader".
Когда вы воркер импортируете нужно указать "worker-loader!" как префикс пути. Вот пример, смотрите:

import Worker from 'worker-loader!./custom-worker.js'

Comments

[SvinkaBacilka]

Без импорта я получаю ошибку: Uncaught SyntaxError: Unexpected token '<'
Воркер пытается загрузить html файл
Согласно документации webpack нам нужно импортировать эти файлы

[Игорь]

SvinkaBacilka, очевидно в этой области у меня есть пробелы. Сейчас я потыкаюсь и дам решение.

[SvinkaBacilka]

loonny, может быть такое что код воркера нужно оформить как модуль и экспортировать необходимые лисенеры?
Или же использовать какой-то плагин по типу этого , но в документации и всевозможных статьях ни слова об этом

[Игорь]

SvinkaBacilka, У меня пока кровавый бой с webStrom(работать не хочет)

[Игорь]

SvinkaBacilka, Я похоже очень не внимательный. Вы с VUE CLI работаете?

[SvinkaBacilka]

loonny, Да с VUE CLI
webStrom лицензию просит?

[Игорь]

SvinkaBacilka, Та не, у меня можно сказать пожизненная) (не крякал, все законнаааа!) Просто вылетает почему то. Я уже VS Code установил, щас буду тыкаться-мыкаться

[Игорь]

SvinkaBacilka, все я разорался в чем дело было. Смотрите, что бы использовать воркер нужен worker-loader, его надо установить. И когда вы воркер импортируете нужно указать "worker-loader!" как префикс пути. Вот пример, смотрите:

import Worker from 'worker-loader!./custom-worker.js'

[Игорь]

SvinkaBacilka, Как я и говорил, я очень не внимательный) сорри)

[SvinkaBacilka]

Игорь, ошибка исчезла, но теперь мой воркер ничего не делает в ответ на postMessage)
Ошибка где-то у меня, как настрою его отпишусь тут, скорее всего это и есть решение)

[Игорь]

SvinkaBacilka, Ошибка в том что не data.token, а data.data.token
И в этом месте:

worker.postMessage({
  cmd: 'getInfo',
  data: {
    token: 'dfg789df78gdf9d'  //Вы забыли токен присвоить
  },
})

Внимательнее)

[SvinkaBacilka]

Игорь, Этот кусок я уже удалил, хочу сначала просто в консоль писать с воркера
пойму как это работает а там уже буду функции вызывать)

[Игорь]

Console.log из воркера, выводит в консоль.

[SvinkaBacilka]

Игорь, можно пример вашего кода и конфига vue
я чувствую что делаю очень тупую ошибку, но не знаю где

[Игорь]

SvinkaBacilka, Лучше скиньте свой код, я исправлю и добавлю комменты объясняющие

[Игорь]

SvinkaBacilka, Архивом весь проект

[Игорь]

SvinkaBacilka, В вк мне, если удобнее будет

[SvinkaBacilka]

Игорь, давайте на почту, нам отключили вк в Украине)

[Игорь]

SvinkaBacilka, звери)

[Игорь]

SvinkaBacilka , Может телега лучше тогда?

[Игорь]

SvinkaBacilka , Не хочу почту светить

[Игорь]

SvinkaBacilka, Ну.. Вы же мне скидывать будете код, а мой логин в профиле) Ну ок, я напишу чтоб вам удобнее было, мне не сложно