Web3 and Events Over WebSockets

We don't need the checkBalance function anymore, so let's get rid of it.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Million Ether Homepage course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Million Ether Homepage, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Million Ether Homepage

  • [00:00 - 00:04] Now let's connect to the app in our browser and listen for events. I'm going to be using Remix for this video, but remember that you don't have to .

    [00:05 - 00:11] You can use the Geth console or any other method you want to deploy your contracts. Right now I have RemixD and Geth running in my terminal.

    [00:12 - 00:19] I also have my accounts unlocked and Geth set up to mine. We start by deploying our contract and then grab the contract address in the A BI.

    [00:20 - 00:30] So from Remix I'll copy the ABI. Save it to a file.

    [00:31 - 00:58] And then we can import the ABI into our JavaScript. And paste in the address.

    [00:59 - 01:17] Then we can create an instance of this contract using web3.eth.contract and passing in the ABI and the address. We don't need the check balance function anymore, so let's get rid of it.

    [01:18 - 01:29] Now that we have our contract instance, there are two methods we can use to read events. The first one gets historic events and the second one subscribes to all new events.

    [01:30 - 01:38] We haven't generated any events for this contract yet, so let's start with subscribing to new events. The contract instance exposes events on the events key.

    [01:39 - 01:51] Here's how we can watch for all new pixel changed events. We'll type "nep.events.pixelChanged" and we're searching "from block 0" and then we'll log out any of the events.

    [01:52 - 02:01] Let's send an event that changes the pixels. So I'll call set pixel 74.

    [02:02 - 02:13] I'll click this button to set a pixel and quickly flip back over to our UI and watch the console. It works! We were pushed an event from our smart contract over web sockets and into JavaScript.

    [02:14 - 02:23] One particularly useful property of this event object is "return values". Notice here that it has three, the X, the Y and the hex bytes representing our color code.

    [02:24 - 02:33] This is the data that we'll use to draw on our page. To read past events, we'll use the "getpast events" function and then pass the name of the event like this.

    [02:34 - 02:45] Type "mep.getpastevents" and the name of the event "pixelChanged" and here we 'll say we want "from block 3" and then log it out. Where I'm writing "from block 3" that's an example of a filter.

    [02:46 - 02:52] We can use filters to limit the scope of events we're interested in. In this case, we'd only get events that happen in block 3 and beyond.

    [02:53 - 03:05] Let's try it by refreshing our page and checking the console. Nice! Notice that we have an array of events, which is all of the pixelChanged events that have happened since block 3.

    [03:06 - 03:09] Now that we have these key components, we can start drawing a real image.