Workers constituye un medio sencillo para que el
contenido web ejecute secuencias de comandos en subprocesos en segundo plano.
Una vez creado, un worker puede enviar mensajes a la tarea de generación
mediante la publicación de mensajes en un controlador de eventos especificado
por el creador.
El subproceso del worker puede realizar tareas sin
interferir con la interfaz de usuario. Además, pueden realizar E / S
utilizando XMLHttpRequest(aunque los
atributos responseXML y channel siempre son nulos).
Consulta el documento de referencia Worker ,
al que este artículo complementa ofreciendo ejemplos y añadiendo detalles. Para
obtener una lista de funciones disponibles para workers, consulta Funciones disponibles para workers .
Acerca de la seguridad en los subprocesos
La interfaz Worker genera subprocesos a
nivel del sistema operativo y la simultaneidad puede producir efectos
interesantes en el código si no tienes cuidado. Sin embargo, en el caso de web
workers, los puntos de comunicación controlados cuidadosamente con otros subprocesos
supone que en realidad sea muy difícil causar problemas de simultaneidad.
No hay acceso a componentes sin subprocesos seguros o al DOM y tienes que
pasar datos específicos dentro y fuera de un subproceso a través de objetos
serializados. Así que te tienes que esforzar mucho para causar problemas
en el código.
Generar un worker
Crear un nuevo worker es simple. Lo único que
tienes que hacer es llamar al constructor Worker(), especificando el URI
de un script para ejecutar en el subproceso del worker y, si deseas poder
recibir las notificaciones del worker, establece la
propiedad onmessage del worker a una función de manejador de evento
adecuada.
var myWorker = new Worker('my_worker.js');
myWorker.onmessage = function(event) {
print("Llamado de
nuevo por el worker\n");
};
De forma alternativa, podemos
usar addEventListener():
var worker = new Worker('my_worker.js');
worker.addEventListener('message', function(event) {
console.log("Called back by the
worker!\n");
}, false);
worker.postMessage(""); // Iniciar el
worker.
La línea 1 de este ejemplo crea e inicia el subproceso
del worker. La línea 2 establece el controlador onmessage para el
worker a una función que se llama cuando éste pide su propia
función postMessage().
Generar subworkers
Los workers pueden generar más workers si así lo
desean. Los llamados subworkers deben estar alojados en el mismo origen
que la página principal. Además, los URI para los subworkers se resuelven
en relación a la ubicación del worker principal y no en relación a la de la
página propietaria. Esto hace que sea más fácil que los workers realicen
un seguimiento de dónde están sus dependencias.
Tiempos de espera e intervalos
Los workers pueden utilizar los tiempos de espera y
los intervalos al igual que el proceso principal. Esto puede ser útil,
por ejemplo, si quieres hacer que tu subproceso del worker ejecute código de
manera periódica en lugar de ininterrumpidamente.
Consulta setTimeout(), clearTimeout(), setInterval() y clearInterval() si deseas tener más detalles.
Terminar un worker
Si tienes que cancelar inmediatamente un worker que se
está ejecutando, puedes hacerlo llamando al método terminate() del
worker:
myWorker.terminate();
El subproceso del worker se interrumpe inmediatamente
y sin tener la posibilidad de terminar sus operaciones o limpiar por sí mismo.
Los workers pueden cerrarse llamando a su propio
método nsIWorkerScope.close().
Gestión de errores
Cuando se produce un error de ejecución en el worker,
es llamado su controlador de enventos onerror. Recibe un evento
denominado error que implementa la interfaz ErrorEvent. El
evento no se lanza y se puede cancelar, para evitar que la acción
predeterminada tenga lugar, el worker puede llamar al método preventDefault() del
evento de error.
El evento de error tiene los siguientes tres campos
que son de interés:
message
Un mensaje de error legible para
el ojo humano.
filename
El nombre del archivo de script
en el que se produjo el error.
lineno
El número de línea del archivo de
script en el que se produjo el error.
Acceder al objeto navegador
Los workers pueden acceder al objeto navigator,
que está disponible dentro de su ámbito. Contiene las siguientes cadenas
de texto que pueden usarse para identificar el navegador, tal y como se puede
hacer a partir de secuencias de comandos normales:
·
appName
·
appVersion
·
platform
·
userAgent
Importar de secuencias de comandos y bibliotecas
Los subprocesos de trabajo tienen acceso a una función
global, importScripts (), que les permite importar secuencias de comandos de
comandos o bibliotecas dentro de su ámbito. Acepta como parámetros cero o
más URI de recursos para la importación, todos los ejemplos siguientes son
válidos:
importScripts(); /* no importa nada
*/
importScripts('foo.js'); /* importa solo "foo.js" */
importScripts('foo.js', 'bar.js');
/*
importa dos scripts */
DEMOSTRACIÓN
En Visual Studio vamos a dar click en menú File à New à Project
En la Ventana emergente le damos click a Web y espacio
Name colocamos el nombre del proyecto que para el Ejemplo es “Demo 14 20480” y
luego presionamos el botón OK
En el espacio de nombre del proyecto damos click derecho y seleccionamos
Add à New Items
En la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos
como nombre del archivo “HelloWebWorkers_EN.html”, para luego presionar el
botón Add y escribir el código HTML que está a continuación:
En
el panel de proyectos vamos a crear una carpeta llamada Scripts y agregamos el
archivo que contiene las bibliotecas de JavaScript.
Situamos
el mouse encima de la carpeta “Scripts” y le damos click derecho y
seleccionamos Add à
New Items
Seleccionamos
la opción de JavaScript File y le damos el nombre de helloworkers_EN.js.
En el archivo helloworkers_EN.js, escribimos las
siguientes líneas de código:
Situamos
el mouse encima de la carpeta “Scripts” y le damos click derecho y
seleccionamos Add à
New Items
Seleccionamos
la opción de JavaScript File y le damos el nombre de HelloWebWorkers_EN.js.
En el archivo HelloWebWorkers_EN.js, escribimos las
siguientes líneas de código:
En el espacio de nombre del proyecto damos click derecho y seleccionamos
Add à New Items
En la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos
como nombre del archivo “HelloWebWorkers_EN.html”, para luego presionar el
botón Add.
Y en nuestro código HTML escribiríamos lo siguiente:
Y procedemos a desplegar nuestra página web:
Al colocar algún texto en el textbox y dar click en el botón “Enviar al Worker”
Y al dar click en el botón “Detener al worker”, fíjese que se detiene el
subproceso
