70. (javascript/자바스크립트) web worker 웹 워커 사용해 비동기 백그라운드 작업 수행 - postMessage, onmessage

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다
    	2. web worker : 스크립트가 웹 페이지의 성능에 영향을 미치지 않도록 백그라운드에서 동작하게 해주는 것입니다
    	3. web worker는 스크립트의 다중 스레드(multi-thread)를 지원합니다
    	4. web worker는 사용자가 웹 페이지를 이용하면서, 동시에 시간이 오래 걸리는 자바스크립트 작업도 병행할 수 있도록 해줍니다    	
    	*/
   	
    	


    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log("");


    		// [워커 매니저 실행 실시]
    		startWorker();
    	};




    	/* 사전 워커 매니저 로직 함수 정의 실시 */
    	const runData = function workerRun(){
    		// 카운트 수행 변수
    		var count = 0;

    		// 메시지 수신
    		self.onmessage = function(e) {
    			loop();
    		}

    		// 호출한 페이지에 1씩 증가시킨 count 값을 1초마다 전달
    		function loop() {
    			// 1씩 증가시켜서 전달
    			postMessage( ++count );

    			// 1초뒤에 다시 실행
    			setTimeout(function() {
    				loop(); //내부 함수 반복 호출
    			}, 1000);
    		}
    	};
    	



    	/* [워커 매니저 사용 변수] */
    	var webworker;




    	/* [워커 매니저 수행 함수] */
    	function startWorker(){
    		// web worker 지원 여부 확인 
    		if (typeof(Worker) !== "undefined" && typeof(Worker) != null) {
    			console.log("");
    			console.log("[startWorker] : [web worker] : [supported]"); 
    			console.log("");


    			// 워커 매니저가 실행 중인 경우 우선, 정지 후 재실행
    			if(typeof(webworker) != "undefined"){
    				console.log("");
    				console.log("[startWorker] : [web worker] : [is running]"); 
    				console.log("");


    				// 워커매니저 종료 함수 호출
    				stopWorker();


    				// main 본인 재호출 실시
    				startWorker();
    			}
    			else {
    				console.log("");
    				console.log("[startWorker] : [web worker] : [start running]");     				
    				console.log("");


    				var startIdx = String(runData).indexOf("{");
    				var endIdx = String(runData).lastIndexOf("}");
    				var workerCode = String(runData).substring(startIdx+1, endIdx);
    				/*console.log("");
    				console.log("[startWorker] : [web worker] : [code]"); 
    				console.log("data : " + workerCode);     				
    				console.log("");*/


    				// worker.js 백그라운드 작업 스크립트 매핑 실시
    				// var loader = "../WebProject/js/worker.js"; //서버 환경
    				var loader = "data:application/x-javascript;base64,"; //로컬 html 환경
    				var base64DataEncode = btoa(unescape(encodeURIComponent(workerCode))); //base64 인코딩 수행 				
    				loader = loader + base64DataEncode; //base64 인코딩된 전체 코드 들어가야합니다
    				console.log("");
    				console.log("[startWorker] : [web worker] : [base64]"); 
    				console.log("base64 : " + base64DataEncode);
    				console.log("");
    				

    				// 비동기 백그라운드 작업 실행
    				webworker = new Worker(loader);
    				webworker.postMessage("start worker"); // 워커에 메시지를 보냅니다


    				// 워커로 부터 메시지를 수신합니다
    				webworker.onmessage = function(e) {
    					console.log("");
    					console.log("[startWorker] : [web worker] : [response]"); 
    					console.log("[DATA] : " + e.data); 
    					console.log("");

    					var count = e.data;
    					if(count >= 5){ //카운트 값이 5가되면 자동 종료
    						stopWorker();
    					}
    				};
    			}
    		}
    		else {
    			console.log("");
    			console.log("[startWorker] : [web worker] : [not supported]"); 
    			console.log("");
    		}

    	};





    	/* [워커 매니저 종료 함수] */
    	function stopWorker(){    		
    		// web worker 지원 여부 확인 
    		if (typeof(Worker) !== "undefined" && typeof(Worker) != null) {  
    			// 워커 매니저가 실행 중인 경우 정지
    			if(typeof(webworker) != "undefined"){
    				console.log("");
    				console.log("[stopWorker] : [web worker] : [stop running]"); 
    				console.log("");


    				webworker.terminate();
    				webworker = undefined;
    				//webworker = null;    				
    			}
    		}
    		else {
    			console.log("");
    			console.log("[stopWorker] : [web worker] : [not supported]"); 
    			console.log("");
    		}
    	};
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다

2. web worker : 스크립트가 웹 페이지의 성능에 영향을 미치지 않도록 백그라운드에서 동작하게 해주는 것입니다

3. web worker는 스크립트의 다중 스레드(multi-thread)를 지원합니다

4. web worker는 사용자가 웹 페이지를 이용하면서, 동시에 시간이 오래 걸리는 자바스크립트 작업도 병행할 수 있도록 해줍니다

*/

/* =========================== */

​