Scribd
Cargar
7K vistas13 páginas

API WebWorkers

Este documento describe la API de WebWorkers en JavaScript. WebWorkers permiten ejecutar scripts en segundo plano para realizar operaciones intensivas sin bloquear la interfaz de usuario. Incluye ejemplos de cómo crear un worker, enviar y recibir mensajes, y manejar errores. También explica propiedades como onmessage y métodos como postMessage para comunicarse entre el hilo principal y los workers.

Cargado por

yurivazquezperez_425
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
7K vistas13 páginas

API WebWorkers

Este documento describe la API de WebWorkers en JavaScript. WebWorkers permiten ejecutar scripts en segundo plano para realizar operaciones intensivas sin bloquear la interfaz de usuario. Incluye ejemplos de cómo crear un worker, enviar y recibir mensajes, y manejar errores. También explica propiedades como onmessage y métodos como postMessage para comunicarse entre el hilo principal y los workers.

Cargado por

yurivazquezperez_425
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 13

API WebWorkers

Los “Web Workers”, permiten ejecutar la operación de un script en un segundo plano.


Esto permite ejecutar operaciones que requieren un consumo elevado de recursos en un hilo
separado, lo cual permite que el hilo principal se ejecute sin ser bloqueado o que se haga más
lento.

Un worker es un objeto del tipo “Worker”, el cual ejecuta un archivo JavaScript, el cual se
ejecuta en un contexto global diferente al actual del navegador. Este contexto está
representado por los objetos: DedicatedWorkerGlobalScope, para los worker dedicados y
SharedWorkerGlobalScope, para los worker compartidos.

El hilo worker puede realizar tares sin interferir en con la interfaz del usuario. Además de
realizar operaciones de entrada y salida usando el objeto XMLHttpRequest.

Propiedades

Las propiedades del objeto Worker son las siguientes:

Worker.onerror
Controlador de eventos que se llama cuando ocurre el evento error.

Sintaxis:
miWorker.onerror = function(evento) { ... };

Ejemplo:
var miWorker = new Worker('worker.js');
miWorker.onerror = function(evento) {
console.error(“Ha ocurrido un error con el worker!”);
}

Worker.onmessage
Controlador de eventos que se llama cuando se produce el mensaje. Estos eventos son del
tipo “MessageEvent” y se llaman cuando el padre del “Worker” recibe el mensaje.

Sintaxis:
miWorker. onmessage = function(evento) { ... };

1
Ejemplo

En el hilo principal

var miWorker = new Worker('worker.js');


miWorker.postMessage(25);

miWorker. onmessage = function(evento) {


console.log(evento.data); //Raíz de 25 = 5
};

En el worker (archivo worker.js)

onmessage = function(evento) {
let raiz = Math.sqrt(evento.data);
postMessage("Raiz de " +evento.data + " = " + raiz);
};

Worker.onmessageerror
Controlador de eventos que se llama cuando se activa evento tipo “messageerror”, ósea
cuando se recibe un mensaje que no se puede deserializar.

Sintaxis:
miWorker.onmessageerror = function(evento) { ... };

Ejemplo:
var miWorker = new Worker('worker.js');
miWorker. onmessageerror = function(evento) {
console.log (“Ha ocurrido un error con el worker!”);
}

2
Métodos

Los métodos del objeto Worker son:

Worker.terminate()
Termina inmediatamente el “worker”

Sintaxis:
miWorker.terminate();

Ejemplo:
var miWorker = new Worker('worker.js');
miWorker.terminate();

Worker. postMessage()
Se envía el mensaje al ámbito interno del “worker”.

Sintaxis:
worker.postMessage(mensaje, [transferencia]);

mensaje:
Objeto para entregar al worker. Puede ser cualquier valor u objeto JavaScript. Si se
omite se genera un error. Si no se desea enviar datos, se puede enviar “null” o “undefined”

transferencia:
Opcional, una matriz de objetos para transferir propiedades. Los objetos trasferibles
son instancias de clases como ArrayBuffer, MessagePort o ImageBitmap.

Ejemplo:

En el hilo principal

var miWorker = new Worker('worker.js');


miWorker.postMessage(25);

miWorker. onmessage = function(evento) {


console.log(evento.data); //Raíz de 25 = 5
};

En el worker (archivo worker.js)

onmessage = function(evento) {
let raiz = Math.sqrt(evento.data);

3
postMessage("Raiz de " +evento.data + " = " + raiz);
};

Ejercicios

Ejercicio 1

Sin utilizar “worker”.

En la carpeta de trabajo “javascript”, creamos una carpeta con el nombre “clase-10 api-
worker” y dentro un archivo llamado “prueba-worker.js”, otro “test.js” y uno llamado
“index.html”. En el archivo “index.html” copie el siguiente código:

Paso a paso
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Web Worker</title>
</head>
<body>

<script src="test.js"></script>
<h1>Hola mundo</h1>

</body>
</html>

Note, que primero se está llamando el archivo “test.js”, lo que significa que primero se va a
ejecutar todas sentencias JavaScript dentro de “test.js” y cuando termine sigue la ejecución del
código HTML (“<h1>Hola mundo<h1>”). Guarde el archivo “index.html”.

4
Guarde el archivo “index.html”. En el editor de código abra el archivo “test.js” y copie el
siguiente código:

Paso a paso
for (let i=0; i<10000000; i++){
console.log(i);
}

Guarde el archivo, abra la página en el navegador y abra la consola. Como se muestra en la


figura 1 El navegador queda bloqueado hasta que se termine de ejecutar todo el bucle del
archivo “test.js”.

Figura 1

