Display Real-Time Bitcoin Transactions with JQuery and Websocket

Websockets provide the client a real-time connection to a server. Websockets use their own ws: protocol so they don't use the HTTP protocol. Websockets can connect the user and server so that they receive information as it becomes available, instead of constantly sending requests back and forth to see if new data is available. Blockchain.info has a websocket API so you can get real-time information on new transactions and new blocks as they happen. The sad thing is the documentation available on their websocket page is almost non-existant and there is no example code. They provide you with the wss link to connect to and then the names of new transactions and blocks you can "subscribe" to after you connect to the websocket, but that is it. I'm going to show you how to use javascript to connect to a websocket, subscribe to messages and begin displaying live data on your website.

First of all let's put in our script tags <script></script> and then we'll establish a connection to our websocket using new WebSocket().


var btcs = new WebSocket('wss://ws.blockchain.info/inv');

So we started by creating the variable var btcs and then we had that be equal to the new websocket connection. Now that we have a connection to the websocket we need to send it a message and tell blockchain.info which information we are interested in receiving. We are going to use the onopen and send API commands to do this. Let's call the previous variable var btcs and create a function that subscribes us to {"op":"unconfirmed_sub"} which is new transactions to the bitcoin network.


btcs.onopen = function(){

	btcs.send(JSON.stringify({"op":"unconfirmed_sub"}));

	};

JSON.stringify will send a JSON request to the websocket server telling it that we want to receive updates on new transactions to the network. At this point the server will start sending "messages" to the client everytime there is a new transaction. We need to tell javascript what to do everytime a message is received using the onmessage command. Create a new function using onmessage and I'm going to name the function onmsg. Within that function we will parse the JSON using the data command.


btcs.onmessage = function(onmsg){

	var response = JSON.parse(onmsg.data);

	console.log(response);

	}

At this point you could stick this script into an HTML document and when you run it, it will start shooting out all the new transactions as objects in JSON format into your browsers debug/console. If you look at it you'll notice they all start with utx and then all the transaction data is under x . The data within the x array includes input and out or sender and receiver. If we want info form the input area we would call the response variable and then add in .x.input . However there can be multiple inputs and outs so we have to clarify which one. If we add in stright brackets and put a zero [0]that will get us information on the first item in the array. Here's an example that will get the BTC amount that was received by the first output.


btcs.onmessage = function(onmsg){

	var response = JSON.parse(onmsg.data);

	var amount = response.x.out[0].value;

	var calAmount = amount / 100000000;

	console.log(calAmount);

	}

You'll notice I also added in a calculation to divide the result by 100 million to get the value in bitcoins since the data is provided in satohis. Since it's still just going to the debug/console that's not very helpful to the user, let's add in some jquery to have this info output on the page. You can either install jquery to your server or just use a link to grab the min.js from jquery.com http://code.jquery.com/jquery-1.11.0.min.js.

Within the onmessage function I'm going to start with $('#messages') which tells jquery to look for the element in the HTML that has the ID of "messages". Since I don't have one yet I'll add some HTML and create a div with the ID "messages". Now I'll tell jquery to prepend $(add to the top$) each new amount within a p tag.

The completed code will look like this


<html>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>



<script>

var btcs = new WebSocket('wss://ws.blockchain.info/inv');



btcs.onopen = function()

	{

	btcs.send( JSON.stringify( {"op":"unconfirmed_sub"} ) );

	};



btcs.onmessage = function(onmsg)

	{

	var response = JSON.parse(onmsg.data);

	var amount = response.x.out[0].value;

	var calAmount = amount / 100000000;

	$('#messages').prepend("<p>" + calAmount + "</p>");

	}



</script>

<body>

<div id="messages"></div>

</body>

</html>

Now you have a live stream of all new bitcoin transactions using a websocket. You can use CSS to style it or whatever you like. You add in some code to the onmessage function that has the browser play a note everytime a new transaction goes through and make something like bitlisten.com. It's up to your imagination!