Web3 & DApp Development Fundamentals · Lekcja

Nasłuchiwanie zdarzeń

Subskrybowanie logów

Lekcja 4 z 413 kroki

Nasłuchiwanie zdarzeń to bezpłatna lekcja Web3 & DApp Development Fundamentals na CoddyKit. To lekcja 4 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.

Czym są zdarzenia

Smart kontrakty emitują zdarzenia, aby rejestrować, że coś się wydarzyło — na przykład transfer, zatwierdzenie lub głosowanie. Zdarzenia są zapisywane w logach transakcji.

Są tańsze niż przechowywanie danych w storage.
Aplikacje działające poza łańcuchem subskrybują je, aby zachować synchronizację.

Zdarzenia w ABI

Aby dekodować zdarzenia, ethers potrzebuje ich definicji w ABI:

const abi = [\n  "event Transfer(address indexed from, address indexed to, uint256 value)",\n];\nconst contract = new ethers.Contract(address, abi, provider);

Słowo kluczowe indexed oznacza pola, po których można filtrować.

const abi = [
  "event Transfer(address indexed from, address indexed to, uint256 value)",
];
const contract = new ethers.Contract(address, abi, provider);

Nasłuchiwanie na żywo

Subskrybuj nowe zdarzenia za pomocą on. Callback jest wywoływany za każdym razem, gdy zdarzenie zostanie wyemitowane:

contract.on("Transfer", (from, to, value, event) => {\n console.log(from, "->", to, value);\n});

Wymaga to providera obsługującego subskrypcje, na przykład połączenia WebSocket.

contract.on("Transfer", (from, to, value, event) => {
  console.log(from, "->", to, value);
});

Providery WebSocket

Subskrypcje na żywo najlepiej działają za pośrednictwem trwałego połączenia. Użyj providera WebSocket:

const provider = new ethers.WebSocketProvider(\n "wss://mainnet.example-rpc.io/KEY"\n);

Providery HTTP mogą okresowo odpytywać o zdarzenia, ale WebSocket przesyła je w czasie rzeczywistym.

const provider = new ethers.WebSocketProvider(
  "wss://mainnet.example-rpc.io/KEY"
);

Nasłuchiwanie jednorazowe

Jeśli interesuje Państwa tylko pierwsze wystąpienie, proszę użyć once:

contract.once("Approval", (owner, spender, value) => {
  console.log("First approval seen");
});

Listener automatycznie usuwa się po jednokrotnym wywołaniu.

contract.once("Approval", (owner, spender, value) => {
  console.log("First approval seen");
});

Odczytywanie wcześniejszych zdarzeń

Aby odczytać historyczne zdarzenia, proszę użyć queryFilter dla zakresu bloków:

const logs = await contract.queryFilter(
  "Transfer",
  19000000,
  19000100
);
for (const log of logs) {
  console.log(log.args.from, log.args.value);
}

Każdy log udostępnia zdekodowane args.

const logs = await contract.queryFilter(
  "Transfer",
  19000000,
  19000100
);
for (const log of logs) {
  console.log(log.args.from, log.args.value);
}

Filtrowanie według indeksowanych pól

Proszę utworzyć filtr dopasowujący konkretne indeksowane wartości — na przykład transfery na jeden adres:

const filter = contract.filters.Transfer(null, myAddress);
const logs = await contract.queryFilter(filter);

Przekazanie null oznacza dopasowanie dowolnej wartości na tej pozycji.

const filter = contract.filters.Transfer(null, myAddress);
const logs = await contract.queryFilter(filter);

Nasłuchiwanie na żywo z filtrowaniem

Można również przekazać filtr do on, aby reagować tylko na odpowiednie zdarzenia:

const filter = contract.filters.Transfer(null, myAddress);
contract.on(filter, (from, to, value) => {
  console.log("Received:", value);
});

Dzięki temu nie trzeba przetwarzać zdarzeń, które Państwa nie interesują.

const filter = contract.filters.Transfer(null, myAddress);
contract.on(filter, (from, to, value) => {
  console.log("Received:", value);
});

Usuwanie listenerów

Aplikacje działające przez długi czas powinny usuwać listenery, aby uniknąć wycieków:

contract.off("Transfer", myHandler);
// or remove all listeners for an event
contract.removeAllListeners("Transfer");

Proszę zawsze usuwać listenery po odmontowaniu komponentu lub zakończeniu zadania.

contract.off("Transfer", myHandler);
// or remove all listeners for an event
contract.removeAllListeners("Transfer");

Obsługa reorganizacji łańcucha

Najnowsze zdarzenia mogą zostać cofnięte, jeśli dojdzie do reorganizacji łańcucha. Aby indeksowanie było niezawodne:

Proszę poczekać na kilka potwierdzeń, zanim uznają Państwo zdarzenie za finalne.
Proszę śledzić numer bloku i przetworzyć dane ponownie po wykryciu reorganizacji.

Dzięki temu baza danych poza łańcuchem pozostaje spójna z łańcuchem.

Filtrowanie logów na poziomie providera

Można również zasubskrybować zdarzenia na poziomie providera bez instancji kontraktu, używając surowego filtra logów według topicu:

provider.on({
  address: tokenAddress,
  topics: [ethers.id("Transfer(address,address,uint256)")],
}, (log) => {
  console.log("Raw log:", log);
});

Jest to rozwiązanie niższego poziomu, ale działa jednocześnie z wieloma kontraktami.

provider.on({
  address: tokenAddress,
  topics: [ethers.id("Transfer(address,address,uint256)")],
}, (log) => {
  console.log("Raw log:", log);
});

Szybki test

Sprawdź swoją wiedzę na temat obsługi zdarzeń.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Nauczyli się Państwo pracować ze zdarzeniami kontraktów.

Zdarzenia zapisują aktywność w łańcuchu w logach transakcji.
on subskrybuje zdarzenia na żywo (najlepiej za pośrednictwem providera WebSocket), a once wywołuje listener jednokrotnie.
queryFilter odczytuje historyczne zdarzenia z zakresu bloków.
Filtry należy tworzyć na podstawie indeksowanych pól; przekazanie null dopasowuje dowolną wartość.
Listenery należy usuwać, aby uniknąć wycieków, oraz czekać na potwierdzenia w celu ochrony przed reorganizacjami.

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

Zacznij naukę bezpłatnie Wyświetl pełny kurs

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ń”?

Subskrybowanie logów Ć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 4 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

← Powrót do Web3 & DApp Development Fundamentals