Web Workers: True Multithreading in JavaScript | DevPrep

Web Workers: True Multithreading in JavaScript | DevPrep

// main.js
const worker = new Worker("worker.js");
worker.postMessage({ type: "sort", data: hugeArray });
worker.onmessage = (e) => {
  console.log("Sorted:", e.data);
};

// worker.js
self.onmessage = (e) => {
  if (e.data.type === "sort") {
    const sorted = e.data.data.sort((a, b) => a - b);
    self.postMessage(sorted);
  }
};

// worker.js
import * as Comlink from "comlink";

const api = {
  async processImage(imageData) {
    // Heavy computation
    return processedResult;
  }
};
Comlink.expose(api);

// main.js
import * as Comlink from "comlink";
const worker = new Worker("worker.js");
const api = Comlink.wrap(worker);
const result = await api.processImage(data); // Looks like a normal async call!