JavaScript Module Workers: Menguasai Pola Pemrosesan Latar Belakang untuk Lanskap Digital Global

            
// worker.js

// Fungsi ini akan dieksekusi saat pekerja menerima pesan
self.onmessage = function(event) {
  const data = event.data;
  console.log('Pesan diterima di pekerja:', data);

  // Lakukan beberapa tugas latar belakang
  const result = data.value * 2;

  // Kirim hasil kembali ke thread utama
  self.postMessage({ result: result });
};

console.log('Module Worker diinisialisasi.');

            

              
                Copy
              
            
          

            
// main.js

// Periksa apakah Module Workers didukung
if (window.Worker) {
  // Buat Module Worker baru
  // Catatan: Jalur harus mengarah ke file modul (seringkali dengan ekstensi .js)
  const myWorker = new Worker('./worker.js', { type: 'module' });

  // Dengarkan pesan dari pekerja
  myWorker.onmessage = function(event) {
    console.log('Pesan diterima dari pekerja:', event.data);
  };

  // Kirim pesan ke pekerja
  myWorker.postMessage({ value: 10 });

  // Anda juga dapat menangani kesalahan
  myWorker.onerror = function(error) {
    console.error('Kesalahan pekerja:', error);
  };
} else {
  console.log('Browser Anda tidak mendukung Web Workers.');
}

            

              
                Copy
              
            
          

            
// worker.js

let taskQueue = [];
let isProcessing = false;

async function processTask(task) {
  console.log(`Memproses tugas: ${task.type}`);
  // Simulasikan operasi yang membutuhkan komputasi intensif
  await new Promise(resolve => setTimeout(resolve, task.duration || 1000));
  return `Tugas ${task.type} selesai.`;
}

async function runQueue() {
  if (isProcessing || taskQueue.length === 0) {
    return;
  }

  isProcessing = true;
  const currentTask = taskQueue.shift();

  try {
    const result = await processTask(currentTask);
    self.postMessage({ status: 'success', taskId: currentTask.id, result: result });
  } catch (error) {
    self.postMessage({ status: 'error', taskId: currentTask.id, error: error.message });
  } finally {
    isProcessing = false;
    runQueue(); // Proses tugas berikutnya
  }
}

self.onmessage = function(event) {
  const { type, data, taskId } = event.data;

  if (type === 'addTask') {
    taskQueue.push({ id: taskId, ...data });
    runQueue();
  } else if (type === 'processAll') {
    // Segera coba untuk memproses semua tugas yang diantrekan
    runQueue();
  }
};

console.log('Task Queue Worker diinisialisasi.');

            

              
                Copy
              
            
          

            
// main.js

if (window.Worker) {
  const taskWorker = new Worker('./worker.js', { type: 'module' });
  let taskIdCounter = 0;

  taskWorker.onmessage = function(event) {
    console.log('Pesan pekerja:', event.data);
    if (event.data.status === 'success') {
      // Tangani penyelesaian tugas yang berhasil
      console.log(`Tugas ${event.data.taskId} selesai dengan hasil: ${event.data.result}`);
    } else if (event.data.status === 'error') {
      // Tangani kesalahan tugas
      console.error(`Tugas ${event.data.taskId} gagal: ${event.data.error}`);
    }
  };

  function addTaskToWorker(taskData) {
    const taskId = ++taskIdCounter;
    taskWorker.postMessage({ type: 'addTask', data: taskData, taskId: taskId });
    console.log(`Menambahkan tugas ${taskId} ke antrian.`);
    return taskId;
  }

  // Contoh penggunaan: Tambahkan beberapa tugas
  addTaskToWorker({ type: 'image_resize', duration: 1500 });
  addTaskToWorker({ type: 'data_fetch', duration: 2000 });
  addTaskToWorker({ type: 'data_process', duration: 1200 });

  // Opsional picu pemrosesan jika diperlukan (misalnya, pada klik tombol)
  // taskWorker.postMessage({ type: 'processAll' });

} else {
  console.log('Web Workers tidak didukung di browser ini.');
}

            

              
                Copy
              
            
          

            
// data-analyzer.js

