Web Workers

Web Workers

• JavaScript 코드를 백그라운드에서 실행시키기 위한 기술
• UI(DOM)와 완전히 분리된 환경에서 동작
  - UI(DOM)를 실행하는 스레드와 별도의 환경에서 동작하기 때문에 변수를 공유 할 수 없음
  - 백그라운드에서 처리한 결과를 처리하거나, 워커에 데이터를 주고 받기 위해서 메이징 API를 이용
• 오랜 시간이 걸리는 계산 처리 등을 JavaScript로 수행할 시 사용자가 UI 조작을 할 수 없고, 브라우저가 얼어버리는 문제를 해결하기 위한 장치
• 워커는 목적에 따라 사용할 수 있는 두 가지 워커가 규정되어있다.
  - 워커 객체와 백그라운드 프로세스가 일대일로 대응하는 모델
  - 여러 개의 객체가 하나의 백그라운드 프로세스를 공유하는 모델

워커생성, 메시지 보내고 받기

• 워커 생성
  - 워커를 생성하려면 워커의 소스코드가 되는 js파일의 url을 인수로 전달하여 Worker 객체를 생성
  - var worker = new Worker(“worker.js”);
• 워커에 대한 메시지 보내고 받기
  - 워커와 변수를 서로 공유할 수 없으므로 메시징 기능을 사용
  - Worker.postMessage(“Hello Vizooo”);
  - onmessage = function(event) { // 메시지 처리 수행 };
•  
워커로부터 메시지 보내고 받기

- postMessage(“Hello Vizooo”);

- onmessage = function(event) { // 메시지 처리 수행 };

Worker 객체의 메서드

• onerror
  - 에러를 포착하기 위한 이벤트 핸들러
• terminate()
  - 워커를 강제로 종료함
• postMessage()
  - 워커에 메시지를 보냄
• onmessage
  - 메시지를 포착하기 위한 이벤트 핸들러

WebWorkers.html

<script>
    var worker;
    // 페이지가 로드 된후
    window.onload = function() {
        // 워커 객체를 생성
        worker = new Worker("workers.js");
        // 워커로 start 메시지 전송
        worker.postMessage("start");
        // 워커로 부터 메시지가 들어오면
        worker.onmessage = function(event) {
            document.getElementById("timer").innerHTML = event.data;
        }
    }
     
    // stop 버튼을 클릭하면 워커로 end 메시지 전송
    Stop = function() {
        worker.postMessage("end");
    }
</script>
<h1>Web Workers</h1>
<div id="timer"></div>
<input type="button" value="stop" onclick="Stop()">

workers.js

var timer = 0;
 
// 메시지가 들어오면
onmessage = function(event) {
    if(event.data == "start") {
        // 메시지가 start 이면 1초 단위로 timer 값을 1씩 증가
        var timeOut = setInterval(function() {
            timer++;
        }, 1000);
    } else {
        // 메시지가 start가 아니면 timer 값을 워커로 보냄
        postMessage(timer);
    }
}

 

 

 

안드로이드 게임들(Android games)