code.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- load MUI -->
    <link href="css/mui.min.css" rel="stylesheet" type="text/css" />
    <script src="js/mui.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"></link>
	   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
	<style type="text/css">
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 34px;
}
::-webkit-scrollbar-thumb:hover {
  background: #c0c0c0;
}
::-webkit-scrollbar-thumb:active {
  background: #c0c0c0;
}
::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 36px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
div#console {
    height: 450px;
    background: black;
	overflow:scroll;
}
</style>
  </head>
  <body>
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-96547514-4', 'auto');
  ga('send', 'pageview');

</script>
    <header class="mui-appbar mui--z1">
  <!-- Appbar HTML goes here -->
<div class="mui-container">
  <table width="100%">
    <tbody><tr class="mui--appbar-height">
      <td class="mui--text-title">BlockChainAPI Viewer</small></td>
      <td align="right">
        <ul class="mui-list--inline mui--text-body2">
          <li><a href="index.html"><i class="material-icons mui--align-middle" style="
    color: white;
    font-size: 20px;
">home</i></a></li>
          <li><a href="chart.html"><i class="material-icons mui--align-middle" style="
    color: white;
    font-size: 20px;
">timeline</i></a></li>
          <li><a href="code.html"><i class="material-icons mui--align-middle" style="
    color: white;
    font-size: 20px;
">code</i></a></li>
        </ul>
      </small></td>
    </tr>
  </tbody></table>
</div>
</header>
    <div class="mui-container" ng-app="myApp" ng-controller="myCtrl"><!-- example content -->
	<div class="mui-panel">
	<h3>Realtime Socket Console</h3>
  <!-- content -->
   <div class="mui-panel">
	  <div class="mui--text-left "><strong>Subscribe to an address</strong></div>
	     <div class="mui-textfield">
    <input type="text" placeholder="Address" id="input2">
  </div>
  <button class="mui-btn mui-btn--raised mui-btn--primary" onclick="Subscribe()">Execute</button>
      </div>
  <div id="console"></div>
  <button class="mui-btn mui-btn--raised mui-btn--primary" onclick="ResetSocket()">Reset Socket</button>
  <button class="mui-btn mui-btn--raised mui-btn--danger" onclick="ClearLog()">Clear Log</button>
</div>
	</div>
	<script>
	
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http,$timeout) {

});
</script>
<script>
var _console;
var ws;
var timer_id ;
var shouldScroll = false;
var _timer = 1000*30 //ping every  30 seconds
 $(this).ready(function(){
   StartSocket();
 });
function StartSocket(){
ws = new WebSocket('wss://ws.blockchain.info/inv');
   ws.onopen=function(e){
     _console= document.getElementById('console');
	_console.innerHTML+="<div style='color:#8BC34A'>Connected.....</div>";
  ws.send('{"op":"status", "msg", "Connected, Subscribed, Welcome etc..."}');
  ws.send('{"op":"unconfirmed_sub"}');
  ws.send('{"op":"blocks_sub"}');
  ws.send('{"op":"ping_tx"}');
   timer_id = setInterval(function(){
    if(ws.readyState==ws.OPEN){
	  //ws.send('{"op":"ping"}');
	}
   },_timer);};
   ws.onerror=function(e){ 
    _console.innerHTML+="<div style='color:#FF5722'>Socket error "+e.data+" .....</div>";};
   ws.onclose=function(e){ 
    _console.innerHTML+="<div style='color:#FF9800'>Socket closed "+e.data+" .....</div>";};
   ws.onmessage=function(e){
     _console = document.getElementById('console');
	 var bData = JSON.parse(e.data);
	 var data_="";
	 for(var i in bData){
	 data_+="	{"+i+":";
	   for(var j in bData[i]){
	    var value=bData[i][j];
	    if(typeof bData[i][j]== 'object'){
		  value=JSON.stringify(bData[i][j]);
		}
	     data_+="{"+j+":"+value+"}";};}
	 _console.innerHTML+="<div style='color: #9E9E9E;font-size: 10px;border-bottom: solid 0.5px #989696;margin-bottom: 10px;padding: 3px;box-sizing: border-box;'>"+data_+"</div>";
	 
   };
   }
   function Subscribe(){
   ClearLog();
    var address = document.getElementById('input2');
	ws = new WebSocket('wss://ws.blockchain.info/inv');
    _console.innerHTML+="<div style='color:#FF9800'>Subscribing to "+address.value+".....</div>";
	ws.onerror=function(e){ 
    _console.innerHTML+="<div style='color:#FF5722'>Socket error "+e.data+" .....</div>";};
   ws.onclose=function(e){ 
    _console.innerHTML+="<div style='color:#FF9800'>Socket closed "+e.data+" .....</div>";};
   ws.onmessage=function(e){
     _console = document.getElementById('console');
	 var bData = JSON.parse(e.data);
	 var data_="";
	 for(var i in bData){
	 data_+="	{"+i+":";
	   for(var j in bData[i]){
	    var value=bData[i][j];
	    if(typeof bData[i][j]== 'object'){
		  value=JSON.stringify(bData[i][j]);
		}
	     data_+="{"+j+":"+value+"}";};}
	 _console.innerHTML+="<div style='color: #9E9E9E;font-size: 10px;border-bottom: solid 0.5px #989696;margin-bottom: 10px;padding: 3px;box-sizing: border-box;'>"+bData.stringify+"</div>";
	 
   };
   ws.onopen=function(e){
   ws.send('{"op":"addr_sub", "addr":"'+address.value+'"}');
	}
   address.value='';
	
   }
   function ClearLog(){
   _console.innerHTML="";
   }
   function ResetSocket()
   {
    ClearLog();
    _console.innerHTML+="<div style='color:#FF5722'>Socket reset initialized .....</div>";
    StartSocket();
   }
</script>
  </body>
</html>