Este documento explica cómo crear y utilizar web workers para realizar operaciones asíncronas en segundo plano. Describe cómo iniciar y detener un web worker, pasarle datos, configurar tiempos de espera e intervalos, y registrar oyentes de eventos. También cubre las limitaciones de los web workers, como su aislamiento del estado de la página y la falta de acceso directo al DOM.

1. Creando un proceso web worker
Danae Aguilar Guzmán
MCT, MS, MCTS, MCP
danaeaguilar@gmail.com

2. Contenido del Módulo
 Iniciando y deteniendo un web worker
 Pasando datos a un web worker
 Configurando timeouts e intervalos
 Registrando un oyente de eventos
 Limitaciones de un web worker

3. Web workers
Web Workers
 Permiten realizar operaciones asíncronas.
 Permiten la ejecución de un script en una
tarea de background.
 El worker puede enviar mensajes de cualquier
tipo que pueda ser un objeto serializado
 La interfaz de usuario se mantendrá
responsiva y no bloqueada.

4. Iniciando y deteniendo un web worker
Creando un Web Worker:
Iniciando el Web Worker:
Deteniendo el Web Worker:
var worker = new Worker('Scripts/miWork.js');
worker.terminate();
worker.postMessage($('#mensage').val());

5. Iniciando y deteniendo un web worker
El script del Web Worker:
Suscribiéndose a los eventos:
self.onmessage = function (e) {
for (c in e.data) {
postMessage(e.data[c].toUpperCase());
}
}
worker.onmessage = function (e) {
$('#resultado').append(e.data + '<br />');
};
worker.onerror = function (e) {
$('#resultado').append('Error: ' + e.data + '<br />');
};

6. Pasando datos a un web worker
Pasando datos a un Web Worker:
Recibiendo datos:
worker.postMessage($('#mensage').val());
worker.onmessage = function (e) {
$('#resultado').append(e.data + '<br />');
};

7. Configurando timeouts e intervalos
Los Web Workers pueden usar timers:
 setTimeout()
 clearTimeout()
 setInterval()
 clearInterval()

8. Configurando timeouts e intervalos
Los Web Workers pueden usar timers:
var i = 0;
function incrementarContador() {
i = i + 1;
postMessage(i);
setTimeout("incrementarContador()", 500);
}
incrementarContador();

9. Registrando un oyente de eventos
Oyendo eventos de Web Workers:
worker.onmessage = function (e) {
$('#resultado').append(e.data + '<br />');
};
worker.onerror = function (e) {
$('#resultado').append('Error: ' + e.data + '<br />');
};

10. Limitaciones de un web worker
• El estado de los Web workers es isolado de la
página.
• Los mensajes se serializan. Se crea una copia
del mensaje, nunca el web worker y el
creador referencian a un mismo objeto.
• Los web workers no permiten bloqueos de
synchroniza-tion, semáforos, o mutexes.
• No tienen acceso al (DOM). Si necesitan
acceder al DOM deben postear un mensage a
su creador, su creador procesará el mensaje y
accederá al DOM.