Trabajadores web HTML5 | TIEngranaje

Uno de los mayores desafíos que aún existen para los desarrolladores web en la actualidad es cómo crear aplicaciones web ricas en funciones que respondan muy bien a los usuarios. Uno de los principales problemas es que JavaScript es un entorno de subproceso únicolo que significa que no se pueden ejecutar varios scripts al mismo tiempo.

Es posible que haya escuchado el término “bloqueo” o “no bloqueo” con respecto al código JavaScript. Desafortunadamente, la ejecución de JavaScript ocurre dentro de un solo hilo. Una de las adiciones más útiles a HTML5 es el soporte para Trabajadores web. Web Workers permitirá diseñar aplicaciones web más receptivas de lo que era posible en el pasado.

Introducción a los trabajadores web

Web Workers es una especificación de interfaz de programación de aplicaciones (API) que le permite crear varios hilos de JavaScript en el fondo. Normalmente en los navegadores, se crea un solo hilo para manejar todo el código JavaScript.

Por lo tanto, el código JavaScript se ejecuta en ese único hilo. Mientras su cliente está procesando el código JavaScript, es posible que la página parezca estar no responde al usuario hasta que se haya completado el proceso.

Web Workers alivia este problema al permitirle crear varios subprocesos de JavaScript que se ejecutarán de forma independiente entre sí. Los Web Workers se aseguran de que el el usuario puede seguir interactuando con la página mientras su código JavaScript se ejecuta en segundo plano.

Soporte para trabajadores web

Los trabajadores web son compatibles con todos los navegadores principales, excepto Internet Explorer. Antes de crear cualquier objeto Web Worker, debería considerar verificar si su navegador es compatible con HTML5 Web Workers. El siguiente código de ejemplo se puede utilizar para comprobar si su navegador es compatible Trabajadores de la web.

<script>
    if (typeof (Worker) !== "undefined") {
        // Web Workers are supported
    } else {
        // No Web Worker support..
    }
</script>

Creación de un trabajador web

Una vez que haya verificado con éxito que el navegador admite trabajadores web, puede continuar con la creación de uno. En el siguiente ejemplo, crearemos un Web Worker que incrementar su contador. estamos usando el setTimeout y he especificado que el intervalo es de 1000 milisegundos. Por lo tanto, el contador se incrementará cada segundo.

Si bien este es un ejemplo simple, generalmente implementaría esta técnica para JavaScript, que es más elaborada y requiere un uso intensivo del procesador. Tenga en cuenta que el principal beneficio de un trabajador web es no “bloquear” o afectar la experiencia del usuario al ejecutar estos procesos en segundo plano. El siguiente código se coloca en un archivo JavaScript externo.

var x=0;

function counter() {
    x=x+1;
    postMessage(x);
    setTimeout("counter()",1000);
}

counter();

Comunicarse con un trabajador web

En el ejemplo anterior, es posible que haya notado la postMessage() método. La comunicación entre un trabajador web y la página HTML que llama se realiza mediante un modelo de eventos y el postMessage() método. Dependiente en su navegador/versión, postMessage() puede aceptar una cadena o un objeto JSON como único argumento.

Las últimas versiones de navegadores modernos Admite pasar un objeto JSON. El siguiente ejemplo crear un nuevo hilo de Web Worker y ejecutar el código JavaScript en el archivo externo.

if(typeof(counterWorker)=="undefined") {
    counterWorker=new Worker("counter.js");
}

Una vez que hemos creado Trabajadores podemos enviar y recibir mensajes. Necesitamos agregar un controlador de eventos para manejar estos mensajes.

counterWorker.onmessage=function(event) {
    document.getElementById("workerResults").innerHTML=event.data;
};

Terminar el trabajador web

Una vez que se crea un objeto de trabajo web, continuará escuchando mensajes. hasta que se termine. Para finalizar un trabajador web, use el terminate() método.

counterWorker.terminate();

Ejemplo

Así que pongamos todo este código en un ejemplo de trabajo.

<!DOCTYPE html>
<html>
<body>
    <p>Current Count: <output id="counterResult"></output></p>
    <button onclick="startWorker()">Start Web Worker</button> 
    <button onclick="stopWorker()">Stop Web Worker</button>
    <br /><br />
    <script>
        var counterWorker;

        function startWorker() {
            if(typeof(Worker)!=="undefined") {
                if(typeof(counterWorker)=="undefined") {
                    counterWorker=new Worker("counter.js");
                }
                counterWorker.onmessage = function (event) {
                    document.getElementById("counterResult").innerHTML=event.data;
                };
            } else {
                document.getElementById("counterResult").innerHTML="Your browser does not support Web Workers.";
            }
        }

        function stopWorker() { 
            counterWorker.terminate();
        }
    </script>
</body>
</html>