trisquel

Aprende JavaScript con ejemplos (XXIX). Web workers.

Un webworker es un proceso JavaScript que se ejecuta en segundo plano de tal manera que la página web no se vea penalizada ni ralentizada por tener un proceso ejecutándose de forma permanente.
Se pueden utilizar webworkers para analizar los patrones de navegación o para realizar llamadas asíncronas a un servicio de forma transparente al usuario.
Para ejecutar un webworker el navegador tiene que soportar HTML5 y tiene que ser relativamente una versión reciente.

A continuación se muestra un ejemplo de webworker. Se ha creado el webworker como tiene que ser en un fichero aparte llamado currito.js

El fichero HTML principal tendrá el siguiente aspecto:

<!DOCTYPE html>
<html>
<body>

<p>Secuencia de Fibonacci: <output id=”result”></output></p>
<button onclick=”startWorker()”>Start Worker</button>
<button onclick=”stopWorker()”>Stop Worker</button>

<p><strong>Note:</strong> Esto funciona en Firefox y Safari pero no en Chrome.</p>

<script>
var w;

function startWorker() {
if(typeof(Worker) !== “undefined”) {
if(typeof(w) == “undefined”) {
w = new Worker(“currito.js”);
}
w.onmessage = function(event) {
document.getElementById(“result”).innerHTML = event.data;
};
} else {
document.getElementById(“result”).innerHTML = “Fallo al ejecutar el web worker”;
}
}

function stopWorker() {
w.terminate();
w = undefined;
}
</script>

</body>
</html>

 

Como se puede observar hay un botón para iniciar el webworker y otro botón para pararlo.

El webworker se crea en la variable w siempre y cuando w tenga el tipo “undefined”.

Cuando se crea el webworker existe un modo de comunicación con la web host que es el paso de mensajes. Se pueden capturar los mensajes mediante un listener “w.onmessage = function(event)……”

El webworker puede enviar mensajes a la página web host mediante la función postMessage().

A continuación se puede ver el contenido del webworker:

 

var anterior = 0;
var actual = 1;
var secuencia = “”;

function temporizador() {
if (!anterior){
secuencia+=” “+actual;
}else{
secuencia+=” – “+actual;
}
postMessage(secuencia);
aux = anterior + actual;
anterior = actual;
actual = aux;
setTimeout(“temporizador()”,500);
}

temporizador();

Ejercicio propuesto:

Crea una página web con un webworker que inserte un valor en una lista desplegable (option) cada vez que el ratón pase por encima de una imagen.
Tendrás que investigar cómo se comunica una página web con su webworker.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>