How To Build A Realtime Poll On Blockchain

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.

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

Lets begin by creating a file voter.html

<!DOCTYPE html>

<head>

<title>Blockchian Polling</title>

</head>

<body>

<div>

Vote For Your Favourite Cartoon Character

</h2>

Vote for your favorite cartoon character. You can change your mind later but not the vote, this is going on

Blockchain.

</p>

<a href="https://metamask.io/download" target="_blank"

class="flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">

Install MetaMask Wallet

</a>

</div>

<a target="_blank" href="https://piesocket.com/blog/realtime-polling-over-blockchain"

class="flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200">

View Tutorial

</a>

</div>

<a class="mt-6 inline-block underline text-blue-500" href="./admin.php">View Poll Results</a>

</div>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</body>

</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.

1	<script src="https://unpkg.com/piesocket-js@1.4/dist/piesocket.js"></script>

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

var piesocket = new PieSocket({

clusterId: 'demo',

apiKey: 'oCdCMcMPQpbvNjUIzqtvF1d2X2okWpDQj4AwARJuAgtjhzKxVEjQU6IdCjwm',

blockchainTestMode: true,

blockchainGasFee: 35000

});

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

1	var channel = piesocket.subscribe("blockchain-polls");

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

channel.on('blockchain-error', function(e) {

alert(e);

})

channel.on('blockchain-hash', function(e) {

alert("Your vote is recorded, you can vote again but Ethereum will know.");

})

We are ready to write our voteFor function.

function voteFor(name) {

channel.publish("vote", {

votedFor: name

}, {

blockchain: true

});

}

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.

<!DOCTYPE html>

<head>

<title>Blockchian Polling Results</title>

</head>

<body>

Latest votes

</h2>

Following are the most recent 20 votes.

</p>

</ul>

</div>

</body>

</html>

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

var piesocket = new PieSocket({

clusterId: 'demo',

apiKey: 'oCdCMcMPQpbvNjUIzqtvF1d2X2okWpDQj4AwARJuAgtjhzKxVEjQU6IdCjwm'

});

var channel = piesocket.subscribe("blockchain-polls");

channel.listen("vote", function(data, meta) {

var template = `<li class="p-6">

<button class="float-right bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">View on

Etherscan

</button>

</a>

<p>${data.votedFor}</p>

<p>Transaction hash: ${meta.transaction_hash}</p>

</li>`;

var voterList = document.getElementById("votes");

voterList.innerHTML = template + voterList.innerHTML;

});

</script>

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.

<?php

$curl = curl_init();

curl_setopt_array($curl, array(

CURLOPT_URL => 'https://www.piesocket.com/api/contracts?channel=piedemo-cartoon-polls',

CURLOPT_RETURNTRANSFER => true,

CURLOPT_ENCODING => '',

CURLOPT_MAXREDIRS => 10,

CURLOPT_TIMEOUT => 0,

CURLOPT_FOLLOWLOCATION => true,

CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,

CURLOPT_CUSTOMREQUEST => 'GET',

CURLOPT_HTTPHEADER => array(

'key: oCdCMcMPQpbvNjUIzqtvF1d2X2okWpDQj4AwARJuAgtjhzKxVEjQU6IdCjwm',

'secret: d8129f82f8dd71910aa4a7efa30a7297'

));

$response = curl_exec($curl);

curl_close($curl);

$previousVotes = json_decode($response,true)['data'];

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

<?php

foreach($previousVotes as $vote){

$data = json_decode($vote['message']);

echo '<li class="p-6">

<button class="float-right bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">View on

Etherscan

</button>

</a>

<p>'.$data->votedFor.'</p>

<p>Transaction hash: '.$vote['transaction_hash'].'</p>

</li>';

}

</ul>

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.

Why Blockchain?

Frontend

Backend

Related Posts

How To Build A WebSocket Server In Java

How To Build WebSocket Server In Golang

How To Build Realtime Charts With JavaScript and WebSocket