워커 가이드

워커 컴포넌트에서 생성한 워커 쓰리드가 실행한 스크립트 예시 화면이다.

워커 컴포넌트의 start API의 파라미터로 이 화면의 경로를 지정하여 사용한다.

개발편의를 위한 것으로 실제로는 화면의 js 파일만 사용된다.

템플릿 위치: /HTML5/COMPONENT/WORKER/worker_thread_basic

템플릿 파일

/**
 * 워커 컴포넌트를 통해서 실행되는 워커 쓰레드의 데이터 수신 이벤트 처리 함수
 * 워커 컴포넌트의 postmessage API를 통해서 이벤트가 발생함
 *
 * Worker 쓰레드 기능
 * https://developer.mozilla.org/en-US/docs/Web/API/Worker
 *
 * Worker 쓰레드에서 호출가능한 기능/함수
 * https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
 *
 * Worker 쓰레드 스크립트에서는 window, factory, jQuery 라이브러리 사용이 불가하다.
 *
 * HTTP 통신을 위해서는 fetch API를 사용한다.
 * https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
 */
onmessage = function(event) {
	var recv_data, send_data;

	// 로그는 console.log API를 통해서만 가능하며(factory.consoleprint 사용 불가),
	// 로그 내용은 브라우저 개발자 콘솔에 표시됨
	console.log("WorkerThread> start");

	// this는 DedicatedWorkerGlobalScope 오브젝트 인스턴스
	console.log(this);

	// 워커 컴포넌트의 postmessage API를 통해서 전달된 데이터는 event.data에 전달됨
	recv_data = event.data;
	console.log("WorkerThread> Recv Data = [" + recv_data + "]");

	// 오브젝트 형태의 수신 데이터를 처리하기 위해서는
	// JSON.parse API를 사용하여 수신한 문자열을 오브젝트로 변환하여 사용한다.
	// recv_data = JSON.parse(event.data);

// 디버거 키워드 사용 가능
// debugger;

	// 스크립트내 정의된 함수를 호출하여 수신한 데이터를 처리
	send_data = WorkerDataFunc(recv_data);

	// 워커 컴포넌트의 on_message 이벤트로 데이터 전달
	// 오브젝트 데이터를 전달하기 위해서는 JSON.stringify API를 통해서
	// 문자열로 변환하여 전달해야 한다.
	// send_data = JSON.stringify(send_data);

	console.log("WorkerThread> Send Data = [" + send_data + "]");
	postMessage(send_data);
};

function WorkerDataFunc(data)
{
	console.log("WorkerDataFunc> start");
	return data.toUpperCase();
}

워커 쓰레드 기본 가이드

예시

화면 스크립트