[HTML5] WebWorkerで並列処理を行う

この記事は 2020年8月22日 に書かれたものです

前回はWebWorkerの中でも最もシンプルに並列処理を扱うことができる「専用ワーカー (Dedicated Worker)」について取り上げました。今回はiframeや他のウィンドウ(タブ)などから起動中のWorkerを利用することのできる「共有ワーカー(Shared Worker)」について取り上げます。

ページが違えど処理は共通と言った場合に利用すれば、クライアントのリソースの消費を抑えることが可能です。

1 共有ワーカーの基本的な原理
- 1.1 イメージ
- 1.2 プロセスの状態
2 ブラウザの対応状況
3 使い方
- 3.1 メインスレッド側の処理
- 3.2 Worker側の処理
4 [例] 文字の順番を反転するWebWorker^2
- 4.1 実行例
- 4.2 ソースコード
5 戻る
6 参考ページ

共有ワーカーの基本的な原理

イメージ

途中までは専用ワーカーと同様ですが、作成したWokerは他のスレッドからも利用することが可能です。

プロセスの状態

GoogleChromeでは以下のように「ハンバーガーメニュー」から「その他のツール」→「タスクマネージャー」とたどることでChromeが実行している全てのプロセスの一覧を確認できます。

ここでは共有ワーカーを利用するタブを3つほど開いてみました。最初にWorkerを起動したタブの中にスレッドが作成されこれを他のタブから利用する作りのようです。

ちなみに最初のタブを閉じた場合どうなるかと言うと、タブその物のプロセスは終了しますがWorkerだけ裏側で生き残り続けるようです。

共有ワーカーを利用しているタブをすべて閉じるとWorkerも自動的に終了します。

※これはあくまでGoogleChromeの実装です。ブラウザによっては異なる動きを裏側している可能性があります。

ブラウザの対応状況

執筆時点での「Shared Worker」の各ブラウザの対応状況はご覧の通りです。

※Can I useより

スマホでよく利用されているブラウザは未対応、PCもIEは当然としてSafariも未対応となっています。Safariのやる気がないのは今に始まったことではないので、生暖かい目で見守って上げてください。

いやー、やる気なくなりましたねｗブラウザに制約がかけられない場合、当面は専用ワーカーで凌ぐしかないですね。

使い方

解説は専用ワーカーとの違いを中心に書いていきます。

メインスレッド側の処理

共有ワーカーを利用する際のコードは以下の通りです。

// Workerの作成と開始
const myWorker = new SharedWorker("worker.js");
myWorker.port.start();

// Workerへメッセージを送信
myWorker.port.postMessage("Hello MyWebWorker");

// Workerからのメッセージを受信
myWorker.port.addEventListener("message", (e)=>{
  const param = e.data;    // Workerからの引数を受け取る
});

専用ワーカーとの違いはそれほど多くありません。具体的には以下の3つです。

インスタンスを生成する際に SharedWorker を用いる
インスタンス作成後に start()メソッドを実行する
メッセージを送る/受け取る場合は port を挟む

共有ワーカーは接続してくるプロセスを区別するために「ポート」を利用しているというわけです。

Worker側の処理

Worker側のコードは専用ワーカーと比べて少し仕事が増えています。

/*
 * worker.js
 */

// メインスレッドが接続
self.addEventListener("connect", (e) => {
  const port = e.ports[0];

  // メインスレッドからのメッセージを受信
  port.addEventListener("message", (e)=>{
    const param = e.data;  // これでメインスレッドからの情報を受け取れる

    //----------------------------------
    // このあたりにWorkerにさせたい処理を書く
    // (途中経過のメッセージを送信するのもあり)
    //----------------------------------

    // メインスレッドへメッセージを送信
    port.postMessage("Nice to meet you");
  })

  // スレッドの処理を開始
  port.start();
});

