`Shared Worker` em TypeScript

Articles

Este artigo explica Shared Worker em TypeScript.

Explicaremos em detalhe como os Shared Workers funcionam e como usá-los na prática, com exemplos de código em TypeScript.

YouTube Video

`Shared Worker` em TypeScript

Shared Worker é um único processo de worker compartilhado entre várias abas, janelas e iframes na mesma origem. Com isso, você pode lidar com estado e recursos compartilhados entre várias abas do navegador.

Por exemplo, é possível implementar de forma eficiente uma conexão WebSocket compartilhada, cache e processamento de filas sincronizados entre abas, e exclusão mútua.

Ao contrário de um Dedicated Worker, um Shared Worker recebe múltiplas MessagePorts via o evento onconnect e pode multiplexar a comunicação com vários clientes.

Casos em que você deve escolher um `Shared Worker`

Nos casos a seguir, usar um Shared Worker é apropriado.

Quando você precisa de estado compartilhado ou exclusão mútua entre abas
Quando você deseja compartilhar uma única conexão WebSocket ou o acesso ao IndexedDB
Quando você precisa notificar todas as abas (broadcast)
Quando você deseja centralizar processamento pesado para poupar recursos

Por outro lado, nos casos a seguir, outras abordagens são mais adequadas.

Quando você precisar de controle de cache ou suporte offline, pode usar um Service Worker.
Para processamento pesado confinado a uma única aba, você pode usar um Dedicated Worker.

Etapas de implementação para `Shared Worker`

Aqui, implementaremos o seguinte passo a passo usando TypeScript.

Protocolo de mensagens com tipagem segura
Requisição/resposta baseada em Promise (RPC)
Broadcast para todas as abas
Heartbeat e limpeza de clientes

Configuração do ambiente

Crie a configuração para compilar cada arquivo-fonte que usa um Shared Worker.

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ES2020",
 5    "lib": ["ES2020", "dom", "WebWorker"],
 6    "moduleResolution": "Bundler",
 7    "strict": true,
 8    "noEmitOnError": true,
 9    "outDir": "out",
10    "skipLibCheck": true
11  },
12  "include": ["src"]
13}

Em tsconfig-src.json, ative as definições de tipos do DOM e de Web Workers para que o código possa ser compilado com segurança.

Definindo o protocolo de mensagens

A base da comunicação é um contrato de mensagens tipado. Definir isso antecipadamente torna a comunicação subsequente segura e fácil de estender.

 1// worker-protocol.ts
 2// Define discriminated unions for structured messages
 3
 4export type RequestAction =
 5  | { type: 'ping' }
 6  | { type: 'echo'; payload: string }
 7  | { type: 'getTime' }
 8  | { type: 'set'; key: string; value: unknown }
 9  | { type: 'get'; key: string }
10  | { type: 'broadcast'; channel: string; payload: unknown }
11  | { type: 'lock.acquire'; key: string; timeoutMs?: number }
12  | { type: 'lock.release'; key: string };

RequestAction é uma união discriminada (tagged union) que representa os tipos de requisições enviadas ao worker e define operações como ping, get e broadcast.

1export interface RequestMessage {
2  kind: 'request';
3  id: string;
4  from: string;
5  action: RequestAction;
6}

RequestMessage define a estrutura das mensagens de requisição enviadas do cliente para o worker.

1export interface ResponseMessage {
2  kind: 'response';
3  id: string;
4  ok: boolean;
5  result?: unknown;
6  error?: string;
7}

ResponseMessage define a estrutura das mensagens de resposta retornadas do worker para o cliente.

1export interface BroadcastMessage {
2  kind: 'broadcast';
3  channel: string;
4  payload: unknown;
5  from: string;
6}

BroadcastMessage define a estrutura das mensagens de broadcast que o worker envia para outros clientes.

1export type WorkerInMessage =
2  | RequestMessage
3  | { kind: 'heartbeat'; from: string }
4  | { kind: 'bye'; from: string };

WorkerInMessage é um tipo que representa todas as mensagens que o worker recebe, como requisições, sinais de vida e notificações de desconexão.

