공유 워커의 사용

공유 워커의 사용

 

공유 워커

워커는 기본적으로 하나의 워커 객체와 백그라운드의 프로세스가 일대일로 대응하는 형태로 되어 있습니다.

하지만 여러 개의 워커 객체가 하나의 백그라운드 프로세스를 공유해서 사용 할 수도 있습니다.

ShareWorker() 생성자

ShareWorker() 생성자는 객체를 생성할 때 호출합니다.

인수로는 워커와 마찬가지로 자바스크립트 파일명이 들어가며 추가로 워커의 이름도 지정해 줍니다.

 

형식

var  변수 = new  ShareWorker(자바스크립트 파일명);

예제

var  worker1 = new  ShareWorker("calc.js"); var  worker2 = new  ShareWorker("calc.js");

객체를 따로 생성하더라도 같은 이름의 자바스크립트 파일명을 사용하면 백그라운드 프로세스를 공유하게 됩니다.

 

데이터 전달

메인 UI 스레드에서 공유 워커로 데이터를 보내기 위해서는 워커와 마찬가지로 postMessage() 메서드를 사용합니다.

생성한 객체의 port 속성을 사용하여 데이터를 전달해야 합니다.

 

예제

var  worker = new  ShareWorker("calc.js"); // 데이터를 전달함 worker.port.postMessage("data");

메인 UI 스레드와 연결되어 있는 포트는 onconnect 이벤트 핸들러를 통해 전달받은 이벤트 객체의 ports 속성을 사용하여 확인 할 수 있습니다.

공유 워커에서 메인 UI 스레드에 데이터를 전달하기 위해서는 onconnect 이벤트 핸들러를 통하여 확인한 포트의 postMessage( ) 메서드를 사용합니다.

 

예제

// 메인 UI 스레드와 접속함 onconnect = function(event) {     // 메인 UI 스레드와 연결되는 포트 정보를 확인함     var  port = event.port[0];     // postMessage( ) 메서드로 전달한 데이터를 수신함     port.onmessage = function(event)     {          // 메시지를 처리함          ......          // 메인 UI 스레드로 데이터를 전달함          port.postMessage("result");      }; };

 

데이터 수신

port 속성은 메인 UI 스레드와 공유 워커와의 통신을 위한 채널이라고 할 수 있습니다.

port 속성을 사용하여 전달한 데이터는 공유 워커에서 onconnect 이벤트 핸들러를 사용하여 전달받아야 합니다.

 

예제

//  메인 UI 스레드와 접속함 onconnect = function(event) {       // 메인 UI 스레드와 연결되는 포트 정보를 확인함       var  port = event.ports[0];       // postMessage() 메서드로 전달한 데이터를 수신함       port.onmessage = function(event)       {             // 메시지를 처리함       }; };

메인 UI 스레드에서는 메시지를 수신받을 대상 워커의 객체 포트에 대하여 onmessage 핸들러를 지정하여 처리합니다.

 

예제

var  worker = new  Worker("calc.js"); worker.port.onmessage = function(event) {       // 메시지를 처리함 }

 

실습 프로그램