In this course, we'll build a DApp inspired by [The Million Dollar Homepage](https://en.wikipedia.org/wiki/The_Million_Dollar_Homepage). We'll build a 1 million pixel page, and each pixel can be colored by placing the highest bid.

In this course we'll walk through every step of writing a smart contract, deploying it, hosting auctions, and connecting it to the browser through web3. 

If you're looking to build real, full-stack ethereum Dapps, then this is a perfectly-sized example.

We'll build a DApp inspired by the Million Dollar Homepage, powered by an auction on the Ethereum blockchain

Million Ether Homepage

---
title: Web3 and Events Over WebSockets


slug: 'web3-and-events-over-websockets'
thumbnail: https://embed-ssl.wistia.com/deliveries/c47a317a96aca0ca26ced1fdb8c768b58548ef5e.jpg

privateVideoUrl: https://fullstack.wistia.com/medias/t0zrbglkcy



---

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, 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 and I also have my accounts unlocked, and geth setup to mine.

We start by deploying our contract then grab the contract address and the ABI. 

    // Deploy contract
    // Copy ABI
    pbpaste > src/MillionEtherPage.abi.json
    cat src/MillionEtherPage.abi.json | jq '.'

```javascript
// import the ABI
const abi = require('./MillionEtherPage.abi.json');

const mepAddress =
  '0x95361244b0cc2410c52ecb3e2b90c96e9448834c';

let mep = new web3.eth.Contract(abi, mepAddress);
```

> We don't need the checkBalance 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 don't need the checkBalance function anymore, so let's get rid of it.