Million Ether Homepage

Storing Colors in a Pixel Grid

Million Ether Page Essential Smart Contract

Tip: Mining only when there are transactions

Tip: Using Remix IDE

Getting Started

Getting The Pixels and Ethereum Events

Building a DApp UI

Drawing in HTML Canvas

Using Websockets with Web3

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

Web3 and Events Over WebSockets

Drawing Pixels from the Blockchain

Viewing Pixels

The rest of the script can be found in `scripts/buy-pixels-001-read.js` below

Buying An Image -- Reading Pixels

Buying An Image -- Sending Transactions

Pixel bidding and structs

Payable Contracts, payable Functions

Contract Owner and require

Payable color pixel function

Buying Pixels

Sending funds from a contract

The safer way to send funds from a contract

Also note that any sort of math like this _should_ be checking for overflows, which we'll talk about later.

The Pull Payment Pattern - Withdraw payments when outbid

Million Ether Homepage Summary

Auctioning Pixels

solidity

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

Web3 can connect to our Ethereum node using Websockets. Websockets will let us keep a two-way connection open between our browser and our client. This means that our geth node will be able to push real-time updates to our browser.

We'll use this on our page to instantly draw any pixels that are purchased. 

 command. They look like the flags we used for 

. Here's the command, which you can copy and paste from the video notes:

./bin/geth --datadir=./datadir --nodiscover --rpc --rpcapi "db,personal,eth,net,web3,debug" --rpccorsdomain='*' --rpcaddr="localhost" --rpcport 8545 --ws --wsapi "db,personal,eth,net,web3,debug" --wsorigins='*' --wsaddr="localhost" --wsport 8546 console

---
title: Using Websockets with Web3 


slug: 'using-websockets-with-web3'
thumbnail: https://embed-ssl.wistia.com/deliveries/23a7abd160e2277fa294d871fa8196e81a777f78.jpg

privateVideoUrl: https://fullstack.wistia.com/medias/6915y7qsmp



---

Web3 can connect to our Ethereum node using Websockets. Websockets will let us keep a two-way connection open between our browser and our client. This means that our geth node will be able to push real-time updates to our browser.

We'll use this on our page to instantly draw any pixels that are purchased. 

In order to use Websockets with `geth`, we need to add some parameters to our `geth` command. They look like the flags we used for `rpc` only they begin with `ws`. Here's the command, which you can copy and paste from the video notes:

    ./bin/geth --datadir=./datadir --nodiscover --rpc --rpcapi "db,personal,eth,net,web3,debug" --rpccorsdomain='*' --rpcaddr="localhost" --rpcport 8545 --ws --wsapi "db,personal,eth,net,web3,debug" --wsorigins='*' --wsaddr="localhost" --wsport 8546 console

Nate Murray

Web3 can connect to our Ethereum node using WebSockets.

WebSockets will let us keep a two-way connection open between our browser and

This means that our Geth node will be able to push real-time updates to our

We'll use this on our page to instantly draw any pixels that are purchased.

In order to use WebSockets with Geth, we need to add some parameters to our G

They look like the flags we used for RPC only they begin with WS for WebSockets

Here's the command which you can copy and paste from the video notes.

Now in our index.js, let's connect to Geth using the Web3 WebSocket provider.

Let's check our account balances just to make sure the connection works.

And let's add this "check balance" function to our document on load.

If we take a look at our browser console, we can see that the account balance

so it worked. If you didn't see those balances, double check that your Geth is