`Shared Worker` в TypeScript

`Shared Worker` в TypeScript

В этой статье объясняется Shared Worker в TypeScript.

Подробно разберём, как работают общие веб‑воркеры и как использовать их на практике, с примерами кода на TypeScript.

YouTube Video

Shared Worker в TypeScript

Shared Worker — это единый процесс воркера, общий для нескольких вкладок, окон и iframe одного и того же источника. С его помощью можно управлять общим состоянием и ресурсами между несколькими вкладками браузера.

Например, можно эффективно реализовать общее WebSocket‑соединение, кэш и обработку очередей, синхронизированные между вкладками, и взаимное исключение.

В отличие от Dedicated Worker, Shared Worker получает несколько MessagePort через событие onconnect и может мультиплексировать взаимодействие с несколькими клиентами.

Случаи, когда стоит выбрать Shared Worker

В следующих случаях уместно использовать Shared Worker.

  • Когда требуется общее состояние или взаимное исключение между вкладками
  • Когда нужно разделить одно WebSocket‑соединение или доступ к IndexedDB
  • Когда необходимо уведомлять все вкладки (broadcast)
  • Когда нужно централизовать тяжёлые вычисления для экономии ресурсов

Напротив, в следующих случаях более уместны другие подходы.

  • Когда вам нужен контроль кэша или поддержка офлайн-режима, вы можете использовать Service Worker.
  • Для тяжёлых вычислений, ограниченных одной вкладкой, можно использовать Dedicated Worker.

Шаги реализации Shared Worker

Здесь мы пошагово реализуем следующее с использованием TypeScript.

  • Типобезопасный протокол сообщений
  • Запрос/ответ (RPC) на основе Promise
  • Широковещательная рассылка всем вкладкам
  • Heartbeat и очистка клиентов

Настройка окружения

Создайте конфигурацию для компиляции каждого исходного файла, использующего 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}
  • В tsconfig-src.json включите определения типов DOM и Web Worker, чтобы код можно было безопасно компилировать.

Определение протокола сообщений

Основа взаимодействия — типизированный контракт сообщений. Определив его заранее, вы сделаете дальнейшее взаимодействие безопасным и легко расширяемым.

 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 — это дискриминированное (тегированное) объединение, представляющее типы запросов, отправляемых воркеру, и определяющее операции, такие как ping, get и broadcast.
1export interface RequestMessage {
2  kind: 'request';
3  id: string;
4  from: string;
5  action: RequestAction;
6}
  • RequestMessage определяет структуру запросов, отправляемых от клиента воркеру.
1export interface ResponseMessage {
2  kind: 'response';
3  id: string;
4  ok: boolean;
5  result?: unknown;
6  error?: string;
7}
  • ResponseMessage определяет структуру ответных сообщений, возвращаемых воркером клиенту.
1export interface BroadcastMessage {
2  kind: 'broadcast';
3  channel: string;
4  payload: unknown;
5  from: string;
6}
  • BroadcastMessage определяет структуру широковещательных сообщений, которые воркер отправляет другим клиентам.
1export type WorkerInMessage =
2  | RequestMessage
3  | { kind: 'heartbeat'; from: string }
4  | { kind: 'bye'; from: string };
  • WorkerInMessage — это тип, представляющий все сообщения, которые получает воркер, такие как запросы, сигналы heartbeat и уведомления об отключении.
1export type WorkerOutMessage = ResponseMessage | BroadcastMessage;
  • WorkerOutMessage — это тип, представляющий ответные или широковещательные сообщения, которые воркер отправляет клиенту.
1export const randomId = () => Math.random().toString(36).slice(2);
  • randomId — это функция, генерирующая случайную буквенно-цифровую строку для идентификаторов сообщений и т. п.

Реализация Shared Worker

В shared-worker.ts регистрируйте вкладки, подключающиеся через событие onconnect, и обрабатывайте сообщения.

1// shared-worker.ts
2/// <reference lib="webworker" />
  • Эта директива указывает TypeScript загрузить определения типов для Web Workers.
1import {
2  WorkerInMessage,
3  WorkerOutMessage,
4  RequestMessage,
5  ResponseMessage,
6} from './worker-protocol.js';
  • Импортирует определения типов, используемые для обмена сообщениями с воркером.
1export default {};
2declare const self: SharedWorkerGlobalScope;
  • Явно объявляет, что self — это глобальная область Shared Worker.
1type Client = {
2  id: string;
3  port: MessagePort;
4  lastBeat: number;
5};
  • Client — это тип, представляющий идентификатор клиента, его порт связи и метку времени последнего heartbeat.
1const clients = new Map<string, Client>();
2const kv = new Map<string, unknown>();
3const locks = new Map<string, string>();
4const HEARTBEAT_TIMEOUT = 30_000;
  • Управляет списком подключённых клиентов, хранилищем ключ–значение, состоянием блокировок и длительностями тайм-аутов.
1function send(port: MessagePort, msg: WorkerOutMessage) {
2  port.postMessage(msg);
3}
  • send — это утилитарная функция, которая отправляет сообщение на указанный порт.