export function aggregateData(data) {
  console.log('Mengagregasi data di pekerja...');
  // Simulasikan agregasi yang kompleks
  let sum = 0;
  for (let i = 0; i < data.length; i++) {
    sum += data[i];
    // Perkenalkan penundaan kecil untuk mensimulasikan komputasi
    // Dalam skenario nyata, ini akan menjadi komputasi yang sebenarnya
    for(let j = 0; j < 1000; j++) { /* delay */ }
  }
  return { total: sum, count: data.length };
}

            

              
                Copy
              
            
          

            
// analyticsWorker.js

import { aggregateData } from './data-analyzer.js';

self.onmessage = function(event) {
  const { dataset } = event.data;
  if (!dataset) {
    self.postMessage({ status: 'error', message: 'Tidak ada dataset yang disediakan' });
    return;
  }

  try {
    const result = aggregateData(dataset);
    self.postMessage({ status: 'success', result: result });
  } catch (error) {
    self.postMessage({ status: 'error', message: error.message });
  }
};

console.log('Analytics Worker diinisialisasi.');

            

              
                Copy
              
            
          

            
// main.js

if (window.Worker) {
  const analyticsWorker = new Worker('./analyticsWorker.js', { type: 'module' });

  analyticsWorker.onmessage = function(event) {
    console.log('Hasil Analitik:', event.data);
    if (event.data.status === 'success') {
      document.getElementById('results').innerText = `Total: ${event.data.result.total}, Hitung: ${event.data.result.count}`;
    } else {
      document.getElementById('results').innerText = `Kesalahan: ${event.data.message}`;
    }
  };

  // Siapkan dataset besar (disimulasikan)
  const largeDataset = Array.from({ length: 10000 }, (_, i) => i + 1);

  // Kirim data ke pekerja untuk diproses
  analyticsWorker.postMessage({ dataset: largeDataset });

} else {
  console.log('Web Workers tidak didukung.');
}

            

              
                Copy
              
            
          

            
<div id="results">Memproses data...</div>

            

              
                Copy
              
            
          

            
// cacheWorker.js

let cache = {};
let websocket = null;

function setupWebSocket() {
  // Ganti dengan titik akhir WebSocket Anda yang sebenarnya
  const wsUrl = 'wss://your-realtime-api.example.com/data';
  websocket = new WebSocket(wsUrl);

  websocket.onopen = () => {
    console.log('WebSocket terhubung.');
    // Minta data awal atau langganan
    websocket.send(JSON.stringify({ action: 'subscribe', topic: 'updates' }));
  };

  websocket.onmessage = (event) => {
    try {
      const message = JSON.parse(event.data);
      console.log('Pesan WS diterima:', message);
      if (message.type === 'update') {
        cache[message.key] = message.value;
        // Beri tahu thread utama tentang cache yang diperbarui
        self.postMessage({ type: 'cache_update', key: message.key, value: message.value });
      }
    } catch (e) {
      console.error('Gagal mengurai pesan WebSocket:', e);
    }
  };

  websocket.onerror = (error) => {
    console.error('Kesalahan WebSocket:', error);
    // Coba sambungkan kembali setelah penundaan
    setTimeout(setupWebSocket, 5000);
  };

  websocket.onclose = () => {
    console.log('WebSocket terputus. Menyambung kembali...');
    setTimeout(setupWebSocket, 5000);
  };
}

self.onmessage = function(event) {
  const { type, data, key } = event.data;

  if (type === 'init') {
    // Potensi ambil data awal dari API jika WS belum siap
    // Untuk kesederhanaan, kami mengandalkan WS di sini.
    setupWebSocket();
  } else if (type === 'get') {
    const cachedValue = cache[key];
    self.postMessage({ type: 'cache_response', key: key, value: cachedValue });
  } else if (type === 'set') {
    cache[key] = data;
    self.postMessage({ type: 'cache_update', key: key, value: data });
    // Opsional, kirim pembaruan ke server jika diperlukan
    if (websocket && websocket.readyState === WebSocket.OPEN) {
      websocket.send(JSON.stringify({ action: 'update', key: key, value: data }));
    }
  }
};

console.log('Cache Worker diinisialisasi.');

