Использование веб воркеров во 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.