06. Creando un proceso web worker
0 recomendaciones115 vistas
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.
![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 />');
};](https://image.slidesharecdn.com/06-161012025037/85/06-Creando-un-proceso-web-worker-5-320.jpg)
06. Creando un proceso web worker
- 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.