1export type WorkerOutMessage = ResponseMessage | BroadcastMessage;

WorkerOutMessage é um tipo que representa mensagens de resposta ou de broadcast que o worker envia ao cliente.

1export const randomId = () => Math.random().toString(36).slice(2);

randomId é uma função que gera uma string alfanumérica aleatória para usar como IDs de mensagens e similares.

Implementando o Shared Worker

Em shared-worker.ts, registre as abas que se conectam via o evento onconnect e trate as mensagens.

1// shared-worker.ts
2/// <reference lib="webworker" />

Esta diretiva instrui o TypeScript a carregar as definições de tipos para Web Workers.

1import {
2  WorkerInMessage,
3  WorkerOutMessage,
4  RequestMessage,
5  ResponseMessage,
6} from './worker-protocol.js';

Importa as definições de tipos usadas para a comunicação com o worker.

1export default {};
2declare const self: SharedWorkerGlobalScope;

Declara explicitamente que self é o escopo global do Shared Worker.

1type Client = {
2  id: string;
3  port: MessagePort;
4  lastBeat: number;
5};

Client é um tipo que representa o identificador de cada cliente, a porta de comunicação e o timestamp do último sinal de vida.

1const clients = new Map<string, Client>();
2const kv = new Map<string, unknown>();
3const locks = new Map<string, string>();
4const HEARTBEAT_TIMEOUT = 30_000;

Gerencia a lista de clientes conectados, um armazenamento chave-valor, o estado de bloqueio e as durações de tempo limite.

1function send(port: MessagePort, msg: WorkerOutMessage) {
2  port.postMessage(msg);
3}

send é uma função utilitária que envia uma mensagem para a porta especificada.

1function respond(req: RequestMessage, ok: boolean, result?: unknown, error?: string): ResponseMessage {
2  return { kind: 'response', id: req.id, ok, result, error };
3}

respond gera uma mensagem de resposta para uma requisição.

1function broadcast(from: string, channel: string, payload: unknown) {
2  for (const [id, c] of clients) {
3    send(c.port, { kind: 'broadcast', channel, payload, from });
4  }
5}

broadcast envia uma mensagem em um canal especificado para todos os clientes.

1function handleRequest(clientId: string, port: MessagePort, req: RequestMessage) {

handleRequest processa as requisições recebidas por tipo e retorna os resultados ao cliente.

 1  const { action } = req;
 2  try {
 3    switch (action.type) {
 4      case 'ping':
 5        send(port, respond(req, true, 'pong'));
 6        break;
 7      case 'echo':
 8        send(port, respond(req, true, action.payload));
 9        break;
10      case 'getTime':
11        send(port, respond(req, true, new Date().toISOString()));
12        break;
13      case 'set':
14        kv.set(action.key, action.value);
15        send(port, respond(req, true, true));
16        break;
17      case 'get':
18        send(port, respond(req, true, kv.get(action.key)));
19        break;
20      case 'broadcast':
21        broadcast(clientId, action.channel, action.payload);
22        send(port, respond(req, true, true));
23        break;

Neste código, dependendo do tipo de solicitação recebida, ele lida com o envio e o recebimento de mensagens, a recuperação e o salvamento de dados e o broadcast.

 1      case 'lock.acquire': {
 2        const owner = locks.get(action.key);
 3        if (!owner) {
 4          locks.set(action.key, clientId);
 5          send(port, respond(req, true, { owner: clientId }));
 6        } else if (owner === clientId) {
 7          send(port, respond(req, true, { owner }));
 8        } else {
 9          const start = Date.now();
10          const tryWait = () => {
11            const current = locks.get(action.key);
12            if (!current) {
13              locks.set(action.key, clientId);
14              send(port, respond(req, true, { owner: clientId }));
15            } else if ((action.timeoutMs ?? 5000) < Date.now() - start) {
16              send(port, respond(req, false, undefined, 'lock-timeout'));
17            } else {
18              setTimeout(tryWait, 25);
19            }
20          };
21          tryWait();
22        }
23        break;
24      }

Este código implementa o processo para um cliente adquirir um bloqueio para a chave especificada. Se o bloqueio ainda não estiver em uso, ele é adquirido imediatamente; se o mesmo cliente o solicitar novamente, a requisição também é tratada como bem-sucedida. Se outro cliente já detiver o bloqueio, tenta novamente a cada 25 milissegundos até que o bloqueio seja liberado e, se o tempo limite especificado (padrão de 5 segundos) for excedido, responde com um erro.

 1      case 'lock.release':
 2        if (locks.get(action.key) === clientId) {
 3          locks.delete(action.key);
 4          send(port, respond(req, true, true));
 5        } else {
 6          send(port, respond(req, false, undefined, 'not-owner'));
 7        }
 8        break;
 9      default:
10        send(port, respond(req, false, undefined, 'unknown-action'));
11    }
12  } catch (e: any) {
13    send(port, respond(req, false, undefined, e?.message ?? 'error'));
14  }
15}

