Olayları Dinleme
Zincir dışı abonelikler
Olayları Dinleme, CoddyKit'te ücretsiz bir Web3 & DApp Development Fundamentals dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web3 & DApp Development Fundamentals öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web3 & DApp Development Fundamentals kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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
Yapay zeka eğitmeniyle Web3 & DApp Development Fundamentals öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 29
- Dersler
- 105
Sıkça Sorulan Sorular
“Olayları Dinleme” dersi ücretsiz mi?
Evet — “Olayları Dinleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web3 & DApp Development Fundamentals kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web3 & DApp Development Fundamentals kursu toplamda 4 dersten oluşur.
“Olayları Dinleme” dersinde ne öğreneceğim?
Zincir dışı abonelikler Web3 & DApp Development Fundamentals ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web3 & DApp Development Fundamentals öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web3 & DApp Development Fundamentals, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Olayları Dinleme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web3 & DApp Development Fundamentals dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web3 & DApp Development Fundamentals dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.