Web Worker のメインとワーカースレッドの共通処理

Web Worker で、メインスレッドとワーカースレッドの共通処理を実装する方法について紹介したいと思います。

実現方法

結論から先に書くと、importScripts を使います。

importScripts は、Workerスレッド内でスクリプトを同期的に読み込む機能になります。
この importScripts を使って、ワーカースレッド側で共通処理が書かれているスクリプトファイルを読み込めばOKです。

具体例

具体的な例を使って説明します。
詳細は、以下のサンプルソースを参照してください。

まず、スクリプトファイルの構成から説明します。
ファイルは3つから構成され、それぞれ以下のような役割になっています。
　・main.js ：メインの処理
　・worker.js ：ワーカースレッドの処理
　・common.js ：メインとワーカースレッドの両方で使う共通処理

今回のサンプルでは、メインとワーカースレッドから、common.js に実装されている共通処理「common_func」を呼び出しています。

サンプルソースを実行すると、結果として、コンソールに 20 と表示されますが、ざっくり説明すると、ロジックとしては以下のようになります。

　・メインスレッドから、 worker.postMessage(5) で呼び出す。
　・ワーカースレッドでは、common_func(e.data) を実行、その結果を返す。
　　→ common_func の処理は、「パラメタ x 2」を実行しているので、10（5×2）が返ってくる。
　・メインスレッドでは、ワーカースレッドからの「common_func(e.data)」を実行し、その結果をコンソールに出力する。
　　→ ワーカースレッドから 10が返ってきて、もう一度 common_func を実行するので、 20（10×2）となる。

全体イメージとしてはこんな感じです。

サンプルソース

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>共通処理</title>
        <script src="common.js" type="text/javascript"></script>
        <script src="main.js" type="text/javascript"></script>
    </head>
    <body>
    </body>
</html>

main.js

window.onload = function() {
  // Worker作成
  var worker = new Worker("worker.js");
  // 処理結果受信イベント設定
  worker.addEventListener(
    "message",
    function(e) {
      var result = common_func(e.data);
      console.log(result);
    },
    false
  );

  // workerへ処理依頼
  worker.postMessage(5);
};

worker.js

// 共通スクリプト読み込み
importScripts("common.js");

// メッセージ受信イベント設定
addEventListener("message", function(e) {
  // 共通処理呼び出し
  var result = common_func(e.data);
  // 結果メッセージ送信
  postMessage(result);
});

common.js

// 共通処理
function common_func(param) {
  return param * 2;
}

最後に

Web Workers API はメイン側に影響を与えず、バックグラウンドで重い処理を実行したい場合に便利です。
メインとワーカー側で共通な処理を実装したい場合の一例になりますので、必要があれば参考にしてください。

メニュー