Este código libera o bloqueio mantido pelo cliente e retorna uma resposta de erro se o cliente não tiver permissão ou se a ação for desconhecida.

1function handleInMessage(c: Client, msg: WorkerInMessage) {
2  if (msg.kind === 'heartbeat') {
3    c.lastBeat = Date.now();
4  } else if (msg.kind === 'bye') {
5    cleanupClient(msg.from);
6  } else if (msg.kind === 'request') {
7    handleRequest(c.id, c.port, msg);
8  }
9}

handleInMessage analisa as mensagens recebidas dos clientes e lida com requisições e sinais de vida.

1function cleanupClient(clientId: string) {
2  for (const [key, owner] of locks) {
3    if (owner === clientId) locks.delete(key);
4  }
5  clients.delete(clientId);
6}

cleanupClient remove clientes desconectados do registro e do estado de bloqueio.

1setInterval(() => {
2  const now = Date.now();
3  for (const [id, c] of clients) {
4    if (now - c.lastBeat > HEARTBEAT_TIMEOUT) cleanupClient(id);
5  }
6}, 10_000);

Usa setInterval para verificar periodicamente os sinais de vida de todos os clientes e limpar conexões que excederam o tempo limite.

 1self.onconnect = (e: MessageEvent) => {
 2  const port = (e.ports && e.ports[0]) as MessagePort;
 3  const clientId = crypto.randomUUID?.() ?? Math.random().toString(36).slice(2);
 4  const client: Client = { id: clientId, port, lastBeat: Date.now() };
 5  clients.set(clientId, client);
 6
 7  port.addEventListener('message', (ev) => handleInMessage(client, ev.data as WorkerInMessage));
 8  send(port, { kind: 'broadcast', channel: 'system', payload: { hello: true, clientId }, from: 'worker' });
 9  port.start();
10};

onconnect é chamado quando uma nova aba ou página se conecta ao Shared Worker, registrando o cliente e iniciando a comunicação.
Ao longo deste arquivo, são implementados os mecanismos fundamentais de um Shared Worker que possibilitam o gerenciamento de estado compartilhado e a comunicação entre múltiplas abas do navegador.

Wrapper de cliente (RPC)

Em seguida, crie um cliente RPC baseado em Promise.

1// shared-worker-client.ts
2import {
3  RequestAction,
4  RequestMessage,
5  WorkerOutMessage,
6  randomId
7} from './worker-protocol.js';

Importa as definições de tipos e funções utilitárias usadas para a comunicação com o worker.

1export type BroadcastHandler = (msg: {
2  channel: string;
3  payload: unknown;
4  from: string
5}) => void;

Aqui definimos o tipo da função de callback que é executada quando uma mensagem de broadcast é recebida.

