307 lines
12 KiB
HTML
307 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
|
<style>
|
|
.row {
|
|
margin-top: 1%;
|
|
}
|
|
</style>
|
|
<title>Blockbook Websocket Test Page</title>
|
|
<script>
|
|
var ws;
|
|
var messageID;
|
|
var pendingMessages;
|
|
var subscriptions;
|
|
function send(method, params, callback) {
|
|
id = messageID.toString();
|
|
messageID++;
|
|
pendingMessages[id] = callback;
|
|
var req = {
|
|
id,
|
|
method,
|
|
params
|
|
}
|
|
ws.send(JSON.stringify(req));
|
|
return id;
|
|
}
|
|
function subscribe(method, params, callback) {
|
|
id = messageID.toString();
|
|
messageID++;
|
|
subscriptions[id] = callback;
|
|
var req = {
|
|
id,
|
|
method,
|
|
params
|
|
}
|
|
ws.send(JSON.stringify(req));
|
|
return id;
|
|
}
|
|
function connect(server) {
|
|
messageID = 0;
|
|
pendingMessages = {}
|
|
subscriptions = {}
|
|
if (server.startsWith("http")) {
|
|
server.replace("http", "ws");
|
|
}
|
|
if (!server.endsWith("/websocket")) {
|
|
server += "/websocket";
|
|
}
|
|
ws = new WebSocket(server);
|
|
ws.onopen = function (e) {
|
|
console.log('socket connected', e);
|
|
document.getElementById('connectionStatus').innerText = "connected";
|
|
};
|
|
ws.onclose = function (e) {
|
|
console.log('socket closed', e);
|
|
document.getElementById('connectionStatus').innerText = "disconnected";
|
|
};
|
|
ws.onerror = function (e) {
|
|
console.log('socket error ', e);
|
|
document.getElementById('connectionStatus').innerText = "error";
|
|
};
|
|
ws.onmessage = function (e) {
|
|
console.log('resp ' + e.data);
|
|
var resp = JSON.parse(e.data);
|
|
var f = pendingMessages[resp.id];
|
|
if (f != undefined) {
|
|
delete pendingMessages[resp.id];
|
|
f(resp.data);
|
|
} else {
|
|
f = subscriptions[resp.id];
|
|
if (f != undefined) {
|
|
f(resp.data);
|
|
}
|
|
else {
|
|
console.log("unkown response " + resp.id);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
function getAccountInfo() {
|
|
const descriptor = document.getElementById('getAccountInfoDescriptor').value.trim();
|
|
const selectDetails = document.getElementById('getAccountInfoDetails');
|
|
const details = selectDetails.options[selectDetails.selectedIndex].value;
|
|
const page = parseInt(document.getElementById("getAccountInfoPage").value);
|
|
const pageSize = 10;
|
|
const method = 'getAccountInfo';
|
|
const params = {
|
|
descriptor,
|
|
details,
|
|
page,
|
|
pageSize,
|
|
};
|
|
send(method, params, function (result) {
|
|
document.getElementById('getAccountInfoResult').innerText = JSON.stringify(result).replace(/,/g, ", ");
|
|
});
|
|
}
|
|
|
|
function sendTransaction() {
|
|
var hex = document.getElementById('sendTransactionHex').value.trim();
|
|
const method = 'sendTransaction';
|
|
const params = {
|
|
hex,
|
|
};
|
|
send(method, params, function (result) {
|
|
document.getElementById('sendTransactionResult').innerText = JSON.stringify(result).replace(/,/g, ", ");
|
|
});
|
|
}
|
|
|
|
function subscribeNewBlock() {
|
|
const method = 'subscribeNewBlock';
|
|
const params = {
|
|
};
|
|
var id = subscribe(method, params, function (result) {
|
|
document.getElementById('subscribeNewBlockResult').innerText += JSON.stringify(result).replace(/,/g, ", ") + "\n";
|
|
});
|
|
document.getElementById('subscribeNewBlockId').innerText = id;
|
|
}
|
|
|
|
function subscribeAddress() {
|
|
const method = 'subscribeAddress';
|
|
var address = document.getElementById('subscribeAddressName').value;
|
|
const params = {
|
|
address
|
|
};
|
|
var id = subscribe(method, params, function (result) {
|
|
document.getElementById('subscribeAddressResult').innerText += JSON.stringify(result).replace(/,/g, ", ") + "\n";
|
|
});
|
|
document.getElementById('subscribeAddressIds').innerText += " " + id ;
|
|
}
|
|
|
|
function getBlockHeader() {
|
|
var param = document.getElementById('getBlockHeaderParam').value.trim();
|
|
lookupBlockHash(isHash(param) ? param : parseInt(param), function (result) {
|
|
console.log('getBlockHeader sent successfully');
|
|
console.log(result);
|
|
document.getElementById('getBlockHeaderResult').innerText = JSON.stringify(result).replace(/,/g, ", ");
|
|
});
|
|
}
|
|
|
|
function isHash(str) {
|
|
var re = /[0-9A-Fa-f]{64}/g;
|
|
return re.test(str);
|
|
}
|
|
|
|
function lookupBlockHash(heightOrHash, f) {
|
|
const method = 'getBlockHeader';
|
|
const params = [heightOrHash];
|
|
return socket.send({ method, params }, f);
|
|
}
|
|
|
|
function estimateFee() {
|
|
var blocks = document.getElementById('estimateFeeBlocks').value.trim();
|
|
estimateTxFee(parseInt(blocks), function (result) {
|
|
console.log('estimateFee sent successfully');
|
|
console.log(result);
|
|
document.getElementById('estimateFeeResult').innerText = JSON.stringify(result).replace(/,/g, ", ");
|
|
});
|
|
}
|
|
|
|
function estimateTxFee(blocks, f) {
|
|
const method = 'estimateFee';
|
|
const params = [blocks];
|
|
return socket.send({ method, params }, f);
|
|
}
|
|
|
|
function getInfo() {
|
|
lookupSyncStatus(function (result) {
|
|
console.log('getInfo sent successfully');
|
|
console.log(result);
|
|
document.getElementById('getInfoResult').innerText = JSON.stringify(result).replace(/,/g, ", ");
|
|
});
|
|
}
|
|
|
|
function lookupSyncStatus(f) {
|
|
const method = 'getInfo';
|
|
const params = [];
|
|
return socket.send({ method, params }, f);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<h1>Blockbook Websocket Test Page</h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<input class="btn btn-secondary" type="button" value="Login" onclick="connect(document.getElementById('serverAddress').value)">
|
|
</div>
|
|
<div class="col-8">
|
|
<input type="text" class="form-control" id="serverAddress" value="">
|
|
</div>
|
|
<div class="col form-inline">
|
|
<label id="connectionStatus">not connected</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<input class="btn btn-secondary" type="button" value="getAccountInfo" onclick="getAccountInfo()">
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="row" style="margin: 0;">
|
|
<input type="text" style="width: 67.7%" class="form-control" id="getAccountInfoDescriptor" value="0x103262f243e6f67d12d6a4ea0d45302c1fa4bb0a">
|
|
<select id="getAccountInfoDetails" style="width: 20%; margin-left: 5px;">
|
|
<option value="basic">Basic</option>
|
|
<option value="balance">Balance</option>
|
|
<option value="txids">Txids</option>
|
|
<option value="txs">Transactions</option>
|
|
</select>
|
|
<input type="text" style="width: 10%; margin-left: 5px; margin-right: 5px;" class="form-control" id="getAccountInfoPage" value="0">
|
|
</div>
|
|
</div>
|
|
<div class="col form-inline"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col" id="getAccountInfoResult">
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="row">
|
|
<div class="col">
|
|
<input class="btn btn-secondary" type="button" value="getBlockHeader" onclick="getBlockHeader()">
|
|
</div>
|
|
<div class="col-8">
|
|
<input type="text" class="form-control" id="getBlockHeaderParam" value="0">
|
|
</div>
|
|
<div class="col">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col" id="getBlockHeaderResult">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<input class="btn btn-secondary" type="button" value="estimateFee" onclick="estimateFee()">
|
|
</div>
|
|
<div class="col-8">
|
|
<input type="text" class="form-control" id="estimateFeeBlocks" value="20">
|
|
</div>
|
|
<div class="col"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col" id="estimateFeeResult">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<input class="btn btn-secondary" type="button" value="getInfo" onclick="getInfo()">
|
|
</div>
|
|
<div class="col-10" id="getInfoResult">
|
|
</div>
|
|
</div>
|
|
-->
|
|
<div class="row">
|
|
<div class="col">
|
|
<input class="btn btn-secondary" type="button" value="sendTransaction" onclick="sendTransaction()">
|
|
</div>
|
|
<div class="col-8">
|
|
<input type="text" class="form-control" id="sendTransactionHex" value="010000000001019d64f0c72a0d206001decbffaa722eb1044534c74eee7a5df8318e42a4323ec10000000017160014550da1f5d25a9dae2eafd6902b4194c4c6500af6ffffffff02809698000000000017a914cd668d781ece600efa4b2404dc91fd26b8b8aed8870553d7360000000017a914246655bdbd54c7e477d0ea2375e86e0db2b8f80a8702473044022076aba4ad559616905fa51d4ddd357fc1fdb428d40cb388e042cdd1da4a1b7357022011916f90c712ead9a66d5f058252efd280439ad8956a967e95d437d246710bc9012102a80a5964c5612bb769ef73147b2cf3c149bc0fd4ecb02f8097629c94ab013ffd00000000">
|
|
</div>
|
|
<div class="col">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col" id="sendTransactionResult"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<input class="btn btn-secondary" type="button" value="subscribe new block" onclick="subscribeNewBlock()">
|
|
</div>
|
|
<div class="col-8">
|
|
<span id="subscribeNewBlockId"></span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col" id="subscribeNewBlockResult"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<input class="btn btn-secondary" type="button" value="subscribe address" onclick="subscribeAddress()">
|
|
</div>
|
|
<div class="col-8">
|
|
<input type="text" class="form-control" id="subscribeAddressName" value="2MzTmvPJLZaLzD9XdN3jMtQA5NexC3rAPww">
|
|
</div>
|
|
<div class="col">
|
|
<span id="subscribeAddressIds"></span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col" id="subscribeAddressResult">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
document.getElementById('serverAddress').value = window.location.protocol.replace("http", "ws") + "//" + window.location.host;
|
|
</script>
|
|
|
|
</html> |