サーバのようにプロセスが「接続」してくることを考慮する必要があるため、最初に行うのはconnectイベントを拾うことです。接続したあとはメッセージを受け取ったのをトリガーとして処理を記述できますが、このときのイベントはportに対して紐付ける必要があります。最後にメインスレッドと同様にこちらもstart()しておく必要があります。

[例] 文字の順番を反転するWebWorker^2

前回のサンプルを応用した物です。複数のタブやウィンドウで実行し、ブラウザ(Chrome)のタスクマネージャーなどで動きを観察してみてください。

実行例

以下から実際に試すことができます。

WebWorker Sample2a

https://miku3.net/html5/webworker2/

miku3.net

次の2つのページを同時にiframeで読み込んでいます。
1. テキストボックスに文字を入力する度に、順番が反転した文字が下部に表示される
2. ラジオボタンを選択する度に、固定文が反転して下部に表示される
文字を反転する処理を上記の2つとも同じスレッド(SharedWorker)で実行しています。

ソースコード

index.html

このファイルはiframeで2つのファイルを呼んでいるだけです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>WebWorker Sample2a</title>
</head>
<body>

<h1>WebWorker Sample2</h1>

<iframe src="frame1.html" width="350" height="180"></iframe>
<iframe src="frame2.html" width="350" height="180"></iframe>

</body>
</html>

frame1.html

こっちは前回のサンプルと同じ動作をしてくれます。そのHTML部分。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>WebWorker Sample2a</title>
  <style>
    h1{font-size:14pt;}
    #serif { padding:5px; margin:5px; width:250px; font-size:14pt; }
    #response { margin:5px; font-size:14pt; color:Red}
  </style>
</head>
<body>

<h1>自由文を反転する</h1>

<form id="frm-reverse">
  <input type="text" id="serif" placeholder="文字を入力してください">
  <div id="response">
    <small style="color:gray">ここに反転した文字が表示されます</small>
  </div>
</form>

<script src="app1.js"></script>
<script>
document.querySelector("#frm-reverse").addEventListener("submit", e=>e.preventDefault());
</script>

</body>
</html>

frame2.html

前回のサンプルは自由文が入力できましたが、こちらは固定文を反転する仕様です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>WebWorker Sample2b</title>
  <style>
    h1{ font-size:14pt; }
    label { cursor: pointer; border-bottom: 1px solid gray;}
    #serif { padding:5px; margin:5px; width:250px; font-size:14pt; }
    #response { margin:5px; font-size:14pt; color:Red}
  </style>
</head>
<body>

<h1>固定文を反転する</h1>

<form>
  <input type="radio" id="serif1" name="serif" value="Apple"><label for="serif1">Apple</label>
  <input type="radio" id="serif2" name="serif" value="Banana"><label for="serif2">Banana</label>
  <input type="radio" id="serif3" name="serif" value="Orange"><label for="serif3">Orange</label>

  <div id="response">
    <small style="color:gray">ここに反転した文字が表示されます</small>
  </div>
</form>

<script src="app2.js"></script>

</body>
</html>

app1.js

自由文を反転するメインスレッドのJavaScriptです。

const serif = document.querySelector("#serif");
const response = document.querySelector("#response");

/*
 * [イベント] ページの読み込みが完了
 */
window.onload = ()=>{
  // WebWorkerの対応チェック
  if ( ! window.SharedWorker ) {
    alert("SharedWorkerに対応していないブラウザです");
    return(false);
  }

  // WebWorker用の処理をスタート
  startWorker();
}


/**
 * WebWorker用の処理を実行
 *
 * @param {void}
 * @return {void}
 */
function startWorker(){
  // スレッド作成
  const myWorker = new SharedWorker("worker.js");
  myWorker.port.start();

  // テキストボックスに入力されたら
  serif.addEventListener("keyup", (e)=>{
    myWorker.port.postMessage(serif.value);    // Workerにメッセージを送信
  });

  // Workerからのメッセージを受信
  myWorker.port.addEventListener("message", (e)=>{
    response.textContent = e.data;
  });
  // Workerのエラー処理
  myWorker.port.addEventListener("error", (e)=>{
    console.error(`[myWorker] ${e.message}`);
  });

  serif.focus();
}

