66-Trabajadores WEB en HTML

Jorge Catalao octubre 31, 2024
HTML




HTML Web Workers API

La HTML Web Workers API proporciona una forma de ejecutar scripts en segundo plano en el navegador. Esto permite realizar tareas que requieren mucho tiempo, como cálculos complejos o el procesamiento de datos, sin bloquear la interfaz de usuario. Los trabajadores web se ejecutan en un hilo separado y se comunican con la página principal a través de mensajes.

La ventaja de utilizar trabajadores web es que pueden mejorar la eficiencia y la experiencia del usuario, ya que permiten que las aplicaciones web sigan respondiendo mientras se llevan a cabo operaciones intensivas.

La API de trabajadores web es especialmente útil en aplicaciones que requieren un procesamiento intensivo, como juegos, aplicaciones de gráficos, o aplicaciones que manipulan grandes volúmenes de datos.

En resumen, la HTML Web Workers API es una herramienta poderosa para mejorar el rendimiento de las aplicaciones web al permitir la ejecución de tareas en segundo plano, mejorando así la experiencia del usuario.



...
¿Qué es un trabajador web?

Un trabajador web es un script que se ejecuta en un hilo separado del hilo principal de la aplicación web. Esto significa que un trabajador puede realizar tareas en segundo plano sin interferir con la experiencia del usuario en la interfaz de la aplicación.

Los trabajadores web son especialmente útiles para operaciones que requieren mucho tiempo de CPU, como cálculos matemáticos complejos, procesamiento de imágenes o manipulación de datos. Al delegar estas tareas a un trabajador, la interfaz de usuario sigue siendo receptiva y no se congela mientras se completan estas operaciones.

La comunicación entre el hilo principal y el trabajador web se realiza mediante un sistema de mensajería. El hilo principal puede enviar mensajes al trabajador y recibir respuestas, lo que permite que ambos se sincronicen sin necesidad de compartir la memoria directamente.

En resumen, un trabajador web permite a los desarrolladores web ejecutar scripts de manera eficiente en segundo plano, mejorando el rendimiento de las aplicaciones y la experiencia del usuario.



Soporte del navegador

La compatibilidad de la HTML Web Workers API puede variar entre diferentes navegadores. A continuación se presenta una tabla que muestra el soporte de los principales navegadores para los trabajadores web:

Navegador Versión de soporte Comentarios
Chrome 5.0+ Soporte completo desde la versión 5
Firefox 3.5+ Soporte completo desde la versión 3.5
Safari 5.0+ Soporte completo desde la versión 5
Edge 12.0+ Soporte completo desde la versión 12
Internet Explorer No soportado La API de trabajadores web no está soportada en IE
Opera 11.6+ Soporte completo desde la versión 11.6

La mayoría de los navegadores modernos ofrecen soporte completo para la API de trabajadores web, lo que permite a los desarrolladores aprovechar esta funcionalidad en sus aplicaciones.



HTML Web Workers Ejemplo

A continuación se presenta un ejemplo práctico de cómo utilizar HTML Web Workers en una aplicación web. Este ejemplo incluye un archivo de script para el trabajador y un archivo HTML que interactúa con él.

Primero, creamos un archivo llamado worker.js, que contiene el código del trabajador. Este trabajador recibirá un número y lo multiplicará por dos: 


self.onmessage = function(event) {
    const result = event.data * 2; // Multiplicar el número recibido
    postMessage(result); // Enviar el resultado de vuelta
}

Luego, en nuestro archivo HTML principal, inicializamos el trabajador y le enviamos un número. El código podría verse de la siguiente manera: 


<script>
    const worker = new Worker('worker.js');
    worker.onmessage = function(event) {
        console.log('Resultado:', event.data); // Mostrar el resultado en la consola
    }
    worker.postMessage(10); // Enviar el número al trabajador
</script>

