WebWorker #JavaScript

WebWorkerのお勉強。

まずは最小限のコードでWebWorkerを動かしてみる。
任意のデータをワーカーに渡して、オウム返しして表示するだけ。

メインスレッド

const worker = new Worker('worker.js')
worker.onmessage = event => console.dir(event.data)
worker.postMessage([1,2,3])

worker.js

onmessage = event => postMessage(event.data)

インラインworker

worker.jsが外部ファイルなのが気に入らない場合は、内部化できる。

クラスを文字列化し、それをBlob・URL化すれば、worker.jsの代わりになる。
クラスは、ワーカーのコンテキストで動作することに注意すれば普通に書ける。

ワーカーは非同期処理なので、プロミス化するのが好手。
データはクラスのコンストラクタに渡され、コンストラクタの戻り値がプロミスの値となる。

これら一連の処理を関数化したのが、次の関数である。

使い方

const workerが返す値 = await inlineWorker(worker化するクラス, workerに渡すデータ)

function inlineWorker(fn, data){
    const code = `onmessage = event => postMessage(new ${fn.toString()}(event.data))`
    const blob = new Blob([code], {type: 'text/javascript'})
    const url  = URL.createObjectURL(blob)

    function async(ok, ng){
        const worker = new Worker(url)
        worker.onmessage = event => ok(event.data)
        worker.onerror   = event => ng(event)
        worker.postMessage(data)
    }
    return new Promise(async)
}