app2.js

固定文を反転するメインスレッドのJavaScriptです。

const serif = document.querySelectorAll("input[type='radio'][name='serif']");
const response = document.querySelector("#response");

/*
 * [イベント] ページの読み込みが完了
 */
window.onload = ()=>{
  // WebWorkerの対応チェック
  if ( ! window.SharedWorker ) {
    alert("SharedWorkerに対応していないブラウザです");
    return(false);
  }

  // WebWorker用の処理をスタート
  startWorker();
}


/**
 * WebWorker用の処理を実行
 *
 * @param {void}
 * @return {void}
 */
function startWorker(){
  // スレッド作成
  const myWorker = new SharedWorker("worker.js");
  myWorker.port.start();

  // ラジオボタンが入力されたら
  for(let i=0; i<serif.length; i++){
    serif[i].addEventListener("change", (e)=>{
      const value = serif[i].getAttribute("value");
      myWorker.port.postMessage(value);      // Workerにメッセージを送信
    });
  }

  // Workerからのメッセージを受信
  myWorker.port.addEventListener("message", (e)=>{
    response.textContent = e.data;
  });
  // Workerのエラー処理
  myWorker.port.addEventListener("error", (e)=>{
    console.error(`[myWorker] ${e.message}`);
  });
}

worker.js

こちらが共有ワーカーの本体です。app1.jsとapp2.jsから利用されます。

/*
 * メインスレッドからメッセージ受信
 */
self.addEventListener("connect", (e) => {
  const port = e.ports[0];

  port.addEventListener("message", (e)=>{
    const param = e.data;

    // メインスレッドにメッセージを返す
    port.postMessage(param.split("").reverse().join(""));
  })

  port.start();
});

戻る

[HTML5] WebWorkerで並列処理を行う - 専用ワーカー編

https://blog.katsubemakito.net/html5/webworker1

JavaScriptは非同期処理だから、複数同時に処理してるんでしょ？……と思っていた時期がありましたｗ JavaScriptの非同期処理とは時間のかかる処理の待ち時間で他のことをやってしまおうという物で、雑に言うなら実行する順番をコントロールする仕組みのことです。つまり並列処理とは異なる物。本来の意味での並列処理を実装するための機能はWebWorkerで実装することができます。シンプルな仕様にまとめられているため簡単にJavaScriptでも並列処理を実現できます。WebWorkerにはいくつか種類があるのですが、今回は「専用ワーカー(Dedic...

ねこの足跡R

参考ページ

コメント欄は休止中です。お問い合わせはこちらからどうぞ。ご質問はTwitterにリプを投げてください。

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま

- Sponsored Link -

[HTML5] WebWorkerで並列処理を行う – 共有ワーカー編

共有ワーカーの基本的な原理

イメージ

プロセスの状態

ブラウザの対応状況

使い方

メインスレッド側の処理

Worker側の処理

[例] 文字の順番を反転するWebWorker^2

実行例

ソースコード

index.html

frame1.html

frame2.html

app1.js

app2.js

worker.js

戻る

参考ページ

コメント

同じカテゴリの記事

ブログ内を検索

Languages (Google translation)

Sponsored Link

カテゴリー

Sponsored Link

最近人気のあるページ

Sponsored Link

Twitter

feed

Sponsored Link

共有ワーカーの基本的な原理

イメージ

プロセスの状態

ブラウザの対応状況

使い方

メインスレッド側の処理

Worker側の処理

[例] 文字の順番を反転するWebWorker^2

実行例

ソースコード

index.html

frame1.html

frame2.html

app1.js

app2.js

worker.js

戻る

参考ページ

コメント

関連した記事

同じカテゴリの記事

ブログ内を検索

Languages (Google translation)

Sponsored Link

カテゴリー

Sponsored Link

最近人気のあるページ

Sponsored Link

Twitter

feed

Sponsored Link