Web3 & DApp Development Fundamentals · درس

الاستماع إلى الأحداث

الاشتراك في السجلات

الاستماع إلى الأحداث درس مجاني في Web3 & DApp Development Fundamentals على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web3 & DApp Development Fundamentals، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web3 & DApp Development Fundamentals 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

What Are Events

Smart contracts emit events to log that something happened — a transfer, an approval, a vote. Events are written to the transaction's logs.

They are cheaper than storage.
Off-chain apps subscribe to them to stay in sync.

Events in the ABI

To decode events, ethers needs their definitions in the ABI:

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

The indexed keyword marks fields you can filter on.

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

Listening Live

Subscribe to new events with on. The callback fires whenever the event is emitted:

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

This needs a provider that supports subscriptions, such as a WebSocket connection.

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

WebSocket Providers

Live subscriptions work best over a persistent connection. Use a WebSocket provider:

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

HTTP providers can poll for events but a WebSocket pushes them in real time.

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

Listening Once

If you only care about the first occurrence, use once:

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

The listener automatically removes itself after firing a single time.

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

Querying Past Events

To read historical events, use queryFilter over a block range:

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

Each log exposes decoded args.

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

Filtering by Indexed Fields

Build a filter to match specific indexed values — for example transfers to one address:

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

Passing null means match any value for that position.

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

Live Filtered Listening

You can also pass a filter to on to react only to relevant events:

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

This avoids processing events you do not care about.

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

Removing Listeners

Long-running apps should clean up listeners to avoid leaks:

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

Always remove listeners when a component unmounts or a job finishes.

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

Handling Reorgs

Recent events can be reverted if the chain reorganizes. For reliable indexing:

Wait several confirmations before treating an event as final.
Track the block number and re-process if a reorg is detected.

This keeps your off-chain database consistent with the chain.

Provider-Level Log Filters

You can also subscribe at the provider level without a contract instance, using a raw log filter by topic:

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

This is lower-level but works across many contracts at once.

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

Quick Check

Test your understanding of event handling.

Recap

You learned to work with contract events.

Events log on-chain activity to transaction logs.
on subscribes live (best over a WebSocket provider); once fires a single time.
queryFilter reads historical events over a block range.
Build filters from indexed fields; pass null to match any.
Remove listeners to avoid leaks and wait for confirmations against reorgs.

الأسئلة الشائعة

هل درس «الاستماع إلى الأحداث» مجاني؟

نعم — نص درس «الاستماع إلى الأحداث» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web3 & DApp Development Fundamentals، انتقل إلى CoddyKit PRO. تتضمن دورة Web3 & DApp Development Fundamentals 4 دروس في المجموع.

ماذا ستتعلم في «الاستماع إلى الأحداث»؟

الاشتراك في السجلات تتمرن على Web3 & DApp Development Fundamentals مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Web3 & DApp Development Fundamentals؟

لا تُشترط خبرة سابقة. Web3 & DApp Development Fundamentals على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «الاستماع إلى الأحداث»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Web3 & DApp Development Fundamentals هذا؟

نعم. كل درس في Web3 & DApp Development Fundamentals يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Web3 & DApp Development Fundamentals