javascript의 백그라운드 실행(멀티스레드)을 가능하게 해 주는 web worker 샘플 코드

By | 5월 6, 2021

메인 페이지의 js

/**
 * Web Worker 인스턴스 생성 및 호출 
 */
if (!! window.Worker) {

    var worker = new Worker('../resources/js/workerSample.js'); // 현재 페이지의 브라우저 URL에 대한 '상대경로'로 작성해야만 한다.
    // console.log('## worker:['+ JSON.stringify(worker) +']');

    // worker가 준 메시지에 대한 이벤트 핸들러
    worker.onmessage = function(e) {
        onWorkerResponse(e.data);
        worker.terminate(); // 최초 1회만 실행 후 제거
    }
    // error handler
    worker.onerror = function(e) {
        console.log(e.filename + "파일의 : " + e.lineno + " : 에서 " + e.message + " 오류 발생.");
    }
    // web worker로 메시지 전송
    worker.postMessage({ "args": [ 'param1', 'param2' ] });

} else {
    alert('web worker를 지원하지 않는 브라우저입니다.');
}


web worker 용 별도 js 파일

/**
 * Web Worker Script
 */
self.onmessage = function(e){

    var args = e.data.args;
    console.log('Worker가 받은 메시지: '+ JSON.stringify(args));

    var url = "/search/getInfo";
    var xhr = new XMLHttpRequest();
    xhr.overrideMimeType("text/plain; charset=UTF-8");
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var rsp = JSON.parse(this.responseText);
            postMessage(rsp); // 메인 페이지로 메시지 전달
        }
    };
    xhr.open("GET", url, true);
    xhr.send(); 
}
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments