web_workers.md

웹 워커

웹워커는 최근의 브라우저에서 메인스레드의 블로킹없이(역주:async로) 복잡한 테스크와 연산을 실행하고 좋은 방법입니다.

소켓스트림은 웹워커를 사용하기 편하게 하기 위해 (커피스크립트를 사용한다면)투과 컴파일(transparent compilation 역주: 최적화된 js로 변환해주는걸 프레임 워크에서 해준다는 이야기에요.), 자동코드압축, ss.client.packAssets()를 했다면 캐쉬를 제공합니다.

웹 워커에대한 좀더 자세한 정보를 보고싶으시면: html5rack의 웹워커 투토리얼을 읽으세요.

시작하기

웹워커는 /client/workers안에서 live합니다. 프레임워크에서는 이폴더를 만들지 않습니다. 필요하시면 만드세요.

각 워커는 반드시 독립된 .js 나 (ss-coffee모듈을 인스톨 했다면) .coffee로 작성되어야 합니다. 이 투토리얼에서는 자바스크립트를 사용하겠습니다.

기본 예제

Leibniz 방정식으로 파이를 계산하는 워커를 만들어 봅시다.

// /client/workers/pi.js 파일

self.addEventListener('message', function(e) {
  var cycles = e.data;
  postMessage("" + cycles + " 사이클로 파이를 계산 중");
  var numbers = calculatePi(cycles);
  postMessage("결과: " + numbers);
}, false);

function calculatePi(cycles) {
  var pi = 0;
  var n  = 1;
  for (var i=0; i <= cycles; i++) {
    pi = pi + (4/n) - (4 / (n+2));
    n  = n  + 4;
  }
  return pi;
}

그리고 클라이언트 코드 파일에서, 워커를 호출합니다.

// /client/code 밑의 아무파일에서나
var worker = ss.load.worker('/pi.js');

// 콘솔에 출력
worker.addEventListener('message', function(e) {
  console.log(e.data);
});

// 10000000 사이클로 워커를 시작
worker.postMessage(10000000);

조금 시간이 지나 테스크가 끝나면 브라우져 콘솔에서 다음 출력을 볼수있습니다:

10000000 사이클로 파이를 계산중
결과: 3.1415926485894077

사이클을 좀 더 준다던가 다른 메세지를 넘겨서 실험해보세요.