1export class SharedWorkerClient {

SharedWorkerClient é uma classe de cliente que se comunica com um Shared Worker, enviando requisições e tratando respostas.

1  private worker: SharedWorker;
2  private port: MessagePort;
3  private pending = new Map<string, {
4    resolve: (v: any) => void;
5    reject: (e: any) => void
6  }>();

Essas variáveis são a instância do worker, a porta de comunicação com o worker e um mapa que rastreia requisições aguardando respostas.

1  private clientId = randomId();
2  private heartbeatTimer?: number;
3  private onBroadcast?: BroadcastHandler;

Essas variáveis armazenam o identificador do cliente, o temporizador para envio de sinais de vida e o manipulador de recepção de broadcast.

1  constructor(url: URL, name = 'app-shared', onBroadcast?: BroadcastHandler) {
2    this.worker = new SharedWorker(url, { name, type: 'module' as any });
3    this.port = this.worker.port;
4    this.onBroadcast = onBroadcast;

No construtor, ele inicializa a conexão com o Shared Worker e configura os ouvintes de mensagens e o envio de sinais de vida.

 1    this.port.addEventListener('message', (ev) => {
 2      const msg = ev.data as WorkerOutMessage;
 3      if (msg.kind === 'response') {
 4        const p = this.pending.get(msg.id);
 5        if (p) {
 6          this.pending.delete(msg.id);
 7          msg.ok ? p.resolve(msg.result) : p.reject(new Error(msg.error || 'error'));
 8        }
 9      } else if (msg.kind === 'broadcast') {
10        this.onBroadcast?.(msg);
11      }
12    });
13    this.port.start();

Aqui ele recebe mensagens do worker e trata respostas ou broadcasts.

1    this.heartbeatTimer = window.setInterval(() => {
2      this.port.postMessage({ kind: 'heartbeat', from: this.clientId });
3    }, 10_000);

Envia mensagens de sinais de vida periodicamente para manter a conexão ativa.

1    window.addEventListener('beforeunload', () => {
2      try {
3        this.port.postMessage({ kind: 'bye', from: this.clientId });
4      } catch {}
5      if (this.heartbeatTimer) clearInterval(this.heartbeatTimer);
6    });
7  }

Envia uma notificação de desconexão ao worker antes de a janela ser fechada.

1  request<T = unknown>(action: RequestAction): Promise<T> {
2    const id = randomId();
3    return new Promise<T>((resolve, reject) => {
4      this.pending.set(id, { resolve, reject });
5      this.port.postMessage({ kind: 'request', id, from: this.clientId, action });
6    });
7  }

O método request envia a ação especificada ao worker e recebe o resultado como uma Promise.

1  ping() {
2    return this.request<string>({ type: 'ping' });
3  }
4  echo(payload: string) {
5    return this.request<string>({ type: 'echo', payload });
6  }
7  getTime() {
8    return this.request<string>({ type: 'getTime' });
9  }

Estes são métodos utilitários para testes básicos de comunicação e para obter a hora atual.

1  set(key: string, value: unknown) {
2    return this.request<boolean>({ type: 'set', key, value });
3  }
4  get<T = unknown>(key: string) {
5    return this.request<T>({ type: 'get', key });
6  }

Estes são métodos para armazenar e recuperar pares chave-valor.

1  broadcast(channel: string, payload: unknown) {
2    return this.request<boolean>({ type: 'broadcast', channel, payload });
3  }

Este é um método que envia mensagens de broadcast para outros clientes via worker.

1  lockAcquire(key: string, timeoutMs?: number) {
2    return this.request<{ owner: string }>({ type: 'lock.acquire', key, timeoutMs });
3  }
4  lockRelease(key: string) {
5    return this.request<boolean>({ type: 'lock.release', key });
6  }
7}

Estes são métodos que adquirem e liberam bloqueios para alcançar exclusão mútua sobre recursos compartilhados.
Ao longo deste arquivo, é implementada uma API de cliente para comunicação segura e assíncrona de cada aba do navegador com o Shared Worker.

Exemplo de uso