// Opsional: Tambahkan logika pembersihan jika pekerja dihentikan
self.onclose = () => {
  if (websocket) {
    websocket.close();
  }
};

            

              
                Copy
              
            
          

            
// main.js

if (window.Worker) {
  const cacheWorker = new Worker('./cacheWorker.js', { type: 'module' });

  cacheWorker.onmessage = function(event) {
    console.log('Pesan pekerja cache:', event.data);
    if (event.data.type === 'cache_update') {
      console.log(`Cache diperbarui untuk kunci: ${event.data.key}`);
      // Perbarui elemen UI jika perlu
    }
  };

  // Inisialisasi pekerja dan koneksi WebSocket
  cacheWorker.postMessage({ type: 'init' });

  // Nanti, minta data yang di-cache
  setTimeout(() => {
    cacheWorker.postMessage({ type: 'get', key: 'userProfile' });
  }, 3000); // Tunggu sebentar untuk sinkronisasi data awal

  // Untuk menetapkan nilai
  setTimeout(() => {
    cacheWorker.postMessage({ type: 'set', key: 'userSettings', data: { theme: 'dark' } });
  }, 5000);

} else {
  console.log('Web Workers tidak didukung.');
}

            

              
                Copy
              
            
          

            
// imageProcessorWorker.js

let imageProcessorModule = null;

async function initializeWasm() {
  try {
    // Impor modul Wasm secara dinamis
    // Jalur './image_processor.wasm' perlu diakses.
    // Anda mungkin perlu mengkonfigurasi alat build Anda untuk menangani impor Wasm.
    const response = await fetch('./image_processor.wasm');
    const buffer = await response.arrayBuffer();
    const module = await WebAssembly.instantiate(buffer, {
      // Impor fungsi host atau modul yang diperlukan di sini
      env: {
        log: (value) => console.log('Log Wasm:', value),
        // Contoh: Melewati fungsi dari pekerja ke Wasm
        // Ini rumit, seringkali data dilewatkan melalui memori bersama (ArrayBuffer)
      }
    });
    imageProcessorModule = module.instance.exports;
    console.log('Modul WebAssembly dimuat dan diinstansiasi.');
    self.postMessage({ status: 'wasm_ready' });
  } catch (error) {
    console.error('Kesalahan memuat atau menginstansiasi Wasm:', error);
    self.postMessage({ status: 'wasm_error', message: error.message });
  }
}

self.onmessage = async function(event) {
  const { type, imageData, width, height } = event.data;

  if (type === 'process_image') {
    if (!imageProcessorModule) {
      self.postMessage({ status: 'error', message: 'Modul Wasm belum siap.' });
      return;
    }

    try {
      // Dengan asumsi fungsi Wasm mengharapkan penunjuk ke data gambar dan dimensi
      // Ini memerlukan manajemen memori yang hati-hati dengan Wasm.
      // Pola umum adalah mengalokasikan memori di Wasm, menyalin data, memproses, kemudian menyalin kembali.

      // Untuk kesederhanaan, mari kita asumsikan imageProcessorModule.process menerima byte gambar mentah
      // dan mengembalikan byte yang diproses.
      // Dalam skenario nyata, Anda akan menggunakan SharedArrayBuffer atau meneruskan ArrayBuffer.

      const processedImageData = imageProcessorModule.process(imageData, width, height);

      self.postMessage({ status: 'success', processedImageData: processedImageData });
    } catch (error) {
      console.error('Kesalahan pemrosesan gambar Wasm:', error);
      self.postMessage({ status: 'error', message: error.message });
    }
  }
};

// Inisialisasi Wasm saat pekerja dimulai
initializeWasm();

            

              
                Copy
              
            
          

            
// main.js

