Esta publicación servirá para ir colocando fragmentos de consultas que en algún momento me fueron útiles para usarlo en MongoDB Fragmento 1: Se requería obtener todos los elementos que dentro de un atributo que es de tipo array(arreglo) coincida con type:"fire" Fragmento 2: Se requería actualizar el atributo " lastUpdate " de toda la colección donde la edad sea mayor o igual a 15.
"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:
https://github.com/xola139/WebWorker1
Listo .. eso .. eso estodo amigos..
Hasta la proxima
Comentarios
Publicar un comentario