Web Workerのメモ #JavaScript

Web Workerを少し勉強したので、そのメモ。

Web Workerって？

WebWorkerは並列処理を実現する機能。

使い方

ワーカー（サブスレッド）で実行したい処理を別コードで用意する。
メインスレッド側でWorkerオブジェクトをインスタンス化。

とりあえず書いてみる

echo-back-server的なワーカーを作ってみる。
ワーカーはメインスレッドからメッセージを受け取り、返答を返す。
echo-back-serverと言ったが、メッセージのオウム返しではなく、ACKという文字列を返すようにする。

worker.js


self.addEventListener('message', function(e){
  let resp = 'say hello!';
  if (e.data.msg == 'hello'){
    resp = 'ACK';
  }
  postMessage(resp);
});

上で書いたワーカーを実験するためにメインスレッド側のコード。

index.html


<!DOCTYPE html>
<html>
  <head>
    <title>webworker test</title>
     <script src="./workerclient.js"></script>
  </head>
  <body>
    <form>
      msg: <input id="msg", value="hello">
      <input id="btn", type="button", value="send"/>
      <span id="msgbox"></span>
    </form>
  </body>
</html>

workerclient.js


document.addEventListener('DOMContentLoaded', function(){

  document.getElementById('btn').addEventListener('click', function(){
    let worker = new Worker('worker.js');

    worker.postMessage({
      msg: document.getElementById('msg').value
    });

    worker.addEventListener('message', function(e){
      document.getElementById('msgbox').textContent = e.data;
    }, false);

    worker.addEventListener('eroor', function(e){
      document.getElementById('msgbox').textContent = e.data;
    }, false);

  },false);

},false);