Nota: para hacer el ejercicio utilizando “worker”, la página se tiene que correr desde un
servidor web. En el apéndice E, se explica cómo instalar un servidor web local.

5
Ejercicio 2

Utilizando un “worker”.

En el archivo “index.html” cambiamos la referencia al archivo “prueba-worker.js”, en


lugar del archivo “text.js”. El código queda de la siguiente forma:

Paso a paso
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Web Worker</title>
</head>
<body>

<script src="prueba-worker.js"></script>
<h1>Hola mundo<h1>

</body>
</html>

6
Guarde el archivo “index.html”. En el editor de código abra el archivo “prueba-
worker.js” y copie el siguiente código:

Paso a paso

var myWorker = new Worker("test.js");

En el archivo “prueba-worker.js”, se crea un objeto “Worker”, que se le pasa como


parámetro la URL del archivo “test.js”.

Guarde el archivo, abra la página en el navegador y abra la consola. Como se muestra en la


figura 2, el navegador ejecutó todo el código HTML y en segundo plano sigue ejecutando el
código del archivo “test.js”.

Figura 2

7
Ejercicio 3
En este ejercicio vamos a crear una aplicación para mostrar en pantalla todos los números
primos que existen, desde 0 hasta el total determinado por el usuario. La pantalla principal va a
tener una caja de entrada de información donde se va a digital el total de números a buscar y
un botón para iniciar la búsqueda. Para resolver el ejercicio vamos a utilizar “worker”.

En la carpeta de trabajo “javascript”, abrimos la carpeta “clase-10 api-worker” y dentro


creamos un archivo llamado “primo.js”. En el archivo “index.html” copie el siguiente código:

Paso a paso
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Web Worker</title>
</head>
<body>

<h1>Mostrar números primos</h1>


Cantidad de números:
<input id="numero_primo" type="text" value=100>
<button id="btn_primo">Buscar</button>
<p id="resultado_primo"></p>
<script src="prueba-worker.js"></script>

</body>
</html>

8
Guarde el archivo “index.html”. En el editor de código abra el archivo “prueba-
worker.js”, comente el código anterior y copie el siguiente:

Paso a paso
var numeroPrimo= document.getElementById("numero_primo");
var resultadoPrimo= document.getElementById("resultado_primo");
var btnPrimo= document.getElementById("btn_primo");
var miWorker;

btnPrimo.addEventListener("click", buscarPrimo, false);

function buscarPrimo(){
resultadoPrimo.innerText="";
if(miWorker !== undefined)
miWorker.terminate();

miWorker = new Worker("primo.js");


miWorker.postMessage(numeroPrimo.value);
miWorker.onmessage = function(evento){
resultadoPrimo.innerText +=evento.data + ' | ';
}

miWorker.onerror = function(event) {
console.error(“Ha ocurrido un error con el worker!”);
}

9
En el archivo “prueba-worker.js”, se crea una función con el nombre “buscarPrimo()”,
la cual se va a llamar cuando se presione el botón buscar de la página. Dentro de la función, lo
primero que se hace es verificar si existe el objeto “Worker”, en caso de existir se termina con
el método “terminate()”.

if(miWorker !== undefined)


miWorker.terminate();

Seguidamente se crea un objeto “Worker”, que se le pasa como parámetro la URL del
archivo “primo.js”.

miWorker = new Worker("primo.js");

Se inicia el “worker”, con el método “postMessage()” y se le pasa como parámetro el total


de números que se van a consultar.

miWorker.postMessage(numeroPrimo.value);

La propiedad “onmessage” de la interfaz de “worker”, representa el controlador de


eventos, que es una función que es llamada cuando se recibe el mensaje.

miWorker.onmessage = function(evento){
resultadoPrimo.innerText +=evento.data + ' | ';
}

Finalmente, con la propiedad “onerror”, creamos el controlador de eventos para capturar


los errores que puedan ocurrir.

10
miWorker.onerror = function(event) {
console.error(“Ha ocurrido un error con el worker!”);
}

Guarde el archivo “prueba-worker.js”. En el editor de código abra el archivo “primo.js”,


copie el siguiente:

Paso a paso
onmessage = function(evento){
Number.prototype.isPrime = function() {

for (let i=2; i < this; i++){


if (this % i == 0)
return false;
}
return this < 2 ? false : true;
};

for (let i=0; i<evento.data; i++){


if(Number(i).isPrime())
postMessage(i);
}
}

En el archivo “primo.js”, se recibe el mensaje en la función controladora de eventos,


representada por la propiedad “onmessage”, se realiza la operación y se responde con el
método “postMessage()”.

11
onmessage = function(evento){
….
postMessage(i);
}

Guarde el archivo, abra la página en el navegador, digite el número que dese y presione en
el botón buscar. En la pantalla se van listando los números que son primos como se muestra
en la figura 3. Para probar lo eficiente que es el trabajo con “worker”, digite un número bien
grande, 10 millones y presiones el botón buscar, cuando inicien a listarse los valores en el
navegador, digite 100 y presionen buscar, verán la búsqueda anterior de detiene y se realiza la
nueva búsqueda. Eso sería imposible si no se utiliza “worker”, la primera búsqueda de 10
millones tendría bloqueado el navegador.

Figura 3

12
Ejercicio de repaso
Basándose en el ejercicio 3, amplíe la funcionalidad de la aplicación, para además de mostrar
los números primos, también mostrar todos los números con raíz cuadrada exacta que existan
desde el 0 hasta el total determinado por el usuario.

Resuelva el ejercicio en el editor de su preferencia, en el recuadro copie el código.

13

También podría gustarte