JavaScript introducción a Web Workers | Programador Web Valencia

JavaScript introducción a Web Workers

3 minutos

Web Workers

Los Web Workers son la mejor manera de ejecutar funciones costosas que no requieran de la UI (interfaz gráfica). Con los Workers, nuestros usuarios podrán seguir navegando mientras un script trabaja de fondo. Normalmente será una funcionalidad que requiere mucho tiempo para completarse, pero no deseas bloquear la experiencia del cliente.

Una gran ventaja de usar Web Workers es que pueden avisarnos de que han terminado, devolviéndonos el resultado en cualquier sitio donde queramos recibirlo. Y no solo eso, los Workers pueden hablar entre ellos dándose tareas u otras instrucciones. Por ello pueden ser utilizados para realizar labores donde existen esperas como un fetch a una API.

A continuación me gustaría enseñarte como definir un Worker, enviar un dato, ejecutar tareas y devuelver por medio de un evento el resultado final. En otras palabras, una introducción sencilla a Web Workers.

El objetivo del tutorial será dar un string con una serie de números (por ejemplo "20 13 42 32 8") y que imprima en HTML un array de números enteros que estén ordenados ([8, 13, 20, 32, 42]).

Empezaremos declarando el HTML.

<!doctype html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <title>Ejemplo Web Worker</title>
        <!-- JavaScript -->
        <script src="main.js" defer></script>
        <script src="worker.js" defer></script>
    </head>
    <body>
        <input type="text" id="lista-numeros">
	    <output id="numeros-ordenados"></output>
    </body>
</html>
  • <script src="main.js" defer></script> lo utilizaremos como hilo principal, para importar la lógica JavaScript que invocará el Worker y gestionar el DOM.
  • <script src="worker.js" defer></script> contendrá toda la lógica del Worker.
  • <input type="text" id="lista-numeros"> será el campo de texto que usaremos para escribir la lista de números.
  • <output id="numeros-ordenados"></output> es el lugar donde renderizaremos la lista de números que nos devuelva el Worker.

Ahora vamos a centrarnos en declarar el Worker. Crearemos un fichero llamado worker.js e insertamos el siguiente código.

onmessage = function(event) {
    // Recogemos el valor enviado por el hilo principal
    const valorRecibido = event.data;
    // Procesamos los datos recibidos.
    // En el ejemplo se convierte el string en una lista
    // de enteros ordenados de menor a mayor
    const listaOrdenada = valorRecibido.split(" ")
	  .map((num) => parseInt(num))
	  .sort((a, b) => a > b);
    // Devolvemos el resultado al hilo principal
    postMessage(listaOrdenada);
};

No debe tener nada más, tan solo una función denominada onmessage. Dentro de event.data estará la información enviada por el hilo principal y para comunicar el resultado usaremos postMessage().

Por último declaramos el hilo principal, o la lógica que gestiona el DOM. Creamos un archivo llamado main.js con el siguiente código.

// VARIABLES

// Creamos un nuevo Worker a partir del fichero "worker.js"
const myWorker = new Worker('worker.js');
// Capturamos el <input> y el <output>
const inputDOM = document.querySelector("#lista-numeros");
const outputDOM = document.querySelector("#numeros-ordenados");

// FUNCIONES

function ordenarNumeros() {
    // Se envía el contenido del <input> al Worker para que lo procese
    myWorker.postMessage(inputDOM.value);
}

function renderizarNumeros(msg) {
    // Imprimimos en <output> el mensaje del Worker
    outputDOM.textContent = msg.data;
}

// EVENTOS

// Cuando cambie el valor del <input>, se ejecutará la función "ordenarNumeros"
inputDOM.addEventListener("input", ordenarNumeros);

// Cuando termine el Worker nos avisará por medio el evento "message" en myWorker
myWorker.addEventListener("message", renderizarNumeros);

Y ya estaría todo el código necesario.

Para que funcione necesitarás utilizar un servidor web ya que un main.js importa worker.js. En otras palabras: si haces doble clic sobre index.html no funcionará. Te recomiendo Nginx. Si usas Docker puedes levantarlo con un solo comando. Sitúate en la carpeta donde están tus 3 archivos y ejecuta:

docker run --rm --network host --name web.localhost -v $(pwd):/usr/share/nginx/html:ro -p 80:80 nginx

Después abre en tu navegador http://web.localhost y escribe todos los números que quieras en el <input>.

Solo ha sido un acercamiento. Los Web Workers son profundos y lleno de posibilidades que merecen la pena conocer.

Espero que te sea de ayuda.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...