Использование веб воркеров во VueJs

Как и большинство разработчиков, когда Веб Воркеры впервые появились в JavaScript, я был очень воодушевлён и наполнен энтузиазмом на создание невероятных вещей, благодаря ему. Однако, мой энтузиазм был быстро испепелён, когда я понял, что воркеры должны создаваться в отдельном файле, расположенном на веб-сервере. Это казалось огромной болью, которая не стоила усилий. И на какое-то время, я перестал использовать вебворкеры в проектах, находя им применения только в очень ограниченных задачах. До этого момента... Я натолкнулся на одно очень интересное решение, в лице библиотеки vue-worker, которая позволяет создавать, работать с веб воркерами из VueJs, имеет понятный API, и может выполнять код, не создавая отдельный файл воркера.

В прошлой статье по основам работы с веб воркерами я привел примеры нативного взаимодействия с ними. Советую ознакомиться с этой статьёй, после чего, перейти к изучению этой - работы с воркерами во VueJs, выполнение кода воркеров на лету, не создавая отдельный файл, работая с воркерами через промисы.

Ядро библиотеки vue-worker основано на другой библиотеке simple-web-worker этого же автора. Эта библиотека позволяет создать Веб Воркер на лету, передавая ему код выполнения, из которого он сформирует временный файл Data URI, с которымы, уже, сможет работать воркер.

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

Установка

// NPM
npm install vue-worker --save

// Yarn
yarn add vue-worker

Теперь, включим этот плагин во VueJs:

// src/main.js

import Vue from 'vue';
import VueWorker from 'vue-worker';
import App from 'App.vue';

Vue.use(VueWorker);

new Vue({
  el: '#app',
  render: h => h(App)
});

После чего, в любом вашем компоненте появилась возможность обращения к этой библиотеке this.$worker.

Вызов функции из воркера

Теперь же, внутри вашего компонента вы можете вызывать: this.$worker.run(function() {...}, args[]).

Этот код выполнит функцию, которая выведет Hello, World! из воркера, когда компонент будет смонтирован:

<script>
export default {
  mounted() {
    this.$worker.run((arg) => {
      return `Hello, ${arg}!`
    }, ['World'])
    .then(result => {
      console.log(result)
    })
    .catch(e => {
      console.error(e)
    })
  }
}
</script>

Переиспользуемые воркеры

Вы можете создать переиспользуемый воркер, вызвав this.$worker.create([{message, func}]), по типу того, как я показывал в прошлой статье, когда мы работали с ним нативно.

То есть, таким образом создаётся воркер, инстанс которого будет "висеть", к которому можно обращаться в любой момент. Ранее же, вызывая this.$worker.run мы только получали результат его работы. А при вызове this.$worker.create создаётся полноценный экземпляр объекта воркера, с которым вы можете работать и обращаться к одному и нему сколько угодно раз.

<script>
export default {
  data() {
    return {
      myWorker: null
    }
  },

  created() {
    this.myWorker = this.$worker.create([
      {message: 'message1', func: (arg) => `Output 1 ${arg}`},
      {message: 'message2', func: () => 'Output 2'}
    ])

    this.myWorker.postMessage('message1', ['Boop!'])
        .then(result => {
          console.log(result)
        })
  }
}
</script>

Ну вот и всё, этого достаточно для экскурса в использовании воркеров в VueJs, и демонстрации выполнения кода воркера как промис. Для более подробного изучения рекомендую обратиться к документации vue-worker и simple-worker.