En este ejemplo, cuando se envía el número 10 al trabajador, este lo multiplica por 2 y envía el resultado de vuelta al hilo principal, que lo imprime en la consola. Este enfoque permite que la interfaz de usuario permanezca receptiva mientras se realiza el cálculo.


Ejemplo Visual 1: Multiplicación

En este ejemplo, al hacer clic en el botón, se envía el número 10 al trabajador web, que lo multiplica por 2 y muestra el resultado en la interfaz.

Resultado: Esperando...


Código del ejemplo 1: Multiplicación 

<!-- Código del trabajador web (worker.js) -->
self.onmessage = function(event) {
    const result = event.data * 2; // Multiplicar el número recibido
    postMessage(result); // Enviar el resultado de vuelta
}

<!-- Código en el archivo HTML principal -->
<script>
    const worker = new Worker('worker.js');
    worker.onmessage = function(event) {
        console.log('Resultado:', event.data); // Mostrar el resultado en la consola
    }
    worker.postMessage(10); // Enviar el número al trabajador
</script>

Ejemplo Visual 2: Incremento

Count numbers: 0

Código del ejemplo visual 2: Incremento 

<!-- Ejemplo Visual 2: Incremento -->
<div class="container mt-4">
    <div class="bg-primary p-3 border rounded mt-3">
        <h3 style="font-family: Georgia; font-size: 30px">Ejemplo Visual 2: Incremento</h3>
        <div class="bg-white p-3">
            <p>Count numbers: <output id="result2">0</output></p>
            <button onclick="startWorker2()">Iniciar incremento</button>
            <button onclick="stopWorker2()">Detener incremento</button>

            <script>
                var w2;
                var count2 = 0; // Definición de la variable al inicio

                function startWorker2() {
                    if (typeof (Worker) !== "undefined") {
                        if (typeof (w2) == "undefined") {
                            const workerScript2 = `
                                let count = 0;
                                setInterval(() => {
                                    count++;
                                    postMessage(count);
                                }, 1000); // Incrementa cada segundo
                            `;
                            const blob2 = new Blob([workerScript2], { type: 'application/javascript' });
                            w2 = new Worker(URL.createObjectURL(blob2));
                        }
                        w2.onmessage = function (event) {
                            document.getElementById("result2").innerHTML = event.data; // Mostrar el resultado
                        };
                    } else {
                        document.getElementById("result2").innerHTML = "Lo siento, tu navegador no soporta Web Workers...";
                    }
                }

                function stopWorker2() {
                    if (w2) {
                        w2.terminate();
                        w2 = undefined;
                        document.getElementById("result2").innerHTML = "Detenido"; // Mensaje de parada
                    }
                }
            </script>
        </div>
    </div>
</div>


Comprobar soporte web de los trabajadores

Antes de implementar un trabajador web en tu aplicación, es fundamental verificar si el navegador del usuario lo soporta. Los trabajadores web son una característica de HTML5 que permite ejecutar scripts en segundo plano, mejorando el rendimiento de las aplicaciones web.

Para comprobar si los trabajadores web son soportados, puedes utilizar una simple verificación en JavaScript. Aquí hay un ejemplo de cómo hacerlo: 

if (typeof(Worker) !== "undefined") {
    // Soporta trabajadores web
    console.log("Tu navegador soporta trabajadores web.");
} else {
    // No soporta trabajadores web
    console.log("Lo siento, tu navegador no soporta trabajadores web.");
}

En este fragmento de código, verificamos si el objeto Worker está definido. Si lo está, significa que los trabajadores web son compatibles con el navegador. En caso contrario, se puede informar al usuario que su navegador no soporta esta funcionalidad.



Crear un archivo web de trabajo

Para utilizar trabajadores web, es necesario crear un archivo JavaScript que contenga el código que se ejecutará en segundo plano. Este archivo se denomina archivo de trabajador y debe ser separado del archivo principal de la aplicación. La estructura de un archivo de trabajador web es bastante simple: 