1function respond(req: RequestMessage, ok: boolean, result?: unknown, error?: string): ResponseMessage {
2  return { kind: 'response', id: req.id, ok, result, error };
3}
  • respond формирует ответное сообщение на запрос.
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 отправляет сообщение по указанному каналу всем клиентам.
1function handleRequest(clientId: string, port: MessagePort, req: RequestMessage) {
  • handleRequest обрабатывает входящие запросы по их типу и возвращает результаты клиенту.
 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;
  • В этом коде, в зависимости от типа полученного запроса, обрабатываются отправка и получение сообщений, извлечение и сохранение данных, а также широковещательная рассылка.
 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      }
  • Этот код реализует процесс получения клиентом блокировки для указанного ключа. Если блокировка ещё не удерживается, она захватывается немедленно; если тот же клиент запросит её снова, запрос также считается успешным. Если блокировку уже удерживает другой клиент, выполняются повторные попытки каждые 25 миллисекунд до её освобождения, а при превышении указанного таймаута (по умолчанию 5 секунд) возвращается ошибка.
 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}
  • Этот код освобождает блокировку, удерживаемую клиентом, и возвращает ответ об ошибке, если у клиента нет прав или действие неизвестно.
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 разбирает сообщения, полученные от клиентов, и обрабатывает запросы и heartbeats.
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 удаляет отключившихся клиентов из реестра и состояния блокировок.
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);
  • Использует setInterval для периодической проверки heartbeat всех клиентов и очистки соединений, по которым истёк тайм-аут.
 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 вызывается, когда новая вкладка или страница подключается к Shared Worker, регистрируя клиента и начиная обмен сообщениями.

  • В этом файле реализованы базовые механизмы Shared Worker, обеспечивающие управление общим состоянием и коммуникацию между несколькими вкладками браузера.

Клиентская обёртка (RPC)

Далее создайте RPC‑клиент на основе Promise.

1// shared-worker-client.ts
2import {
3  RequestAction,
4  RequestMessage,
5  WorkerOutMessage,
6  randomId
7} from './worker-protocol.js';
  • Импортирует определения типов и утилиты, используемые для обмена сообщениями с воркером.
1export type BroadcastHandler = (msg: {
2  channel: string;
3  payload: unknown;
4  from: string
5}) => void;
  • Здесь определяется тип функции обратного вызова, запускаемой при получении широковещательного сообщения.
1export class SharedWorkerClient {
  • SharedWorkerClient — это клиентский класс, который взаимодействует с Shared Worker, отправляя запросы и обрабатывая ответы.
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  }>();
  • Эти переменные — экземпляр воркера, порт связи с воркером и карта, отслеживающая запросы, ожидающие ответов.
1  private clientId = randomId();
2  private heartbeatTimer?: number;
3  private onBroadcast?: BroadcastHandler;
  • Эти переменные хранят идентификатор клиента, таймер отправки heartbeat и обработчик приёма широковещательных сообщений.
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;
  • В конструкторе инициализируется подключение к Shared Worker и настраиваются слушатели сообщений и отправка heartbeat.
 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();
  • Здесь принимаются сообщения от воркера и обрабатываются ответы или широковещательные сообщения.
1    this.heartbeatTimer = window.setInterval(() => {
2      this.port.postMessage({ kind: 'heartbeat', from: this.clientId });
3    }, 10_000);
  • Периодически отправляет сообщения heartbeat, чтобы поддерживать соединение активным.
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  }
  • Перед закрытием окна отправляет воркеру уведомление об отключении.
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  }
  • Метод request отправляет указанное действие воркеру и получает результат в виде 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  }
  • Это утилитарные методы для базовых проверок связи и получения текущего времени.
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  }
  • Это методы для сохранения и получения пар ключ–значение.
1  broadcast(channel: string, payload: unknown) {
2    return this.request<boolean>({ type: 'broadcast', channel, payload });
3  }
  • Это метод, который отправляет широковещательные сообщения другим клиентам через воркер.
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}
  • Это методы, которые захватывают и освобождают блокировки, обеспечивая взаимное исключение при доступе к общим ресурсам.
  • В этом файле реализован клиентский API для безопасного асинхронного обмена сообщениями из каждой вкладки браузера с Shared Worker.

Пример использования

В demo.ts мы используем созданный ранее класс SharedWorkerClient и проверяем его поведение. Он последовательно выполняет ряд функций, включая тесты взаимодействия, чтение и запись данных, широковещание и работу с блокировками.

 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);
  • Этот код — демонстрация, использующая Shared Worker для совместного использования и синхронизации данных и состояния между несколькими вкладками браузера. Используя обмен сообщениями, вы можете безопасно обмениваться асинхронными сообщениями со слабой связностью, что упрощает управление взаимодействием между разными контекстами. Кроме того, применение RPC абстрагирует взаимодействие с воркером в интуитивном, похожем на вызовы методов стиле, повышая сопровождаемость и читаемость.

Тестирование в 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>

Рекомендации по проектированию и эксплуатации

Если при проектировании и эксплуатации учитывать следующие моменты, это поможет построить более надежную и расширяемую систему.

  • Можно использовать дискриминированное (тегированное) объединение, которое позволяет ветвиться по полю kind или type.
  • Используйте корреляционный идентификатор (correlation ID) для корректного сопоставления запросов с ответами.
  • Heartbeats и автоматическая очистка могут предотвратить зависшие блокировки.
  • Реализуйте версионирование, чтобы гибко учитывать будущие изменения протокола.
  • Определение четких кодов ошибок упрощает обработку на стороне UI и отладку.

Резюме

Shared Worker — это ключевой механизм для совместного использования данных и состояния между несколькими вкладками браузера.

Представленная здесь структура обеспечивает типобезопасную RPC-коммуникацию, мониторинг жизнеспособности через heartbeats и механизм блокировок, что делает её надёжным решением, пригодным для использования в промышленной эксплуатации без изменений.

На базе этого механизма можно также реализовать следующие приложения.

  • Сериализация доступа к IndexedDB
  • Интеграция и совместное использование подключений WebSocket
  • Построение очереди задач между несколькими вкладками
  • Ограничение частоты (throttling) и доставка уведомлений о прогрессе

Как видно, использование Shared Worker позволяет безопасно и эффективно разделять данные и обработку между несколькими вкладками.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video