다음의 내용과 소스는
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.


이번엔 Web Worker 에 대해서 살펴보려하는데요...
글을 쓰는데 쫌 시간이 걸렸읍니다. ㅋㅋ

JavaScript 가 저를 괴롭혀서... 간단한 Script 인데도 말이죠... ^^;

Web Worker !!!
이젠 Web Browser 에서도 Desktop Application 에서 처럼 Multitasking? 을 할 수 있게 되었습니다.
완전히 Desktop Application 에서 지원하는 Multitasking 과 완전히 같지는 않지만 Web Browser 의 UI Thread 와 완전히 분리된  Background 에서 동작합니다.

기존에는 Javascript 가 오랜 계산을 해야 할 경우 그 계산을 마칠때까지 사용자는 기다려야 했지요.
하지만, 이제 Web Worker 를 사용하면 Javascript 의 오랜 계산에도 사용자는 아무런? 버벅거림도, 기다림도 없이 Web Application 을 이용할 수 있습니다.


15-1. 사용법
Web Worker 를 사용하기 위해서는 먼저 Web Worker 가 호출하여 사용하게될 Javascript 파일이 외부에 필요하게 됩니다.

그리고 사용은 그리 어렵지 않습니다.

var worker = new Worker("외부 Javascript 파일명")

차아~~암. 쉽쬬~~~잉? ㅋㅋㅋ

그리고, 중요한 함수인 postMessage() 와 onmessage . 두 녀석을 기억하셔야 합니다.

이 두녀석은 UI Thread 와 BackGround 사이에서 통신을 하게 되는데요.   
기억하실런지 모르겠지만 전 글에서 이야기 했던 Communication API 와 이제 곧 이야기를 하게될 Web Socket 에서 공통으로 사용하는 개념이지요.
postMessage 로 Message 를 던지면 먼저 등록해 놓은 onmessage Event handler 로 Message 를 받지요.
그리고 다시 posetMessage 로 결과를 되돌려 주게 되고요. onmessage EventHandler로 결과를 받습니다. 
주저리주저리 말보다는 한 줄 코드가 더... ^^;

 먼저 이야기 했듯이 웹페이지 하나와 외부 Javascript File 을 하나 작성할 것입니다.

Javascript 파일을 먼저 구현하겠습니다.
(worker.js)

onmessage = function(evt) {
    var num = evt.data;
    var result = 0;
    for(var i = 1; i <= num; i++)
    {
        result += i;
    }
    postMessage(result);
};

(발췌/수정 : 혁명을 꿈꾸다 HTML5 & API 입문)


(WebWorker.html)

<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
  <title>Web Worker 예제</title>
 </head>
 <body>
        <input type="text" id="num">
        <button onclick="calculate()">계산</button>
        <button onclick="stopCalculate()">중지</button><br/>
        <p id="sum">Sum :</p>
 </body>
        <script type="text/javascript">     
      
                var worker;

                function calculate() {

                    if(worker)  {                 
                        worker.terminate();            
                    };

                    var num = document.getElementById("num").value;

                   
worker = new Worker("worker.js");
                    
                    worker.onmessage = function(evt) {
                         document.getElementById("sum").innerHTML = "Sum : " + evt.data;
                    };  
                  
                    worker.onerror=function(evt) {
                        alert("Error : " + evt.message + " (" + evt.filename + ":" + evt.lineno + ")");
                    };

                   
worker.postMessage(num);

                }

                function stopCalculate() {
                    if(worker)  {                 
                        worker.terminate();          
                    };
                    alert("Worker is Stopped");
                }
        </script>
</html>

(발췌/수정 : 혁명을 꿈꾸다 HTML5 & API 입문)


실행시킨 모습입니다.


internet explorer 9.0 에서는 작동을 하지 않았습니다. ㅡㅡ'
Opera 도 동작은 하는 듯 보였지만 worker instance 는생성을 했지만
외부 Javascript 파일쪽에서 Script error 가 발생을 하네요...
이건 좀 찾아 봐야할 듯합니다.




위 예제는 간단한 듯하여 예제 하나를 더 소개합니다.

아래 예제는 page 와 worker 간에 계속 계산값을 던집니다.
일을 계속 시키고 싶으셔도 빨리 세워주셔요...버버거림을 느끼실수도... ㅋㅋ

(cals.js)

onmessage = function(evt) {
    for (var i = evt.data; i < 1000000; i++)
    {
        postMessage(i);
    };
};

(발췌/수정 : 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS )

(webWorker.html)
<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
  <title>Web Worker 예제</title>
 </head>
 <body>
        <p>
            <input id="worker_work" type="button" value="Work!!!">
            <input id="worker_work_stop" type="button" value="Stop!!!">
        </p>
        <p id="worker_say">Say</p>
        <textarea rows="4" cols="60">딴짓할 수 있어요.</textarea>
 </body>
        <script type="text/javascript">    
       
                var worker;

                function makeWorker() {               
                    worker = new Worker("cal.js");
                };

                document.getElementById("worker_work").onclick = function() {               
                    makeWorker();

                    worker.postMessage(0);

                    worker.onmessage = function(evt) {
                        document.getElementById("worker_say").innerHTML=evt.data;
                    };

                    document.getElementById("worker_work_stop").onclick = function() {
                        if(worker) {
                            worker.terminate();
                            alert("Worker. Stop!!! ");
                        };
                    };
                    worker.onerror=function(evt) {
                        document.getElementById("worker_say").innerHTML = "Error : " + evt.message + " (" + evt.filename + ":" + evt.lineno + ")";
                    };
                };

        </script>
</html>

(발췌/수정 : 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS )

간략하게 Web Worker 를 살펴보았습니다.
이제 여러분의 Web Application 에서도 작은 머슴하나 키워보시지 않으시겠습니까? ㅋㅋ
작은 머슴이 기대이하로 버벅거릴 수 있을지도 모릅니다. 잘 다독여서 잘 키우시길 바랍니다. ㅋㅋㅋ


행복한 고수되셔요... 


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\





'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 18. Geolocation API  (0) 2011.06.27
[HTML 5] 17. Web Socket  (1) 2011.06.25
[HTML 5] 16. Web Worker  (0) 2011.06.23
[HTML 5] 15. Web SQL Database  (0) 2011.06.21
[HTML 5] 14. Web Storage  (0) 2011.06.21
[HTML 5] 13. Communication API  (0) 2011.06.19
Posted by woojja