Ethereum DApps: How to Listen for Events
3 steps to subscribe to smart-contract events
Prerequisite: Knowledge of Node.js and a basic understanding of blockchain and Ethereum smart contracts
Introduction
One of the biggest issues with decentralised applications (DApps) is user experience. DApps can be clunky and difficult to work with. Providing real-time, up-to-date information in your DApp is essential.
Here’s how to subscribe to smart-contract events so your DApp can always display the most up-to-date information from the blockchain.
1. Load web3
Firstly, we need to connect MetaMask to our DApp by loading web3 in the browser. Figure 1 shows how we can do this.
Line 4 shows the command that attempts to connect MetaMask to our DApp. When this is called, MetaMask will open a prompt window requesting a connection, shown in Figure 2.
Once accepted, your DApp is connected.
Bonus tip: Use this pattern when loading to the blockchain for an even better user experience.
2. Load the Smart Contract
Next, we need to load the smart contract, which emits the event we want to subscribe to. For this example, we have a smart contract called MyContract, which emits an event called MyEvent.
Figure 3 shows how we load the smart-contract instance into our DApp. On line 1, we import the compiled smart-contract JSON file. Lines 3 and 4 collect network details. Then, line 5 initializes our smart-contract instance by calling web.eth.Contract() with our network details. We can now interact with the smart contract on the blockchain using the myContract instance.
3. Subscribe
Using the instance we created in step 2, we can subscribe to listen out for any events that it emits.
As stated earlier, the event we want to listen for is called MyEvent, and figure 4 shows us how. Our myContract instance has an accessor called events from which we can target MyEvent. This is an asynchronous function that returns a promise, and it’s called every time MyEvent is emitted.
Line 3 defines what happens once data has been returned from the promise. Here we’re simply logging the event values to the console, but this is where we’d code features like alerts or interface updates to update the user on the event that’s just occurred.
Using this logic, every MyEvent emitted from MyContract will be caught here.