The Basics of Using Web3.js with Ethereum

In the last part of this series we covered writing Ethereum smart contracts and used Remix IDE — an IDE for solidity built into the Mist browser — to interact with them. Now let’s take a look at the Web3.js library, commonly used to interact with the Ethereum blockchain via JSON RPC. It’s basically a utility knife for interacting with Ethereum.

Let’s take a short moment to examine how all of these pieces fit together to form the Ethereum ecosystem. Ethereum itself is the blockchain that powers the transactional aspects of the ecosystem — think of it like the network that Visa or Mastercard run except that it is run publicly by many people around the world. In exchange for their contributions to the network (i.e. running Ethereum nodes on their own hardware) these people are paid by the “gas” fees that each transaction generates. A smart contract is a piece of binary code that is stored on the Ethereum blockchain, and to get it on the blockchain a user must pay gas fees. Gas fees are also collected for simple peer-to-peer transactions, as well as for any call to a smart contract that modifies data within the contract.

Consider the use case of selling tickets to an event using an Ethereum smart contract. The contract itself will contain a set of functions, likely something along the lines of purchase, redeem, and transfer — along with a few data structures to contain the ticket data itself and associate tickets with the wallet addresses of the ticket buyers. The blockchain contains the contract code, and acts as the storage device for the data structures the contract uses, all of this is collectively referred to as a smart contract. On the frontend side you use a library such as Web3.js to initiate requests to the contract (i.e. redeem, purchase, etc) made by your users. Web3.js is simply acting as the bridge between your application frontend and the blockchain.

There are a number of ways to connect to the Ethereum blockchain using Web3.js. It’s possible to connect to a remote (or local) instance of your Ethereum client of choice such as geth or parity, and it is also possible to connect using a third party plugin like metamask — although we won’t discuss how to do this in this article.

Let’s start off using some of what we covered in the last article and use Web3.js to connect to parity on the test network. I’ll be using the contract we designed in this previous article. We’re going to use node.js to create a small CLI script that will pass a number to the chooseNumber method of our smart contract. Start off by running:

npm install web3@^1.0.0-beta.34

Now, create a new file in the same directory with the .js extension (I named mine test.js). Place the following code in this file:

The script above does a few things. First, it requires the web3 library, and then it creates a web3 object that is connected to our local parity instance via WebSockets. Then it creates a contract using the web3.eth.Contract constructor, injecting the contract’s ABI (acronym standing for Application Binary Interface) as the first parameter, and the address to the contract in the second parameter. The ABI is basically an interface that tells web3 how to format and send the data being passed to it by your node application.

I’ve taken the liberty of inserting the ABI from the contract designed in the previous article, but I’ll outline where you can get that on your own in a moment. You will also need to insert your own contract address into the above code, and your own wallet address that will pay for the gas fees to run the transaction on the Ethereum network.

Now let’s get the ABI from Remix. Open Remix and compile the script we built in Ethereum 101. Then next to the dropdown containing your scripts name you will see a button labeled “Details” as in the screenshot below:

Click “Details” and then find the section labeled “ABI” as in the screenshot below:

Click the first icon next to the words ABI to copy the ABI JSON to your clipboard. The ABI from your clipboard is the first parameter in the web3.eth.Contract call to create the contract object. This should match what you have if you’re using the contract code from the previous article.

The second parameter of web3.eth.Contract should be the address of the contract you deployed to the blockchain. Navigate to the “Run” tab in Remix and scroll down to the bottom you should see a gold icon as pictured below:

Click this icon and the contract’s address will be copied to your clipboard. Paste this into the function above where I have the placeholder <your contract address>. Finally, where it says <your wallet address>, copy the wallet address that will pay the gas fees for this transaction and paste it there.

Since we are using WebSockets to connect with parity this time, you’re going to need to add the following flags to the parity command line startup call:

--ws-interface all --ws-hosts all --ws-port 8546 --ws-origins all

This allows WebSockets to work and allows us to connect with them. Altogether, my startup command looks like so:

parity --chain=ropsten --no-ancient-blocks --geth --ws-interface all --ws-hosts all --ws-port 8546 --ws-origins all --force-ui --jsonrpc-interface 0.0.0.0 --jsonrpc-hosts all --jsonrpc-cors http://127.0.0.1:8080 --jsonrpc-apis web3,eth,rpc

We still need the RPC ports open so we can access the parity control panel via our browser.

Finally, let’s take this script for a spin! Run the following command from the terminal containing your script (mine is called test.js):

node test.js 6

You should now see a request to unlock your wallet in the parity browser control panel. Mine looks as pictured below:

Unlock the account with your password, and the call to your contract will be submitted to the blockchain. In the console you should first see a transaction hash, and you can manually check in on the status of your transaction using etherscan.io. Visit https://ropsten.etherscan.io/tx/<your transaction hash> to see it’s status. Eventually once the transaction is mined the receipt function will fire and log confirmations from various miners.

If you have questions let me know in the comments. Happy coding!