Web3 and Events Over WebSockets

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 . 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. 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. So from Remix I'll copy the ABI. Save it to a file. And then we can import the ABI into our JavaScript. And paste in the address. 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. 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. 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. 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. Let's send an event that changes the pixels. So I'll call set pixel 74. 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. 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. 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. 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. 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. 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. Now that we have these key components, we can start drawing a real image.