6.4 웹 워커

6.4 웹 워커(Web Worker)

6.4.1 웹 워커란?

가. 정의

백그라운드에서 별도의 thread를 생성하여
별도의 thread로 동작함
single thread의 한계를 극복

나. 단점

• 하위 브라우저에서 호환성이 떨어짐
  ===> 대중적 사용 불가능

다. 특징

• 별도의 thread로 동작하므로 직접 DOM에 접근하지 못함
  ===> postMessage(), onmessage() 를 통해 접근 가능

6.4.2 웹 워커 interface

postMessage()	onmessage()	worker.terminate();
데이터 전송	데이터 수신	종료

postMessage()를 통하여 HTML5와 Worker사이에 데이터를 전송 할 수 있으며,
onmessage()를 통하여 HTML5와 Worker사이에 데이터를 받을 수 있다.

6.4.3 dedicated Worker 사용법

가. 특징 :

worker을 생성한 스크립트에서만 접근 가능

나. 예제 :

<select id="selectBox">
  <option>-- SELECT --</option>
  <option>selectBoxValue</option>
</select>
<script>
  (function () {
    var selectWorker = document.getElementById("selectBox");
    var worker = new Worker("/test/resources/js/worker.js");

    selectWorker.addEventListener("change", function () {
      console.log("### debug 1");
      worker.postMessage(this.value);
     });

    worker.onmessage = function (msg) {
      console.log("### debug 3" + msg.data);
    }
  }());
</script>

//Worker Source
(function () {
    onmessage = function (value) {
    	console.log("### debug 2 "+value.data);
        postMessage(`workerValue`);
    }
}());

다. 결과

6.6.4 shared Worker

가. 특징 :

여러개의 브라우저 스크립트에서 접근 가능

<select id="selectBox">
  <option>-- SELECT --</option>
  <option>selectBoxValue</option>
  <option>getConnection</option>
</select>
<script>
  (function () {
    var sharedWorker = new SharedWorker("/test/resources/js/sharedWorker.js"),
        selectWorker = document.getElementById("selectBox");

    sharedWorker.port.start();

    selectWorker.addEventListener("change", function () {
      console.log("Main thread: sending message - " + this.value);
      sharedWorker.port.postMessage(this.value);
    });

    sharedWorker.port.onmessage = function (msg) {
      console.log("Main thread: " + msg.data);
    }
  }());
</script>

(function () {
    var connection = 0;
    onconnect = function (e) {
        var port = e.ports[0]; connection++;
        port.onmessage = function (e) {
        	port.postMessage(`${connection} connections are connected`);
        };
        port.start();
    };
}());