다음의 내용과 소스는
혁명을 꿈꾸다 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 을 이용할 수 있습니다.


16-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 입문)


실행시킨 모습입니다.

WebWorker_01.jpg

 


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

WebWorker_02.jpg

 




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

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

(cals.js)

onmessage = function(evt) {
             for (var i = evt.data; i < 1000000; i++)
             {
                  postMessage(i);
             };
};
(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>

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


HTML5 시리즈 강좌 리스트
[HTML5강좌] 1. HTML5 개요
[HTML5강좌] 2. HTML4 vs HTML5 (1)
[HTML5강좌] 3. HTML4 vs HTML5 (2)
[HTML5강좌] 4. Sementic Element (1)
[HTML5강좌] 5. Sementic Element (2)
[HTML5강좌] 6. Strong Web Form
[HTML5강좌] 7. Rich Text Edit API
[HTML5강좌] 8. Video Element
[HTML5강좌] 9. Audio Element
[HTML5강좌] 10. Canvas Element
[HTML5강좌] 11. Drag & Drop API
[HTML5강좌] 12. Offline Web Application
[HTML5강좌] 13. Communication API
[HTML5강좌] 14. Web Storage
[HTML5강좌] 15. Web SQL Database
[HTML5강좌] 16. Web Worker
[HTML5강좌] 17. Web Socket
[HTML5강좌] 18. Geolocation API
[HTML5강좌] 19. SVG
[HTML5강좌] 20. File API



HTML5 동영상 강좌 리스트
[HTML5 동영상 강좌] 1. HTML 5 개요
[HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
[HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
[HTML5 동영상 강좌] 4. Sementic Element (1)
[HTML5 동영상 강좌] 5. Sementic Element (2)
[HTML5 동영상 강좌] 6. Strong Web Form
[HTML5 동영상 강좌] 7. Rich Text Edit API
[HTML5 동영상 강좌] 8. Video Element
[HTML5 동영상 강좌] 9. Audio Element
[HTML5 동영상 강좌] 10. Canvas Element
[HTML5 동영상 강좌] 11. Drag & Drop API
[HTML5 동영상 강좌] 12. Offline Web Application
[HTML5 동영상 강좌] 13. Communication API
[HTML5 동영상 강좌] 14. Web Storage
[HTML5 동영상 강좌] 15. Web SQL Database
[HTML5 동영상 강좌] 16. Web Worker
[HTML5 동영상 강좌] 17. Web Socket
[HTML5 동영상 강좌] 18. Geolocation API
[HTML5 동영상 강좌] 19. SVG
[HTML5 동영상 강좌] 20. File API



행복한 고수되셔요...


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

 




profile