if (window.Worker) {
  const imageWorker = new Worker('./imageProcessorWorker.js', { type: 'module' });
  let isWasmReady = false;

  imageWorker.onmessage = function(event) {
    console.log('Pesan pekerja gambar:', event.data);
    if (event.data.status === 'wasm_ready') {
      isWasmReady = true;
      console.log('Pemrosesan gambar siap.');
      // Sekarang Anda dapat mengirim gambar untuk diproses
    } else if (event.data.status === 'success') {
      console.log('Gambar berhasil diproses.');
      // Tampilkan gambar yang diproses (event.data.processedImageData)
    } else if (event.data.status === 'error') {
      console.error('Pemrosesan gambar gagal:', event.data.message);
    }
  };

  // Contoh: Dengan asumsi Anda memiliki file gambar untuk diproses
  // Dapatkan data gambar (misalnya, sebagai ArrayBuffer)
  fetch('./sample_image.png')
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => {
      // Anda biasanya akan mengekstrak data gambar, lebar, tinggi di sini
      // Untuk contoh ini, mari kita simulasikan data
      const dummyImageData = new Uint8Array(1000);
      const imageWidth = 10;
      const imageHeight = 10;

      // Tunggu hingga modul Wasm siap sebelum mengirim data
      const sendImage = () => {
        if (isWasmReady) {
          imageWorker.postMessage({
            type: 'process_image',
            imageData: dummyImageData, // Kirim sebagai ArrayBuffer atau Uint8Array
            width: imageWidth,
            height: imageHeight
          });
        } else {
          setTimeout(sendImage, 100);
        }
      };
      sendImage();
    })
    .catch(error => {
      console.error('Kesalahan mengambil gambar:', error);
    });

} else {
  console.log('Web Workers tidak didukung.');
}

            

              
                Copy
              
            
          

            
// workerPool.js

// Simulasikan tugas yang membutuhkan waktu
function performComplexCalculation(input) {
  let result = 0;
  for (let i = 0; i < 1e7; i++) {
    result += Math.sin(input * i) * Math.cos(input / i);
  }
  return result;
}

self.onmessage = function(event) {
  const { taskInput, taskId } = event.data;
  console.log(`Pekerja ${self.name || ''} memproses tugas ${taskId}`);
  try {
    const result = performComplexCalculation(taskInput);
    self.postMessage({ status: 'success', result: result, taskId: taskId });
  } catch (error) {
    self.postMessage({ status: 'error', error: error.message, taskId: taskId });
  }
};

console.log('Anggota kumpulan pekerja diinisialisasi.');

            

              
                Copy
              
            
          

            
// main.js

const MAX_WORKERS = navigator.hardwareConcurrency || 4; // Gunakan inti yang tersedia, default ke 4
let workers = [];
let taskQueue = [];
let availableWorkers = [];

function initializeWorkerPool() {
  for (let i = 0; i < MAX_WORKERS; i++) {
    const worker = new Worker('./workerPool.js', { type: 'module' });
    worker.name = `Worker-${i}`;
    worker.isBusy = false;

    worker.onmessage = function(event) {
      console.log(`Pesan dari ${worker.name}:`, event.data);
      if (event.data.status === 'success' || event.data.status === 'error') {
        // Tugas selesai, tandai pekerja sebagai tersedia
        worker.isBusy = false;
        availableWorkers.push(worker);
        // Proses tugas berikutnya jika ada
        processNextTask();
      }
    };

    worker.onerror = function(error) {
      console.error(`Kesalahan di ${worker.name}:`, error);
      worker.isBusy = false;
      availableWorkers.push(worker);
      processNextTask(); // Coba pulihkan
    };

    workers.push(worker);
    availableWorkers.push(worker);
  }
  console.log(`Kumpulan pekerja diinisialisasi dengan ${MAX_WORKERS} pekerja.`);
}

function addTask(taskInput) {
  taskQueue.push({ input: taskInput, id: Date.now() + Math.random() });
  processNextTask();
}

function processNextTask() {
  if (taskQueue.length === 0 || availableWorkers.length === 0) {
    return;
  }

  const worker = availableWorkers.shift();
  const task = taskQueue.shift();

  worker.isBusy = true;
  console.log(`Menugaskan tugas ${task.id} ke ${worker.name}`);
  worker.postMessage({ taskInput: task.input, taskId: task.id });
}

// Eksekusi utama
if (window.Worker) {
  initializeWorkerPool();

  // Tambahkan tugas ke kumpulan
  for (let i = 0; i < 20; i++) {
    addTask(i * 0.1);
  }

} else {
  console.log('Web Workers tidak didukung.');
}

            

              
                Copy