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.