`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-канал.