Em demo.ts, usamos a classe SharedWorkerClient criada anteriormente e verificamos seu comportamento. Ele executa sequencialmente uma série de funções, incluindo testes de comunicação, leitura e escrita de dados, broadcast e manipulação de bloqueios.

 1// demo.ts
 2import { SharedWorkerClient } from './shared-worker-client.js';
 3
 4const client = new SharedWorkerClient(new URL('./shared-worker.js', import.meta.url), 'app-shared', (b) => {
 5  console.log('[BROADCAST]', b.channel, JSON.stringify(b.payload));
 6});
 7
 8async function demo() {
 9  console.log('ping:', await client.ping());
10  console.log('echo:', await client.echo('hello'));
11  console.log('time:', await client.getTime());
12
13  // Counter update
14  await client.set('counter', (await client.get<number>('counter')) ?? 0);
15  const c1 = await client.get<number>('counter');
16  await client.set('counter', (c1 ?? 0) + 1);
17  console.log('counter:', await client.get<number>('counter'));
18
19  // Broadcast test
20  await client.broadcast('notify', { msg: 'Counter updated' });
21
22  // Lock test
23  const key = 'critical';
24  console.log(`[lock] Trying to acquire lock: "${key}"`);
25  const lockResult = await client.lockAcquire(key, 2000);
26  console.log(`[lock] Lock acquired for key "${key}":`, lockResult);
27
28  try {
29    console.log(`[lock] Simulating critical section for key "${key}"...`);
30    await new Promise((r) => setTimeout(r, 250));
31    console.log(`[lock] Critical section completed for key "${key}"`);
32  } finally {
33    console.log(`[lock] Releasing lock: "${key}"`);
34    const releaseResult = await client.lockRelease(key);
35    console.log(`[lock] Lock released for key "${key}":`, releaseResult);
36  }
37}
38
39demo().catch(console.error);

Este código é uma demonstração que usa um Shared Worker para compartilhar e sincronizar dados e estado entre várias abas do navegador. Ao usar comunicação baseada em mensagens, você pode trocar mensagens assíncronas com segurança e baixo acoplamento, facilitando o gerenciamento da comunicação entre diferentes contextos. Além disso, ao usar RPC, abstrai a comunicação com o worker em um estilo intuitivo, semelhante a chamadas de métodos, melhorando a manutenibilidade e a legibilidade.

Testando em HTML

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8" />
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6  <title>Shared Worker Demo</title>
 7</head>
 8<body>
 9  <h1>SharedWorker Demo</h1>
10  <p>Open the browser console to see the output.</p>
11
12  <script type="module">
13    import './demo.js';
14  </script>
15</body>
16</html>

Considerações de design e operação

Ao projetar e operar, manter os seguintes pontos em mente ajudará você a construir um sistema mais robusto e extensível.

Você pode adotar uma união discriminada (tagged union) que permite ramificar com base em kind ou type.
Use um ID de correlação para associar corretamente as requisições às respostas.
Sinais de vida e limpeza automática podem evitar bloqueios abandonados.
Implemente versionamento para acomodar, de forma flexível, futuras mudanças no protocolo.
Definir códigos de erro claros facilita o tratamento no lado da interface do usuário (UI) e a depuração.

Resumo

Um Shared Worker é um mecanismo central para compartilhar dados e estado entre várias abas do navegador.

A estrutura apresentada aqui fornece comunicação RPC com segurança de tipos, monitoramento de vivacidade via sinais de vida e um mecanismo de bloqueio, tornando-a um projeto robusto que pode ser usado como está em produção.

Com base nesse mecanismo, você também pode implementar as seguintes aplicações.

Serializar o acesso ao IndexedDB
Integração e compartilhamento de conexões WebSocket
Construir uma fila de tarefas em várias abas
Controle de taxa (throttling) e entrega de notificações de progresso

Como você pode ver, ao aproveitar um Shared Worker é possível compartilhar dados e processamento de forma segura e eficiente entre múltiplas abas.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Service Worker em TypeScript

`Shared Worker` em TypeScript

YouTube Video

Shared Worker em TypeScript

Casos em que você deve escolher um Shared Worker

Etapas de implementação para Shared Worker

Configuração do ambiente

Definindo o protocolo de mensagens

Implementando o Shared Worker

Wrapper de cliente (RPC)

Exemplo de uso

Testando em HTML

Considerações de design e operação

Resumo

YouTube Video

`Shared Worker` em TypeScript

Casos em que você deve escolher um `Shared Worker`

Etapas de implementação para `Shared Worker`