Auf Events lauschen
Off-Chain-Subscriptions
Auf Events lauschen ist eine kostenlose Web3 & DApp Development Fundamentals-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web3 & DApp Development Fundamentals-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web3 & DApp Development Fundamentals-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
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
Lerne Web3 & DApp Development Fundamentals mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 29
- Lektionen
- 105
Häufig gestellte Fragen
Ist die Lektion „Auf Events lauschen“ kostenlos?
Ja — der vollständige Text von „Auf Events lauschen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web3 & DApp Development Fundamentals-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web3 & DApp Development Fundamentals-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Auf Events lauschen“?
Off-Chain-Subscriptions Du übst Web3 & DApp Development Fundamentals mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web3 & DApp Development Fundamentals zu starten?
Keine Vorkenntnisse erforderlich. Web3 & DApp Development Fundamentals auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Auf Events lauschen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web3 & DApp Development Fundamentals-Lektion Code schreiben und ausführen?
Ja. Jede Web3 & DApp Development Fundamentals-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Events deklarieren
- Indizierte Parameter
- Auf Events lauschen
- Events vs. Storage