WebWorker Simplificado

Este módulo proporciona una interfaz simplificada para trabajar con Web Workers en JavaScript, facilitando la comunicación bidireccional y el manejo de eventos.

Instalación

npm install mod-web-worker

Cómo funciona la sintaxis

Este módulo utiliza una sintaxis intuitiva para simplificar el uso de Web Workers. Aquí se explica cómo funciona:

En el hilo principal

1. Creación del Worker:

   const worker = new WebWorker('./worker.js');

   Esto crea una nueva instancia del Worker, cargando el script especificado.

2. Envío de mensajes:

   const response = await worker.calling.eventName(data, [transferable]);

   • eventName: El nombre del evento que quieres invocar en el Worker.
   • data: Los datos que quieres enviar al Worker.
   • [transferable]: Opcional. Objetos transferibles como Canvas.

3. Manejo de respuestas:

   // Para una respuesta única
   console.log(response.value);
   
   // Para múltiples respuestas
   response.event((data) => {
   console.log(data);
   });

En el Worker

1. Inicialización:

   const workerService = new WebWorker();

2. Definición de manejadores de eventos:

   workerService.event.eventName(function(data, [transferable]) {
       // Lógica del evento
       return responseData;
   });

   • eventName: Debe coincidir con el nombre usado en el hilo principal.
   • data: Los datos recibidos del hilo principal.
   • [transferable]: Opcional. Objetos transferibles como Canvas.

3. Envío de respuestas adicionales:

   const sendResponse = workerService.event.eventName((data) => {
   // Lógica inicial
   });
   
   // Más tarde...
   sendResponse(additionalData);

Ejemplo de uso

En el hilo principal (main.js)

import WebWorker from 'mod-web-worker';
//import WebWorker from 'https://cdn.jsdelivr.net/npm/mod-web-worker'

async function main() {
    // Crear una instancia del worker
    const worker = new WebWorker('./worker.js');

    // Enviar un mensaje al worker y esperar la respuesta
    const response = await worker.calling.test({ value: 'Hello from main!' });
    console.log(response.value);

    // Manejar múltiples eventos del worker
    response.event((data) => {
        console.log(data.value);
    });

    // Usar con un canvas
    const canvas = document.getElementById('myCanvas');
    const canvasResponse = await worker.calling.drawOnCanvas({ text: 'Hello!' }, canvas);
}

main();

En el Worker (worker.js)

import WebWorker from 'mod-web-worker';
//import WebWorker from 'https://cdn.jsdelivr.net/npm/mod-web-worker'

function workerFunction() {
    const workerService = new WebWorker();

    // Manejar un evento simple
    workerService.event.test(function(data) {
        console.log(data.value);
        return { value: 'Hello from worker!' };
    });

    // Manejar un evento con canvas
    workerService.event.drawOnCanvas(function(data, canvas) {
        const ctx = canvas.getContext('2d');
        ctx.font = "30px Arial";
        ctx.fillText(data.text, 10, 50);
        
        return { status: 'Canvas updated' };
    });

    // Enviar múltiples respuestas
    setTimeout(() => {
        workerService.event.test({ value: 'Delayed message from worker' });
    }, 2000);
}

workerFunction();

Características

Comunicación bidireccional simplificada entre el hilo principal y el worker. Soporte para transferencia de control de canvas al worker. Manejo de eventos múltiples. Respuestas asíncronas y flujos de eventos continuos.

Requisitos Este módulo utiliza características modernas de JavaScript como Promesas, Proxies y módulos ES6. Se recomienda usar un bundler como Webpack, Rollup o Vite para la compatibilidad del navegador. Contribuciones Las contribuciones son bienvenidas. Por favor, abra un issue o envíe un pull request con sus sugerencias. Licencia MIT

Este README proporciona una visión general del módulo, instrucciones de instalación, ejemplos de uso tanto en el hilo principal como en el worker, una lista de características clave, requisitos del sistema y información sobre contribuciones y licencia.