HTML5/Worker Thread
Worker Thread Example
Soul-Learner
2014. 7. 11. 22:40
HTML5 Worker 쓰레드 예
HTML5에서는 웹 페이지에서도 자바스크립트를 이용하여 쓰레드를 실행할 수 있게 되었다.
window 객체에 포함된 Worker 객체를 이용하는 방식으로 설계되었고 Worker의 생성자 함수에 쓰레드로 실행할 자바스크립트 코드를 전달해주고 Worker객체를 생성하면 쓰레드 코드가 실행된다.
Worker.postMessage()를 호출하면 쓰레드 코드 안에 선언된 onmessage 콜백함수의 파라미터로 메시지가 전달되고 data 라는 속성을 통해서 메시지를 수진할 수가 있다. 반대로 쓰레드 코드 안에서 postMessage()를 호출하여 메시지를 전송하면 Worker.onmessage()의 파라미터로 메시지가 전달되어 쓰레드 코드와 통신을 할 수가 있다.
간단한 쓰레드의 예
worker.js
console.log('쓰레드 시작됨');
var sum = 0;
for(var i=0;i<50000;i++){
sum += i;
}
console.log('쓰레드 작업 결과:'+sum);
postMessage(sum); //외부로 메시지를 전송한다
onmessage = function(event){
console.log('워커코드 안으로 전달된 데이터:'+event.data);
}
위의 코드를 쓰레드로 실행할 자바스크립트 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Worker Test</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
var w;
$(function(){
if(typeof(w)=='undefined'){
w = new Worker('worker.js');
w.postMessage('쓰레드 시작');
}
w.onmessage = function(event){
$('#out').text(event.data);
}
});
function stopThread(){
w.terminate();
}
</script>
</head>
<body>
<br>
<div id="out"></div>
<button type="button" onclick="stopThread();">쓰레드 종료</button>
</body>
</html>
아래는 또 다른 쓰레드 실행의 예이다
Worker에 의해 수행될 작업을 정의한 자바스크립트 파일을 아래처럼 작성한다
worker_code.js
onmessage = function(msg) {
console.log('Start of Worker Codes...'+msg.data);
var start = new Date().getTime();
var current = 0;
var cnt = 0;
var tid = setInterval(function(){
console.log(++cnt+'. Worker Job');
current = new Date().getTime();
if((current-start) >= 10000) {
clearInterval(tid);
console.log('End of Worker Codes');
postMessage('End of Worker Codes');
}
}, 1000);
};
Worker를 사용하는 메인 스크립트를 작성한다
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML5 Worker Example</title>
<script type="text/javascript">
var worker;
function test() {
if(!!window.Worker){
alert("웹워커 지원 브라우저");
if(worker) worker.terminate();
worker = new Worker('worker_code.js');
worker.onmessage = function(msg) {
console.log('워커에게서 온 메시지='+msg.data);
}
//worker에게 메시지를 보내면 worker의 onmessage()핸들러가 실행되면서 작업을 시작한다
worker.postMessage('작업개시');
var start = new Date().getTime();
var current = 0;
var cnt = 0;
var tid = setInterval(function(){
console.log(++cnt+'. 메인 스크립트 작업');
current = new Date().getTime();
if(current-start>10000) {
clearInterval(tid);
console.log('메인 스크립트 작업 완료');
}
},1000);
}
else{
alert("웹워커를 지원하지 않는 브라우저입니다");
}
}
function stopWorker() {
if(worker) worker.terminate();
}
</script>
</head>
<body>
<button onclick="test();">Web Worker Test</button>
<button onclick="stopWorker();">STOP Worker</button>
</body>
</html>
Google Chrome 에서 위의 코드를 실행하면 콘솔에서 다음과 같이 메인 쓰레드와 워커 쓰레드가 함께 병행처리를 수행하는 것을 확인할 수 있다.
Start of Worker Codes...작업개시 worker_code.js:3
1. 메인 스크립트 작업 webworker.html:30
1. Worker Job worker_code.js:9
2. 메인 스크립트 작업 webworker.html:30
2. Worker Job worker_code.js:9
3. 메인 스크립트 작업 webworker.html:30
3. Worker Job worker_code.js:9
4. 메인 스크립트 작업 webworker.html:30
4. Worker Job worker_code.js:9
5. 메인 스크립트 작업 webworker.html:30
5. Worker Job worker_code.js:9
6. 메인 스크립트 작업 webworker.html:30
6. Worker Job worker_code.js:9
7. 메인 스크립트 작업 webworker.html:30
7. Worker Job worker_code.js:9
8. 메인 스크립트 작업 webworker.html:30
8. Worker Job worker_code.js:9
9. 메인 스크립트 작업 webworker.html:30
9. Worker Job worker_code.js:9
10. 메인 스크립트 작업 webworker.html:30
메인 스크립트 작업 완료 webworker.html:34
10. Worker Job worker_code.js:9
End of Worker Codes worker_code.js:13
워커에게서 온 메시지=End of Worker Codes