워커 쓰레드 기본 가이드
워커 컴포넌트에서 생성한 워커 쓰리드가 실행한 스크립트 예시 화면이다.
워커 컴포넌트의 start API의 파라미터로 이 화면의 경로를 지정하여 사용한다.
개발편의를 위한 것으로 실제로는 화면의 js 파일만 사용된다.
예시
템플릿 위치: /HTML5/COMPONENT/WORKER/worker_thread_basic
템플릿 파일
화면 스크립트
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/** * 워커 컴포넌트를 통해서 실행되는 워커 쓰레드의 데이터 수신 이벤트 처리 함수 * 워커 컴포넌트의 postmessage API를 통해서 이벤트가 발생함 * * Worker 쓰레드 기능 * * Worker 쓰레드에서 호출가능한 기능/함수 * * Worker 쓰레드 스크립트에서는 window, factory, jQuery 라이브러리 사용이 불가하다. * * HTTP 통신을 위해서는 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();} |