Created publisher and subscriber for crypto real time price comparing

rmp-thinx · Aug 10, 2019 · cf6a1fa · cf6a1fa
1 parent b055509
commit cf6a1fa
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 0 deletions.
diff --git a/Publisher.html b/Publisher.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Crypto Publisher</title>
+	<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.18.0.min.js"></script>
+</head>
+<body>
+	<script type="text/javascript">
+		var pubnub = new PubNub({
+		    publishKey:   'pub-c-bd12c531-5ad6-43cb-b684-83b345750d0a',
+		    subscribeKey: 'sub-c-4b87e932-bb24-11e9-9a34-7ee1361f6eff'
+			});
+		var xhr = new XMLHttpRequest();
+		function processRequest(e) {
+ 			if (xhr.readyState == 4 && xhr.status == 200) {
+		  	var response = JSON.parse(xhr.responseText);
+		        console.log(response);
+		        pubnub.publish({
+					    channel: 'bitcoin-feed',
+					    message: {
+					      eon: {
+					        'BitCoin': response.BTC.USD.toFixed(2)
+					      }
+					    }
+					  });
+		        pubnub.publish({
+					    channel: 'ether-feed',
+					    message: {
+					      eon: {
+					        'Ether': response.ETH.USD.toFixed(2)
+					      }
+					    }
+					  });
+		        pubnub.publish({
+					    channel: 'litecoin-feed',
+					    message: {
+					      eon: {
+					        'LiteCoin': response.LTC.USD.toFixed(2)
+					      }
+					    }
+					  });
+		    }
+		}
+		function mainApp() {
+			setInterval(function(){
+				xhr.open('GET', 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LTC&tsyms=USD', true)
+				xhr.send();
+				xhr.onreadystatechange = processRequest;
+			}, 10000)
+		};
+		mainApp();
+	</script>
+</body>
+</html>
diff --git a/Subscriber.html b/Subscriber.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Crypto Subscriber</title>
+		<!-- <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.18.0.min.js"></script> -->
+		<script type="text/javascript" src="https://pubnub.github.io/eon/v/eon/1.0.0/eon.js"></script>
+		<link type="text/css" rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.0.0/eon.css"/>
+</head>
+<body>
+
+	<div id="bitcoinChart"></div>
+	<div id="etherChart"></div>
+	<div id="liteCoinChart"></div>
+
+	<script type="text/javascript">
+		// You will only be subscribing to a channel, so no need for a publish key
+		var pubnub = new PubNub({
+		    subscribeKey: 'sub-c-4b87e932-bb24-11e9-9a34-7ee1361f6eff'
+		  });
+		// EON Charts configuration
+		var pointLimit = 15;
+		var topPadding = 100;
+		var bottomPadding = 100;
+		var eonData = {labels: true,type: 'line'};
+		var eonAxis = {y: {padding: {top:topPadding, bottom:bottomPadding}},
+									 x: {type: 'timeseries',tick: {format: '%H:%M:%S'}}};
+		// Create the EON Chart for BitCoin and bind its div
+		eon.chart({
+		  channels: ['bitcoin-feed'],
+		  history: true,
+		  flow: true,
+		  limit: pointLimit,
+		  pubnub: pubnub,
+		  generate: {
+		    bindto: '#bitcoinChart',
+		    data: eonData,
+		    axis: eonAxis
+		  }
+		});
+		// Create the Ether Chart for BitCoin and bind its div
+		eon.chart({
+		  channels: ['ether-feed'],
+		  history: true,
+		  flow: true,
+		  limit: pointLimit,
+		  pubnub: pubnub,
+		  generate: {
+		    bindto: '#etherChart',
+		    data: eonData,
+		    axis: eonAxis
+			}
+		});
+ 		// Create the LiteCoin Chart for BitCoin and bind its div
+		eon.chart({
+		  channels: ['litecoin-feed'],
+		  history: true,
+		  flow: true,
+		  limit: pointLimit,
+		  pubnub: pubnub,
+		  generate: {
+		    bindto: '#liteCoinChart',
+		    data: eonData,
+		    axis: eonAxis
+		  }
+		});
+	</script>
+</body>
+</html>