Web3 & DApp Development Fundamentals · Lekcja

Nasłuchiwanie zdarzeń

Subskrypcje off-chain

Lekcja 3 z 413 kroki

Nasłuchiwanie zdarzeń to bezpłatna lekcja Web3 & DApp Development Fundamentals na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web3 & DApp Development Fundamentals, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web3 & DApp Development Fundamentals zawiera 4 lekcji w sumie.

Korzystanie ze zdarzeń poza łańcuchem

Zdarzenia są bezużyteczne, dopóki coś ich nie nasłuchuje. Aplikacje działające poza łańcuchem — interfejsy webowe, boty i indeksatory — subskrybują logi, aby reagować na aktywność w łańcuchu.

Biblioteki takie jak ethers.js i web3.js znacznie to ułatwiają.

Nasłuchiwanie za pomocą ethers.js

W ethers.js dołączasz nasłuchiwacz za pomocą contract.on(eventName, callback). Funkcja zwrotna otrzymuje zdekodowane parametry oraz surowy obiekt zdarzenia.

<code>contract.on('Transfer', (from, to, amount, event) => {
    console.log(from, '->', to, amount.toString());
});</code>

Wyszukiwanie wcześniejszych zdarzeń

Aby odczytać historię zamiast zdarzeń na żywo, użyj queryFilter z zakresem bloków. Zwróci to tablicę pasujących wcześniejszych logów.

<code>const logs = await contract.queryFilter('Transfer', 0, 'latest');
logs.forEach(l => console.log(l.args.amount.toString()));</code>

Filtrowanie po indeksowanej wartości

Niektóre parametry są indeksowane, więc możesz utworzyć filtr, który dopasowuje tylko określone tematy, na przykład transfery otrzymane przez jeden adres.

<code>const filter = contract.filters.Transfer(null, myAddress);
const received = await contract.queryFilter(filter);</code>

Nasłuchiwanie za pomocą web3.js

Biblioteka web3.js korzysta ze wzorca emitera zdarzeń za pośrednictwem contract.events.EventName(), z funkcjami zwrotnymi data i error.

<code>contract.events.Transfer({ fromBlock: 'latest' })
  .on('data', (e) => console.log(e.returnValues))
  .on('error', console.error);</code>

Dostawcy WebSocket

Subskrypcje zdarzeń na żywo wymagają połączenia WebSocket (wss://), ponieważ dostawcy HTTP nie mogą wypychać aktualizacji. Do jednorazowych zapytań o historię wystarczy dostawca HTTP.

<code>// const provider = new ethers.WebSocketProvider('wss://...');
// HTTP works for queryFilter, not for live .on()</code>

Potwierdzenia bloków

Zdarzenie może zostać usunięte w wyniku reorganizacji, jeśli jego blok zostanie zastąpiony. Przed uznaniem zdarzenia za ostateczne należy poczekać na kilka potwierdzeń, szczególnie w przypadku transferów wartości.

<code>contract.on('Deposit', async (acct, amount, event) => {
    await event.getTransactionReceipt();
    // optionally wait N confirmations
});</code>

Indeksatory i The Graph

W przypadku dużych dApps dedykowany indeksator, taki jak The Graph, pobiera zdarzenia i udostępnia przeszukiwalne API GraphQL. Jest to znacznie lepiej skalowalne niż skanowanie logów w przeglądarce.

Dekodowanie surowych logów

Jeśli masz surowe logi, możesz je zdekodować za pomocą ABI kontraktu i interfejsu. Skrót sygnatury w temacie 0 identyfikuje zdarzenie.

<code>const iface = new ethers.Interface(abi);
const parsed = iface.parseLog(rawLog);
console.log(parsed.name, parsed.args);</code>

Unikanie wielokrotnego przetwarzania

Po ponownym połączeniu nasłuchiwacze mogą otrzymać to samo zdarzenie więcej niż raz. Śledź identyfikatory przetworzonych logów (hash transakcji + indeks logu), aby zapewnić idempotentność obsługi.

<code>const key = event.transactionHash + ':' + event.logIndex;
if (seen.has(key)) return;
seen.add(key);</code>

Usuwanie nasłuchiwaczy

Usuwaj nasłuchiwacze podczas odmontowywania komponentu, aby zapobiec wyciekom pamięci i wielokrotnemu uruchamianiu obsługi, korzystając z contract.off lub removeAllListeners.

<code>function handler(from, to, amount) { /* ... */ }
contract.on('Transfer', handler);
// later:
contract.off('Transfer', handler);</code>

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat nasłuchiwania zdarzeń.

Podsumowanie

Dowiedziałeś(-aś) się, jak kod działający poza łańcuchem nasłuchuje zdarzeń:

  • contract.on() służy do zdarzeń na żywo, a queryFilter do historii
  • Filtry wykorzystują indeksowane tematy
  • Dostawcy WebSocket są wymagani do subskrypcji na żywo
  • Należy czekać na potwierdzenia, usuwać duplikaty logów i sprzątać po nasłuchiwaczach
  • Indeksatory, takie jak The Graph, pozwalają skalować zapytania dotyczące zdarzeń
Bezpłatny start

Ucz się Web3 & DApp Development Fundamentals dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy
29
Lekcje
105

Często zadawane pytania

Czy lekcja „Nasłuchiwanie zdarzeń” jest bezpłatna?

Tak — pełny tekst „Nasłuchiwanie zdarzeń” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web3 & DApp Development Fundamentals, przejdź na CoddyKit PRO. Kurs Web3 & DApp Development Fundamentals zawiera 4 lekcji w sumie.

Co nauczysz się w „Nasłuchiwanie zdarzeń”?

Subskrypcje off-chain Ćwiczysz Web3 & DApp Development Fundamentals z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Web3 & DApp Development Fundamentals?

Nie wymagamy żadnego doświadczenia. Web3 & DApp Development Fundamentals w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Nasłuchiwanie zdarzeń”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Web3 & DApp Development Fundamentals?

Tak. Każda lekcja Web3 & DApp Development Fundamentals zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Deklarowanie zdarzeń
  2. Parametry indeksowane
  3. Nasłuchiwanie zdarzeń
  4. Zdarzenia a storage
← Powrót do Web3 & DApp Development Fundamentals