How to subscribe to an event calling listener on web3?

In Web3 technology, subscribing to events is a very common and important feature, especially when interacting with smart contracts. This enables real-time monitoring of changes in the contract state, which is crucial for the user experience of decentralized applications (DApps). Below are the steps and examples for subscribing to events and handling event listeners using the Web3.js library.

Step 1: Initialize Web3 and Contract Instance

First, ensure you have the Web3.js library and have initialized the Web3 instance using the provided HTTP provider (e.g., Infura). Then, you need the smart contract's ABI and address to create the contract instance.

javascript
const Web3 = require('web3');
const web3 = new Web3('https://mainnet.infura.io/v3/your project ID');

const contractABI = [...] // Smart contract's ABI
const contractAddress = '0xContractAddress';
const myContract = new web3.eth.Contract(contractABI, contractAddress);

Step 2: Subscribe to Events

Once you have the contract instance, you can subscribe to specific events using it. Assuming the contract has an event named DataUpdated, you can subscribe to it as follows:

javascript
myContract.events.DataUpdated({
    fromBlock: 0
}, function(error, event) {
    if (error) {
        console.error("Error on event", error);
    } else {
        console.log("Event triggered:", event);
    }
})
.on('data', function(event) {
    console.log('Data received:', event); // Event data returned
})
.on('changed', function(event) {
    console.log('Changed:', event); // Changed event data
})
.on('error', console.error);

Example: Handling Business Logic

Suppose you are developing a DApp that allows users to update their profiles, and each profile update triggers a ProfileUpdated event. You can listen for this event and update the UI in real-time on the frontend.

javascript
myContract.events.ProfileUpdated({
    fromBlock: 'latest'
}, function(error, event) {
    if (error) {
        console.error("Error on profile update event", error);
    } else {
        console.log("Profile updated for user:", event.returnValues.userId);
        updateUI(event.returnValues.userId, event.returnValues.newProfileData);
    }
})
.on('data', function(event) {
    console.log('New profile data received:', event.returnValues.newProfileData);
})
.on('error', console.error);

The updateUI function is hypothetical and is used to update the user interface based on the new profile data.

Summary

By doing this, you can listen for any events triggered by smart contracts and execute the corresponding logic when they occur. This is very useful for building DApps that respond to user actions and update the state in real-time. This pattern enhances user experience and allows developers to build more dynamic and interactive applications.