JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing
Soporte
Importante
- Podemos lidiar con
file interface(input file) - Podemos generar ficheros al vuelo
- Podemos convertir el contenido d eun blob en una URL para usarla con etiquetas normales
Recursos
Ejemplo básico
const blob = new Blob(['body { color: red; }'], {type: 'text/css'});
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link);// <input type="file" multiple id="ficheros">
// Permitimos solo *.png, *.jpeg and *.gif images
const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
const fileInput = document.getElementById("ficheros");
const files = fileInput.files;
for (let i = 0; i < files.length; i++) {
const validFile = allowedFileTypes.indexOf(files[i].type) > -1
console.log(`${files[i]} ${validFile ? "es válido" : "NO es válido"}`)
});// <input type="file" multiple id="ficheros">
const fileInput = document.getElementById("ficheros");
const files = fileInput.files;
for (let i = 0; i < files.length; i++) {
console.log(`${files[i].name} tiene ${files[i].size} Bytes`);
}const contenido = ['<a id="a"><b id="b">hey!</b></a>'];
const miFichero = new Blob(contenido, {type : 'text/html'});
const blobParcial = miFichero.slice(1,10, "text/plain");
Importante
- NO ESTA SOPORTADO AÚN AL 100%
- Permite el almacenamiento de ficheros de forma temporal o persistente
- Es necesario pedir permisos
- Estan en su propio sandbox
- Introduction to the File and Directory Entries API
Funcionalidades
- Lectura y manipulación de archivos (File/Blob, FileList, FileReader,
- Creación y escritura (BlobBuilder, FileWriter),
- Acceso a sistemas de archivos y directorios (DirectoryReader, DirectoryEntry, LocalFileSystem).
Recuros
- Los Web Workers se ejecutan en un subproceso aislado.
- Funcionan aunque la pagina se haya cerrado
- Siguen funcionando aunque el navegadro se cierre.
- Especificación
- Soporte
Arquitectura
Alcance
- En el contexto de un Worker, tanto self como this hacen referencia al alcance global del Worker
- Puede acceder a:
- Objeto navigator
- Objeto location (de solo lectura)
- XMLHttpRequest
- setTimeout(), setInterval(), etc...
- Caché de la aplicación
- Importación de secuencias de comandos externas, importScripts()
- Generación de otros Web Workers
Limitaciones
- No se ejecutarán de forma local
- DOM
- Objeto window
- Objeto document
- Objeto parent
Recomendaciones
- Obtención previa y/o almacenamiento en caché de datos para un uso futuro
- Métodos para destacar la sintaxis de código u otros formatos de texto en tiempo real
- Corrector ortográfico
- Análisis de datos de vídeo o audio
- Entrada y salida en segundo plano o solicitud de servicios web
- Procesamiento de conjuntos o respuestas JSON de gran tamaño
- Filtrado de imágenes en
- Actualización de varias filas de una base de datos web local
Ejemplos
Recursos
- Introducción a los Web Workers en html5rocks
- Web workers without a separate Javascript file?
- Offline Recipes for Service Workers by DWB
- Using Web Workers to Speed-Up Your JavaScript Applications by treehouse
- Debugging Web Workers with Chrome Developer Tools
- Using Web Workers en MDN
- Concurrency in JavaScript
Librerías
Definición y puesta en marcha
- Instanciando el Web Worker
const worker = new Worker('fichero.js');- Arrancando el Web Worker
const worker = new Worker('fichero.js');
worker.postMessage();Comunicación
- Desde el archivo principal
const worker = new Worker('fichero.js');
worker.addEventListener('message', evento => {
console.log('El worker dice: ', evento.data);
}, false);
worker.postMessage('Hola Mundo!');- Desde el Web Worker
self.addEventListener('message', evento => {
self.postMessage(evento.data);
}, false);Parar un Web Worker
- Desde el archivo principal
worker.terminate()- Desde el Web Worker
self.close()Subworkers
- La resolución de las URI de los Subworkers está relacionada con la ubicación de su Worker principal (en oposición a la página principal)
- Los Workers tienen la capacidad de generar Workers secundarios.
- Los Subworkers deben estar alojados en el mismo origen que la página principal.
Blob En el HTML:
<!-- inline worker -->
<script id="worker" type="javascript/worker">
((s => {
const increment = 1;
let count = 0;
const loop = 999999999;
s.onmessage = e => {
console.log(e.data);
let test = 0;
for( let i = 0 ; i < loop ;i++ ){
test = i;
const int = Math.trunc( i*100/loop );
if( int === count ){
s.postMessage( int );
count += increment;
}
}
s.postMessage( {finish:'loop finished'} );
};
}))(self);
</script>En JS:
const blob = new Blob([document.querySelector('#worker').textContent], { type: "text/javascript" });
const worker = new Worker(window.URL.createObjectURL(blob));Shared Web Workers
Definición y puesta en marcha
- Instanciando el Web Worker
const worker = new SharedWorker("fichero.js");- Arrancando el Web Worker utiliznado port
const worker = new SharedWorker("/html5/web-worker-shared.jsp");
worker.port.addEventListener("message", event => {
console.log("datos del ShraedWorker", event.data);
}, false);
worker.port.start();Comunicación
- Desde el archivo principal
const worker = new SharedWorker("/html5/web-worker-shared.jsp");
worker.port.addEventListener("message", event => {
console.log("datos del ShraedWorker", event.data);
}, false);
worker.port.postMessage("First Message");- Desde el Web Worker
const ports = [];
onconnect = event => {
const port = event.ports[0];
ports.push(port);
port.start();
port.addEventListener("message", event => { listenForMessage(event, port); } );
}
listenForMessage = (event, port) => {
port.postMessage(`Reply from SharedWorker to: ${event.data}`);
}
//Implementation of shared worker thread code
setInterval(() => { runEveryXSeconds() }, 5000);
function runEveryXSeconds() {
for(i = 0; i < ports.length; i++) {
ports[i].postMessage(`Calling back at : ${new Date().getTime()}`);
}
}