self.onmessage = function (event) {
  const data = event.data;
  const result = data * 2; // công việc nặng giả lập
  self.postMessage(result);
};

const worker = new Worker('worker.js');

worker.postMessage(10);

worker.onmessage = function (event) {
  console.log('Kết quả từ worker:', event.data); // 20
};

self.onmessage = function (e) {
  const num = e.data;
  let result = 0;
  for (let i = 0; i < num; i++) {
    result += i;
  }
  self.postMessage(result);
};

import { useState } from 'react';

export default function HeavyCounter() {
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);

  const runWorker = () => {
    setLoading(true);
    const worker = new Worker(
      new URL('@/workers/counterWorker.js', import.meta.url),
      { type: 'module' }
    );

    worker.postMessage(1e7);

    worker.onmessage = (e) => {
      setResult(e.data);
      setLoading(false);
      worker.terminate();
    };
  };

  return (
    <div>
      <h2>🔁 Heavy Counter (React + Worker)</h2>
      <button onClick={runWorker} disabled={loading}>
        {loading ? 'Đang tính toán...' : 'Bắt đầu'}
      </button>
      {result !== null && <p>Kết quả: {result}</p>}
    </div>
  );
}

<script setup>
import { ref } from 'vue';

const result = ref(null);
const loading = ref(false);

const runWorker = () => {
  loading.value = true;
  const worker = new Worker(
    new URL('@/workers/counterWorker.js', import.meta.url),
    { type: 'module' }
  );

  worker.postMessage(1e7);

  worker.onmessage = (e) => {
    result.value = e.data;
    loading.value = false;
    worker.terminate();
  };
};
</script>

<template>
  <div>
    <h2>🔁 Heavy Counter (Vue + Worker)</h2>
    <button @click="runWorker" :disabled="loading">
      {{ loading ? 'Đang tính toán...' : 'Bắt đầu' }}
    </button>
    <p v-if="result !== null">Kết quả: {{ result }}</p>
  </div>
</template>