Web Workers

const worker = new Worker(
  new URL("./math.worker.ts", import.meta.url),
  { type: "module", name: "math" },
);
 
worker.onmessage = (e: MessageEvent<number>) => {
  console.log("result", e.data);
};
worker.postMessage([1, 2, 3]);

self.onmessage = (e: MessageEvent<number[]>) => {
  const sum = e.data.reduce((a, b) => a + b, 0);
  self.postMessage(sum);
};

declare const worker: Worker;
 
// also works outside workers: deep copy with the same rules
const copy = structuredClone({
  at: new Date(),
  tags: new Set(["a"]),
});
 
worker.postMessage(copy);                   // copied
worker.postMessage(copy, { transfer: [] }); // options form

declare const worker: Worker;
 
const pixels = new Uint8ClampedArray(1920 * 1080 * 4);
worker.postMessage({ pixels }, [pixels.buffer]);
pixels.byteLength; // 0: detached
 
// ES2024: move a buffer, optionally resizing it
const a = new ArrayBuffer(8);
const b = a.transfer(16); // a is now detached

export type Req =
  | { type: "sum"; numbers: number[] }
  | { type: "parseCsv"; csv: string };
 
// result type for each request type
export type ResultOf = {
  sum: number;
  parseCsv: string[][];
};
 
export type Call = { id: number; req: Req };
 
export type Reply =
  | { id: number; ok: true; result: ResultOf[Req["type"]] }
  | { id: number; ok: false; error: string };

import type * as P from "./protocol.ts";
 
function handle(req: P.Req): P.ResultOf[P.Req["type"]] {
  switch (req.type) {
    case "sum":
      return req.numbers.reduce((a, b) => a + b, 0);
    case "parseCsv":
      return req.csv
        .trim()
        .split("\n")
        .map((line) => line.split(","));
  }
}
 
self.onmessage = (e: MessageEvent<P.Call>) => {
  const { id, req } = e.data;
  let reply: P.Reply;
  try {
    reply = { id, ok: true, result: handle(req) };
  } catch (err) {
    reply = { id, ok: false, error: String(err) };
  }
  self.postMessage(reply);
};

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "lib": ["es2024", "webworker"],
    "types": []
  },
  "include": ["./**/*.ts", "../protocol.ts"]
}

declare const worker: Worker;
 
worker.addEventListener("error", (e) => {
  if (e instanceof ErrorEvent) {
    console.error(`${e.filename}:${e.lineno} ${e.message}`);
  } else {
    console.error("worker failed to load");
  }
  e.preventDefault(); // suppress the console duplicate
});
worker.addEventListener("messageerror", () => {
  console.error("unclonable message");
});

const shared = new SharedWorker(
  new URL("./hub.shared-worker.ts", import.meta.url),
  { type: "module", name: "hub" },
);
shared.port.onmessage = (e: MessageEvent<number>) => {
  console.log("tabs connected:", e.data);
};
shared.port.postMessage("hello");

declare const self: SharedWorkerGlobalScope;
 
const ports = new Set<MessagePort>();
 
self.onconnect = (e: MessageEvent) => {
  const port = e.ports[0];
  if (!port) return;
  ports.add(port);
  port.onmessage = () => {
    for (const p of ports) p.postMessage(ports.size);
  };
};
 
export {};

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

declare const worker: Worker;
 
if (!crossOriginIsolated) {
  throw new Error("SharedArrayBuffer needs COOP + COEP");
}
const sab = new SharedArrayBuffer(4); // room for one Int32
const flag = new Int32Array(sab);
worker.postMessage(sab); // shared, neither copied nor moved
 
Atomics.store(flag, 0, 1);
Atomics.notify(flag, 0); // wake a worker blocked in wait()

declare const worker: Worker;
 
const canvas = document.querySelector("canvas")!;
const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({ canvas: offscreen }, [offscreen]);

type Init = { canvas: OffscreenCanvas };
 
self.onmessage = (e: MessageEvent<Init>) => {
  const { canvas } = e.data;
  const ctx = canvas.getContext("2d");
  if (!ctx) return;
  const frame = (t: number) => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(100 + Math.sin(t / 300) * 80, 60, 40, 40);
    requestAnimationFrame(frame);
  };
  requestAnimationFrame(frame);
};

"use client";
import { useEffect, useRef } from "react";
 
export function useWorker(): React.RefObject<Worker | null> {
  const ref = useRef<Worker | null>(null);
  useEffect(() => {
    const w = new Worker(
      new URL("./rpc.worker.ts", import.meta.url),
      { type: "module" },
    );
    ref.current = w;
    return () => w.terminate(); // Strict Mode runs this too
  }, []);
  return ref;
}

