A interface SharedWorker
representa um tipo de worker específico que pode ser acedido a partir de vários contextos de navegação, tais como várias janelas, iframes ou até workers. Eles implementam uma interface diferente do que os workers dedicados e têm um âmbito global diferente, SharedWorkerGlobalScope
.
Nota: Se o SharedWorker puder ser acedido a partir de vários contextos de navegação, todos esses contextos de navegação devem partilhar exatamente a mesma origem (mesmo protocolo, anfitrião e porto).
Construtor
SharedWorker()
- Cria um web worker partilhado que executa uma script na URL indicada.
Propriedades
Esta interface também herda propriedades de EventTarget
de qual se deriva, e implementa propriedades de AbstractWorker
.
AbstractWorker.onerror
- É um
EventListener
chamado quando umErrorEvent
do tipoerror
sai do worker. SharedWorker.port
Read only- Devolve um objeto
MessagePort
usado para controlar e comunicar com o worker partilhado.
Métodos
Esta interface também herda métodos de EventTarget
de qual se deriva, e implementa métodos de AbstractWorker
.
Exemplo
No nosso exemplo básico dum worker partilhado, temos duas páginas de HTML, cada qual usa JavaScript para fazer um simples cálculo. Os scripts diferentes estão a utilizar o mesmo ficheiro de worker para fazer os cálculos — ambos podem-no aceder, mesmo se as páginas estiverem a correr em janelas diferentes.
O seguinte snippet de código demonstra a criação dum objeto SharedWorker
usando o construtor SharedWorker()
. Ambas scripts contêm isto:
var myWorker = new SharedWorker('worker.js');
Ambas scripts acedem ao worker através dum objeto MessagePort
criado usando a propriedade SharedWorker.port
. Se o evento onmessage
foi adicionado usando addEventListener
, a porta é manualmente criada usando o seu método start()
:
myWorker.port.start();
Quando a porta é iniciada, ambos scripts enviam mensagens ao worker e processão mensagens vindas do worker usando port.postMessage()
e port.onmessage
, respetivamente:
first.onchange = function() {
myWorker.port.postMessage([first.value,second.value]);
console.log(' Mensagem enviada ao worker');
}
second.onchange = function() {
myWorker.port.postMessage([first.value,second.value]);
console.log(' Mensagem enviada ao worker');
}
myWorker.port.onmessage = function(e) {
result1.textContent = e.data;
console.log(' Mensagem recebida do worker');
}
Dentro do worker usamos o handler SharedWorkerGlobalScope.onconnect
para nos ligarmos à mesma porta a que referimos antes. As portas associadas a esse worker são acessíveis através da propriedade ports
do evento connect
— nós depois usamos o método start()
de MessagePort
para iniciar a porta, e o handler onmessage
para lidar com as mensagens enviadas dos threads principais.
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(); // Necessário quando se usa addEventListener. Senão é chamado implicitamente pelo setter de onmessage.
}
Especificações
Especificação | Estado | Comentário |
---|---|---|
HTML Living Standard The definition of 'SharedWorker' in that specification. |
Living Standard | Sem diferenças em comparação a Unknown. |
Compatibilidade
BCD tables only load in the browser