티스토리 뷰

웹 워커(Web worker)는 자바스크립트 코드를 백그라운드에서 실행시킬 수 있게 해주는 HTML5의 표준 기능이다. 실행시간이 긴 계산 작업을 별도로 백그라운드에서 실행시켜 사용자 인터페이스를 원활하게 할 수 있다.

 

웹 워커 기능을 사용하려면, 자바스크립트 파일 형태로 만들어져야하며, 웹페이지와 동일한 웹사이트에 설치되어 있어야한다. 또한 로컬 컴퓨터에 있는 웹 페이지에서는 작동하지 않는다.

 

웹 워커 기능을 이용하여 만든 백그라운드 테스크를 워커 테스크라고 한다.


 

먼저 백그라운드에서 동작할 자바스크립트 코드를 만들어야 한다. 일반적으로는 실행속도가 오래걸리는 작업을 백그라운드에서 동작시키도록 하지만, 연습을 위해 demo_workers.js 라는 코드를 아래와 같이 생성하였다.

var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

 

다음은 웹 워커를 직접 동작시켜볼 수 있는 예제 코드이다. 

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;

function startWorker() {
  if (typeof(Worker) !== "undefined") {  // 브라우저가 웹 워커를 지원하는지 확인
    if (typeof(w) == "undefined") { //객체가 생성되어 있지 않은 경우
      w = new Worker("demo_workers.js"); // 워커 객체를 생성한다.
    }
    w.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else { // 웹워커 지원을 하지 않는 경우
    document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
  }
}

function stopWorker() { 
  w.terminate(); // 사용한 워커 객체는 terminate() 메소드를 이용해 종료한다.
  w = undefined; // 재사용을 위해 객체를 비워 놓는다.
}
</script>

</body>
</html>

메인 테스크와 워커 테스크 사이에서 postMessage() 메소드를 이용하여, 메세지를 전달할 수 있으며, 반대로 onmessage 는 워커 태스크로부터 발생한 message 이벤트를 받는 리스너다. 

 

추가로 오류가 발생할 때 받는 이벤트 리스너는 onerror를 사용한다. 

 


참고 : https://www.w3schools.com/html/html5_webworkers.asp

댓글
반응형
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함