Escuta de eventos
Inscrições fora da cadeia
Escuta de eventos é uma aula grátis de Web3 & DApp Development Fundamentals no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web3 & DApp Development Fundamentals, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web3 & DApp Development Fundamentals inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Consuming Events Off-Chain
Events are useless until something listens for them. Off-chain apps - web front-ends, bots, and indexers - subscribe to logs to react to on-chain activity.
Libraries like ethers.js and web3.js make this straightforward.
Listening with ethers.js
With ethers.js you attach a listener using contract.on(eventName, callback). The callback receives the decoded parameters plus the raw event object.
<code>contract.on('Transfer', (from, to, amount, event) => {
console.log(from, '->', to, amount.toString());
});</code>Querying Past Events
To read history rather than live events, use queryFilter with a block range. This returns an array of matching past logs.
<code>const logs = await contract.queryFilter('Transfer', 0, 'latest');
logs.forEach(l => console.log(l.args.amount.toString()));</code>Filtering by Indexed Value
Because some parameters are indexed, you can build a filter that only matches certain topics, for example transfers received by one address.
<code>const filter = contract.filters.Transfer(null, myAddress);
const received = await contract.queryFilter(filter);</code>Listening with web3.js
The web3.js library uses an event emitter pattern via contract.events.EventName(), with data and error callbacks.
<code>contract.events.Transfer({ fromBlock: 'latest' })
.on('data', (e) => console.log(e.returnValues))
.on('error', console.error);</code>WebSocket Providers
Live event subscriptions require a WebSocket connection (wss://), because HTTP providers cannot push updates. For one-off history queries an HTTP provider is fine.
<code>// const provider = new ethers.WebSocketProvider('wss://...');
// HTTP works for queryFilter, not for live .on()</code>Block Confirmations
An event can be reorged out if its block is replaced. Wait for several confirmations before treating an event as final, especially for value transfers.
<code>contract.on('Deposit', async (acct, amount, event) => {
await event.getTransactionReceipt();
// optionally wait N confirmations
});</code>Indexers and The Graph
For large dApps, a dedicated indexer such as The Graph ingests events and exposes a queryable GraphQL API. This scales far better than scanning logs in the browser.
Decoding Raw Logs
If you have raw logs, you can decode them with the contract's ABI using an interface. The signature hash in topic 0 identifies which event it is.
<code>const iface = new ethers.Interface(abi);
const parsed = iface.parseLog(rawLog);
console.log(parsed.name, parsed.args);</code>Avoiding Duplicate Handling
Listeners may receive the same event more than once across reconnects. Track processed log identifiers (transaction hash + log index) to keep handling idempotent.
<code>const key = event.transactionHash + ':' + event.logIndex;
if (seen.has(key)) return;
seen.add(key);</code>Cleaning Up Listeners
Remove listeners when a component unmounts to prevent memory leaks and duplicate handlers, using contract.off or removeAllListeners.
<code>function handler(from, to, amount) { /* ... */ }
contract.on('Transfer', handler);
// later:
contract.off('Transfer', handler);</code>Quick Check
Test your understanding of listening for events.
Recap
You learned how off-chain code listens for events:
contract.on()for live events,queryFilterfor history- Filters target indexed topics
- WebSocket providers are required for live subscriptions
- Wait for confirmations, deduplicate logs, and clean up listeners
- Indexers like The Graph scale event queries
Perguntas Frequentes
A aula “Escuta de eventos” é grátis?
Sim — o texto completo de “Escuta de eventos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web3 & DApp Development Fundamentals, atualize para CoddyKit PRO. O curso de Web3 & DApp Development Fundamentals inclui 4 aulas no total.
O que vou aprender em “Escuta de eventos”?
Inscrições fora da cadeia Você pratica Web3 & DApp Development Fundamentals com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web3 & DApp Development Fundamentals?
Nenhuma experiência prévia é necessária. Web3 & DApp Development Fundamentals no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Escuta de eventos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web3 & DApp Development Fundamentals?
Sim. Cada aula de Web3 & DApp Development Fundamentals inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.