miércoles, diciembre 10, 2014

Ejemplo WebWorker





"Lo que pasa es de que" .. esta vez estaba viendo la forma de implementar los ya famosisimos Webworkers de html5 por lo que me di a la tarea de buscar y por la red encontrando algo de información para realizar un ejemplo sencillo de Webworker.


Pues bien lo primero que encontré fue esto:
http://www.html5rocks.com/es/tutorials/workers/basics/
http://www.w3schools.com/html/html5_webworkers.asp
https://developer.mozilla.org/es/docs/Web/Guide/Performance/Usando_web_workers
https://stackoverflow.com/questions/5710394/round-double-to-two-decimal-places-in-java
https://stackoverflow.com/questions/21408510/chrome-cant-load-web-worker


Ya después de darle un vistazo , realice un ejemplo que coloco a continuación:

Paso 1: Genere el esqueleto html5

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mi primer Worker</title>

</head>
<body >
</body >

</html>

Paso2:Genere el archivo worker_reloj.js colocando el codigo:

function reloj() {
    var hoy=new Date();
    var h=hoy.getHours();
    var m=hoy.getMinutes();
    var s=hoy.getSeconds();
   
    m = actualizarHora(m);   
    s = actualizarHora(s);
   
    postMessage(h+":"+m+":"+s);
    var t = setTimeout(function(){reloj()},500);
 
}

function actualizarHora(i) {
    if (i<10) {i = "0" + i};  // Añadir el cero en números menores de 10
    return i;
}


//Inicia la funcion
reloj();


Donde la función reloj() sera la encargada de generar la información (esto se puede tomar como lo que se trabaja en segundo plano)

Paso3: coloque el script de webworker entre <head></head>

<script>
    var w;

    function iniciaWorker() {
        if(typeof(Worker)!=="undefined") {
            if(typeof(w)=="undefined") {
                w=new Worker("worker_reloj.js");
            }
            w.onmessage = function (event) {
                $("#reloj").text(event.data);
            };
        } else {
            console.log("Tu navegador no soporta WebWorkers");
        }
    }

</script>


Paso 4: coloque el div donde quería que se mostrara el resultado de mi función reloj;

<div id="reloj" style="font-size: 37px; position:relative; top:10px; height: 40px; width: 140px; color: rgb(120, 120, 120);">
        00:00:00
    </div>


Paso 5: en body inicio el worker de esta forma:

<body onload="iniciaWorker();" >


Y listo tenemos preparado nuestro primer webworker.Al darle doble clic desde la carpeta donde lo había guardado, no me funcionaba me mandaba un error como este.

 Uncaught SecurityError: Failed to construct 'Worker': Script at '
 y mi pantalla se veia algo asi:
Como tengo un Jetty preparado para mis pruebas entonces coloque la carpeta en la subcarpeta webapps (Puede ser cualquier contendor de aplicaciones web)y en el navegador lo hice mas o menos asi:

En ejecucion deberia ver algo asi:

por su quieres descargar el proyecto de ejemplo este se encuentra aqui:

https://github.com/xola139/WebWorker1

Listo .. eso .. eso estodo amigos..

Hasta la proxima

No hay comentarios.:

Publicar un comentario