self.onmessage = function(event) {
    // Código para ejecutar cuando se recibe un mensaje
    const data = event.data;
    // Procesar datos
    postMessage(result); // Enviar el resultado de vuelta
};

En este ejemplo, se define un manejador para el evento onmessage, que recibe datos del hilo principal, procesa la información y devuelve el resultado.



Crear un objeto de trabajo web

Una vez que tienes tu archivo de trabajador web creado, el siguiente paso es crear un objeto de trabajador en tu archivo JavaScript principal. Esto se hace utilizando el constructor Worker de la siguiente manera: 

const worker = new Worker('worker.js'); // 'worker.js' es el archivo del trabajador

Con este código, se instancia un nuevo objeto trabajador, que comenzará a ejecutar el código definido en 'worker.js'. Puedes enviarle mensajes utilizando el método postMessage.



Terminar un trabajador web

Cuando ya no necesites un trabajador web, puedes finalizarlo utilizando el método terminate(). Esto libera los recursos utilizados por el trabajador. La forma de hacerlo es: 

worker.terminate(); // Finaliza el trabajador

Al llamar a terminate(), el trabajador dejará de ejecutarse inmediatamente y se liberarán sus recursos. Es buena práctica terminar los trabajadores que ya no se utilizan para evitar posibles fugas de memoria.



Reutilizar el trabajador web

Reutilizar un trabajador web puede ser beneficioso para mejorar el rendimiento de la aplicación. En lugar de crear un nuevo trabajador cada vez que lo necesites, puedes utilizar el mismo objeto de trabajador para diferentes tareas.

Esto se hace simplemente enviando diferentes mensajes al mismo trabajador, que puede manejar múltiples tareas dependiendo de la lógica que hayas implementado en el archivo del trabajador. 

worker.onmessage = function(event) {
    // Lógica para manejar diferentes tipos de mensajes
    if (event.data.type === 'multiply') {
        postMessage(event.data.value * 2);
    } else if (event.data.type === 'add') {
        postMessage(event.data.value + 2);
    }
};

// Ejemplo de reutilización
worker.postMessage({ type: 'multiply', value: 10 });
worker.postMessage({ type: 'add', value: 5 });

Al reutilizar un trabajador, asegúrate de manejar correctamente los diferentes tipos de mensajes para evitar errores.



Código de ejemplo de trabajo web completo

A continuación, se presenta un código de ejemplo que muestra cómo implementar un trabajador web completo. En este caso, el trabajador realiza diferentes operaciones según los mensajes que recibe. 

// Archivo worker.js
self.onmessage = function(event) {
    const { type, value } = event.data;
    let result;

    switch (type) {
        case 'multiply':
            result = value * 2;
            break;
        case 'add':
            result = value + 2;
            break;
    }
    postMessage(result);
};

// Archivo principal
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
    console.log('Resultado:', event.data);
};

worker.postMessage({ type: 'multiply', value: 10 });
worker.postMessage({ type: 'add', value: 5 });

En este ejemplo, el trabajador puede multiplicar o sumar valores según los mensajes que recibe desde el hilo principal.



Trabajadores web y el DOM

Es importante entender que los trabajadores web no tienen acceso directo al DOM del documento. Esto se debe a que están diseñados para ejecutar código en segundo plano y evitar bloquear la interfaz de usuario.

Sin embargo, los trabajadores pueden comunicarse con el hilo principal mediante el uso de postMessage para enviar datos de vuelta y, luego, manipular el DOM desde el hilo principal. 

// En el archivo worker.js
self.onmessage = function(event) {
    const data = event.data;
    // Procesar datos
    postMessage(processedData);
};

// En el archivo principal
worker.onmessage = function(event) {
    document.getElementById('result').innerText = event.data; // Actualizar el DOM
};

Esta separación garantiza que la interfaz de usuario se mantenga receptiva mientras se realizan operaciones complejas en segundo plano.







Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias