웹 워커

웹 워커

 

스레드

스레드는 하나의 프로그램 내에서의 실행 단위를 나타내고, 일반적인 프로그램들은 멀티 스레드를 지원하므로 하나의 프로그램에서 동시에 여러 기능이 이루어질 수 있습니다.

멀티 태스킹(MultiTasking)

운영체제는 CPU의 시간을 쪼개어 각각의 프로그램에 할당하여 동시에 실행하는 것처럼 보이게 하는 것을 멀티 태스킹(MultiTasking)이라고 합니다.

멀티 스레드(MultiThread)

하나의 프로그램 내에서 여러 개의 기능이 동시에 이루어지는 것을 멀티 스레드(MultiThread)라고 합니다.

웹 워커

웹 워커는 메인에서 동작하는 UI 스레드와는 별개로 백그라운드에서 여러 개의 워커들이 각각의 기능을 하며 처리 동작을 하고 있는 형태로 이루어져 있습니다.

워커를 생성하기 위해서는 메인 UI 페이지에서 워커 역할을 하는 자바스크립트를 호출하여 워커의 인터페이스 생성자를 호출하면 됩니다.

 

형식

var  변수 = new  Worker(자바스크립트 파일명);

예제

// 브라우저에서 웹 워커를 지원하는지 여부를 판단함 if (window.Worker) {    // 워커 생성    var  worker = new  Worker("calc.js"); }

 

워커 생성 및 메시지

워커에서 생성한 함수나 변수는 외부에서 호출이 불가능하므로, 워커에서 작업한 내용을 메인 UI 스레드에서 알기 위해서는 메시지를 주고받아야 합니다.

메시지를 주고받기 위해서는 postMessage( ) 메서드와 onmessage 이벤트 핸들러를 사용합니다.

postMessage() 메서드는 데이터를 보내기 위해 사용하는 것이고, onmessage 이벤트 핸들러는 postMessage() 메서드에 담겨 온 데이터를 수신하기 위해 사용합니다.

 

메시지 전달

메인 스레드에서 생성한 워커에 “data”라는 문자열을 postMessage( ) 메서드로 보내는 경우를 의미합니다.

 

예제

if (window.Worker) {    var  worker = new  Worker("calc.js");    worker.postMessage("data");      // 데이터 전달 }

워커에서 postMessage( ) 메서드를 사용할 때 전역으로 호출하면 자동으로 워커를 생성한 곳으로 메시지를 전달합니다.

워커에서 처리 결과인 “result” 문자열을 메인 UI로 메시지를 전달합니다.

 

예제

// postMessage( ) 메서드로 전달한 데이터를 수신함 onmessage = function(event) {      // 메시지를 처리함      ......     // 메인 UI 스레드로 데이터를 전달함     postMessage("result"); }

메시지 수신

메인 UI 스레드에서 워커로 보낸 데이터를 워커에서 받기 위해서는 onmessage 이벤트 핸들러를 사용합니다.

 

예제

// postMessage( ) 메서드로 전달한 데이터를 수신함 onmessage = function(event) {            // 메시지를 처리함 };

메인 UI 스레드에서는 메시지 수신받을 대상 워커의 객체에 대해 onmessage 핸들러를 지정하여 처리합니다.

 

예제

var  worker = new  Worker("calc.js")' worker.onmessage = function(event) {         // 메시지를 처리함 }

 

워커 종료

워커에서의 작업이 종료되어 더 이상 메시지를 주고 받을 일이 없다면 워커를 종료해야 합니다.

워커를 종료할 때는 객체에 대하여 terminate( ) 메서드를 호출합니다.

 

예제

var  worker = new  Worker("calc.js"); // 워커를 종료함 worker.terminate( );

 

웹 워커 실습 프로그램