MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

SharedWorker

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

SharedWorker 인터페이스는 윈도우 창이나 iframe, 워커등의 다른 브라우징 컨텍스트에서도 접근이 가능한 특정 종류의 워커를 의미합니다. 기존의 다른 종류의 워커들과 다른 전역 스코프를 갖는 인터페이스를 구현합니다. SharedWorkerGlobalScope.

알아둘 점 :  SharedWorker 가 몇개의 다른 브라우징 컨텍스트에서 접근이 가능하면, 그 브라우징 컨텍스트들은 모두 정확히 같은 오리진을 공유해야 합니다. (같은 프로토콜, 호스트, 포트 등)

알아둘 점 : 파이어폭스에서,  shared workers 는 개인, 비개인 윈도우 간에 공유될 수 없습니다. (확인 bug 1177621.)

속성들

EventTarget 의 속성들을 상속 받습니다. 그리고 AbstractWorker 의 속성들을 구현할 수 있습니다.

AbstractWorker.onerror

워커에서 ErrorEvent 타입의 에러가 발생했을 때 호출되는는 EventListener
SharedWorker.port Read only
shared worker를 제어하거나 통신하기 위해 사용되는 MessagePort 객체를 반환

생성자

SharedWorker()
특정 URL에서 스크립트를 실행하는 shared web worker를 생성합니다.

메서드

EventTarget 의 속성들을 상속 받습니다. 그리고 AbstractWorker 의 속성들을 구현할 수 있습니다.

예제

Basic shared worker example (run shared worker) 를 보시면 2개의 HTML 페이지가 있습니다. 각각 간단한 계산을 위해 자바스크립트를 사용합니다. 각기 다른 스크립트가 계산을 위해 같은 워커 파일을 사용합니다 — 두 개 페이지가 모두 다른 윈도우창에서 실행되더라도 같은 워커에 접근할 수 있습니다.

아래 코드 스니펫은  SharedWorker() 생성자를 이용해 SharedWorker 객체를 생성합니다. 두 스크립트 모두 아래를 포함합니다.

var myWorker = new SharedWorker("worker.js");

두 스크립트는 SharedWorker.port 속성으로 생성한 MessagePort 객체를 통해 워커에 접근할 수 있습니다. addEventListener 를 이용하여 onmessage 가 추가되면, port는 start() 메서드를 이용하여 수동으로 시작할 수 있습니다.

myWorker.port.start();

포트가 시작되면, 양 스크립트는 워커에 메시지를 보내고 port.postMessage()와 port.onmessage 를 각각 이용하여  메시지를 처리합니다.

first.onchange = function() {
    myWorker.port.postMessage([first.value,second.value]);
    console.log('Message posted to worker');
  }

  second.onchange = function() {
    myWorker.port.postMessage([first.value,second.value]);
    console.log('Message posted to worker');
  }

  myWorker.port.onmessage = function(e) {
    result1.textContent = e.data;
    console.log('Message received from worker');
  }

워커에서 SharedWorkerGlobalScope.onconnect 핸들러를 이용하여 위에 언급된 포트에 접속할 수 있습니다. 워커에 연관되어 있는 포트는 connect 이벤트 포트 속성에 접근할 수 있습니다 — 그리고나서 MessagePort start() 메서드로 포트를 시작하고, onmessage 핸들러로 메인쓰레드에서 받은 메시지를 처리합니다.

onconnect = function(e) {
    var port = e.ports[0];

    port.addEventListener('message', function(e) {
      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
      port.postMessage(workerResult);
    });

    port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
}

Specifications

Specification Status Comment
WHATWG HTML Living Standard
The definition of 'SharedWorker' in that specification.
Living Standard No change from Web Workers.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support 4 29.0 (29.0) No support 10.60 5
No support 6.1
Feature Android Chrome for Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Mobile Opera Mobile Safari Mobile
Support No support No support 33.0 (33.0) 2.1 No support 11.5 5.1
No support 7.1

See also

문서 태그 및 공헌자

 이 페이지의 공헌자: joshua1988
 최종 변경: joshua1988,