const worker = new Worker(
  new URL("./hash.worker.ts", import.meta.url).href,
  { smol: true }, // smaller heap
);
worker.addEventListener("open", () => console.log("ready"));
worker.onmessage = (e: MessageEvent<string>) => {
  console.log(e.data);
  worker.terminate();
};
worker.postMessage("hello");
worker.unref(); // don't keep the process alive for it

import type * as P from "./protocol.ts";
type Out<R extends P.Req> = P.ResultOf[R["type"]];
type Waiter = PromiseWithResolvers<any>;
export function createRpc(worker: Worker) {
  let nextId = 0;
  const pending = new Map<number, Waiter>();
  worker.onmessage = (e: MessageEvent<P.Reply>) => {
    const r = e.data;
    const p = pending.get(r.id);
    pending.delete(r.id);
    if (r.ok) p?.resolve(r.result);
    else p?.reject(new Error(r.error));
  };
  worker.onerror = (e) => {
    for (const p of pending.values()) p.reject(e);
    pending.clear();
  };
  return <R extends P.Req>(req: R): Promise<Out<R>> => {
    const id = nextId++;
    const p = Promise.withResolvers<Out<R>>();
    pending.set(id, p);
    worker.postMessage({ id, req } satisfies P.Call);
    return p.promise;
  };
}

import { createRpc } from "./rpc-client.ts";
 
const call = createRpc(
  new Worker(new URL("./rpc.worker.ts", import.meta.url), {
    type: "module",
  }),
);
const total = await call({ type: "sum", numbers: [1, 2] });
//    ^? number

type Job<I, O> = [I, PromiseWithResolvers<O>];
 
export function createPool<I, O>(make: () => Worker, n = 4) {
  const all = Array.from({ length: n }, make);
  const idle = [...all];
  const queue: Job<I, O>[] = [];
  const pump = () => {
    while (idle.length && queue.length) {
      const w = idle.pop()!;
      const [input, job] = queue.shift()!;
      const free = () => (idle.push(w), pump());
      w.onmessage = (e) => (job.resolve(e.data), free());
      w.onerror = (e) => (job.reject(e), free());
      w.postMessage(input);
    }
  };
  const run = (input: I) => {
    const job = Promise.withResolvers<O>();
    queue.push([input, job]);
    pump();
    return job.promise;
  };
  const close = () => all.forEach((w) => w.terminate());
  return { run, close };
}

import { createPool } from "./pool.ts";
 
const pool = createPool<number[], number>(
  () =>
    new Worker(new URL("./sum.worker.ts", import.meta.url), {
      type: "module",
    }),
  Math.max(1, navigator.hardwareConcurrency - 1),
);
const sums = await Promise.all(
  [[1, 2], [3, 4], [5, 6]].map((xs) => pool.run(xs)),
);
pool.close();

type Msg = { buf: ArrayBuffer };
 
self.onmessage = (e: MessageEvent<Msg>) => {
  const px = new Uint8ClampedArray(e.data.buf);
  for (let i = 0; i < px.length; i += 4) {
    const [r = 0, g = 0, b = 0] = px.subarray(i, i + 3);
    const y = 0.299 * r + 0.587 * g + 0.114 * b;
    px[i] = px[i + 1] = px[i + 2] = y;
  }
  self.postMessage({ buf: px.buffer }, [px.buffer]);
};

declare const ctx: CanvasRenderingContext2D;
declare const worker: Worker;
 
const img = ctx.getImageData(0, 0, 800, 600);
const buf = img.data.buffer;
worker.postMessage({ buf }, [buf]); // img.data now empty
 
type Msg = { buf: ArrayBuffer };
worker.onmessage = (e: MessageEvent<Msg>) => {
  const data = new Uint8ClampedArray(e.data.buf);
  ctx.putImageData(new ImageData(data, 800, 600), 0, 0);
};

import * as Comlink from "comlink";
 
const api = {
  async primes(max: number, report: (p: number) => void) {
    const out: number[] = [];
    for (let n = 2; n <= max; n++) {
      if (out.every((p) => n % p !== 0)) out.push(n);
      if (n % 10_000 === 0) await report(n / max);
    }
    return out;
  },
};
export type Api = typeof api;
Comlink.expose(api);

import * as Comlink from "comlink";
import type { Api } from "./api.worker.ts";
 
const worker = new Worker(
  new URL("./api.worker.ts", import.meta.url),
  { type: "module" },
);
const api = Comlink.wrap<Api>(worker);
const onProgress = (p: number) => console.log(`${p * 100}%`);
const primes = await api.primes(
  100_000,
  Comlink.proxy(onProgress), // callbacks go by reference
);
api[Comlink.releaseProxy]();
worker.terminate();