Web3 & DApp Development Fundamentals · Pelajaran

Mendengarkan Event

Langganan off-chain

Mendengarkan Event adalah pelajaran Web3 & DApp Development Fundamentals gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web3 & DApp Development Fundamentals, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web3 & DApp Development Fundamentals mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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, queryFilter for 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

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mendengarkan Event” gratis?

Ya — teks lengkap “Mendengarkan Event” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web3 & DApp Development Fundamentals, upgrade ke CoddyKit PRO. Kursus Web3 & DApp Development Fundamentals mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mendengarkan Event”?

Langganan off-chain Kamu berlatih Web3 & DApp Development Fundamentals dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Web3 & DApp Development Fundamentals?

Tidak diperlukan pengalaman sebelumnya. Web3 & DApp Development Fundamentals di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Mendengarkan Event” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Web3 & DApp Development Fundamentals ini?

Ya. Setiap pelajaran Web3 & DApp Development Fundamentals menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Web3 & DApp Development Fundamentals