How To Build A Realtime Poll On Blockchain

Build real-time polling application over Ethereum Blockchain with PieSocket.

Today we are going to see how to build a realtime polling system over Blockchain. We have already covered a tutorial on how to build a realtime polling system without involving blockchain with PieSocket, you can read it here.

You can see the demo of the application we are about to build here: Real-time Poll Over Blockchain Demo

You need an Ethereum wallet like MetaMask to cast vote on blockchain. You also need some ether in your wallet to pay for the gas fee.

This demo uses Rinkeby Test Blockchain Network, which means you can cast your vote using fake Ethereum and save real money.

Guide to get fake Ether for testing: https://medium.com/compound-finance/the-beginners-guide-to-using-an-ethereum-test-network-95bbbc85fc1d

Why Blockchain?

Two words answer: Trust & Transparency

Data/contracts/transactions stored on blockchain can not be changed and there is a transparent record for all the changes that are made.

Blockchain contracts can be considered as trustworthy evidence of events and transactions.

We are building a polling system for which trust and transparency are the core factors. Keeping that in mind, we will manage record of each vote on the blockchain.

Transparency does not mean anyone will be able to see who voted whom. While anyone can see who voted when and how many times, they will not be able to see the contents of the blockchain contract (vote).

We will use PieSocket’s Blockchain realtime feature to build this system and PieSocket takes care of all the security practices out of the box.

PieSocket provides an API secret which can be used by admins to decode the data in a blockchain transaction, giving the admin power to see the votes.

Frontend

Let’s quickly build the frontend UI for our polling system considering the following features:

We will build two pages.

  1. For voters: To cast their vote
  2. For admins: To see the poll results in real-time.

Lets begin by creating a file voter.html

This HTML with Tailwind CSS creates the following UI

Lets add some Javascript to create the voting feature.

We will create a function voteFor to cast a vote for the selected cartoon character.

But, before that lets add PieSocketJS to the code. Use the following tag to include PieSocket in your page.

We are ready to use PieSocket. Add following code to initialise PieSocket. We are using a Test API key, replace it with yours.

blockchainTestMode: true configures PieSocket to use Rinkeby Test Network (free to test) instead of Main Ethereum Network.

Next, we will subscribe to a channel. Let’s call it blockchain-polls

Add two event handlers for when an error occurs and for when the voting is recorded.

We are ready to write our voteFor function.

Above function will be called when users click on a candidate’s image.

It will open MetaMask on your browser, click confirm to accept the transaction and cast your vote on the Blockchain.

Backend

We need a backend to see the list of votes in realtime.

We are using PHP in this example, but writing similar code in any backend language should be as easy to write.

Let’s create a file admin.php and add the following UI to it.

And add the following Javascript in the page to show the incoming votes.

You should have a backend as shown below.

There is one problem yet.

Votes disappear when we refresh the page.

We can use PieSocket REST APIs to fetch previous blockchain messages for any channel.

Add the following code on the top of the PHP file.

Above code calls the PieSocket Account API to fetch blockchain contracts/messages and stores them in a variable $previousVotes

You can print them in the page like this

This covers our simple polling system with Blockchain integration.

Every vote is registered on the Blockchain network and can be viewed using the transaction hash.

Following is an example record: https://rinkeby.etherscan.io/tx/0x863575cfb66bc96a81e9f80e076e4fb56a47b48a2a91dae43c2b4fa59a18e075

You can see the input data of each contract on the link above. It is a AES-256 encrypted hash (military grade security) which can be decoded with your API secret.