Como utilizar o Worker no Javascript?
- #JavaScript
Você irá aprender de uma forma simples com utilizar o Worker em suas aplicações Javascript bem como melhorar a performance dos seus scripts.
Com Worker nós podemos executar algumas funções em segundo plano, sem interferir diretamente no Front da aplicação. Você já viu algum site que enquanto alguma coisa está carregando, você não consegue mudar de página ou executar alguma ação? No Javascript podemos utilizar o Worker e melhorar essa experiência do usuário carregando scripts pesados em segundo plano.
Podemos destacar que com a utilização do Worker você poderá evitar esses travamentos, porque o código será executado fora da Thread principal do navegador.
Um Detalhe Importante:
Vou utilizar a API do Pokeapi, para demonstrar de uma forma um pouco mais “robusta” do que você poderá fazer com o Worker.
1 – Crie um arquivo index.html.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Como Trabalhar com Worker?</title>
<meta charset="utf-8">
<meta name="description" content="Página como Trabalhar com Worker">
<meta name="keywords" content="html, css, js, site, worker">
<meta name="robots" content="index">
</head>
<body>
<form id="form-search-pokemon">
<label>Nome do Pokemon:</label>
<input type="text" name="name_pokemon" value="" />
<button id="search-pokemon">Carregar</button>
</form>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
2 – Crie o arquivo worker.js, Esse arquivo será o nosso Worker.
// Aqui estou fazendo a requisição do pokemon
const getPokemon = async (pokemon) => {
try {
const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon}`);
const mensagens = await response.json();
return mensagens;
} catch (e) {
return [];
}
}
// estou montado o template após a resposta da API
const templatePokemon = (pokemon = []) => {
return `
<div>
<h1>Pokemon: ${pokemon.name}</h1>
<p>Peso: ${pokemon.weight}</p>
<p>Altura: ${pokemon.height}</p>
</div>
`;
}
// Esse ouvinte irá aguardar a chamada do worker
addEventListener('message', function(e) {
let data = e.data;
getPokemon(data.pokemon).then(response => {
postMessage({ response: templatePokemon( response )});
}).catch(erro => {
postMessage({ response: templatePokemon () });
console.error(erro);
});
});
3 – Crie o arquivo index.js
var myWorker = new Worker("worker.js");
let app = document.getElementById('app'),
btn_pesquisa = document.getElementById('search-pokemon');
// Um ouvinte da resposta do Worker.
myWorker.addEventListener('message', function(e) {
let data = e.data;
app.insertAdjacentHTML('beforeend', data.response);
});
// ouvinte do botão carregar
btn_pesquisa.addEventListener('click', function(e) {
e.preventDefault();
let namePokemon = document.querySelector('input[name="name_pokemon"]').value.trim();
if(namePokemon.length) {
// aqui eu envio para o Woker a minha solicitacao
myWorker.postMessage({pokemon: namePokemon});
}
});
4 – Utilizando a ferramenta inspecionar na aba Fetch/XHR, você poderá ver a execução do Worker
5 – Veja o como foi resultado da nossa consulta
Legal né? Podemos utilizar o Worker para uma infinidade de coisas.
Enfim você pode entender o funcionamento do Worker e como utilizar no Javascript, tente fazer utilizando outros conceitos, um exemplo bacana é criar uma aplicação de chat, colocando um timer para solicitar novas mensagens.
Repositório com os arquivos: https://github.com/joantoniopn/codigo-constante-worker.git
Fontes:
