Solidity Events Tutorial - Using Web3.js to Listen for Smart Contract Events

The following tutorial is a part of our 100% free course: Developing Ethereum Smart Contracts for Beginners

In the previous lesson, our smart contract allowed you to set an Instructor name and age. You clicked a button to submit the new data to the contract, yet nothing happened in our GUI to give us an indication about the status of the transaction.

That's what events are for, and that's what we're going to cover in this lesson.

In simple terms, the purpose of an Event is to provide JavaScript callbacks in a user interface, which allows you to execute code based on whether or not the event was successful or if it errored.

In our example, this would mean providing a loading indicator that would disappear only once the transaction had been confirmed, and then update the name and age of the instructor.

Let's get started!

If you prefer watching a video instead..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

The Current Contract

Being that this tutorial is a part of our free Ethereum Developer Course, we have been working with a smart contract from the previous lessons. If you landed on this page without following along from the previous lessons, just copy and paste this contract in the Remix IDE:

pragma solidity ^0.4.18;

contract Coursetro {
    
   string fName;
   uint age;

   function setInstructor(string _fName, uint _age) public {
       fName = _fName;
       age = _age;
   }
   
   function getInstructor() view public returns (string, uint) {
       return (fName, age);
   }
   
}

It sets and gets an instructor's age and name.

Defining the Smart Contract Event

An event occurs when we set the Instructor's name. Let's define one in the contract just above the setInstructor() function:

    event Instructor(
       string name,
       uint age
    );

    // function setIns..

    // function getIns..

Notice we're passing in 2 types that will represent the name and age. When the event is successfully returned in the UI, we can access these values.

To actually use this event, we need to call the event and pass in the submitted name and age within the existing setInstructor() method, like so:

   function setInstructor(string _fName, uint _age) public {
       fName = _fName;
       age = _age;
       Instructor(_fName, _age);        // Add this
   }

Therefore, when setInstructor() is initiated by the user clicking the Set Instructor button in our UI, an event is created where we can listen to it through JavaScript and determine when to hide a loading graphic.

Updating the UI

Being that this tutorial is based on an on-going project from our Ethereum Developer's Course, you will need access to the previous lesson's project state to continue on. You can join the course for free and access the project files that way, or I will try to remember to create a Github repo where you can access them there.

Our current JavaScript for interacting with the smart contract looks like this:

    <script>
       if (typeof web3 !== 'undefined') {
           web3 = new Web3(web3.currentProvider);
       } else {
           web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
       }

       web3.eth.defaultAccount = web3.eth.accounts[0];

       var CoursetroContract = web3.eth.contract(YOUR ABI);

       var Coursetro = CoursetroContract.at('CONTRACT ADDRESS');

       Coursetro.getInstructor(function(error, result) {
           if (!error) {
               $("#instructor").html(result[0]+' ('+result[1]+' years old)');
           } else
                console.log(error);
       });

       $("#button").click(function() {
           $("#loader").show();
           Coursetro.setInstructor($("#name").val(), $("#age").val());
       });

    </script>

We're going to make some changes to this. First, we no longer need to call Coursetro.getInstructor(), so we're going to remove that.

Then, we're going to create a variable to reference our event:

// Replace the Coursetro.getInstructor() lines with this line:

var instructorEvent = Coursetro.Instructor();

Next, we're going to use the .watch() method on instructorEvent with a callback. Beneath the above line of code, paste this:

       instructorEvent.watch(function(error, result){
            if (!error)
                {
                    $("#loader").hide();
                    $("#instructor").html(result.args.name + ' (' + result.args.age + ' years old)');
                } else {
                    $("#loader").hide();
                    console.log(error);
                }
        });

Simple enough!

Notice that we're referencing #loader that doesn't yet exist. In the HTML body, paste the following line anywhere in the UI (I put mine beneath the <h2> element):

<img id="loader" src="https://loading.io/spinners/double-ring/lg.double-ring-spinner.gif">

Next, in the main.css file, add this ruleset:

#loader {
    width: 100px;
    display:none;
}

Before any of this will work, make sure you remember to use the Remix IDE to deploy the updated contract, copy and paste the ABI along with the new smart contract address. You will also need to make sure testrpc is running in the console.

If you did everything correctly, you can now view index.html in the browser, specify a name and age and hit Set Instructor.

After doing so, you should see this loading graphic for a short duration time, in which it will disappear and update the display of the instructor's name and age:

Conclusion

You should now have a solid understanding of how to create and use Solidity / Smart Contract Events with your decentralized apps.

In the next lesson, we're going to continue on by learning more about Developing Ethereum Smart Contracts for Beginners.