Skip to content

Instantly share code, notes, and snippets.

@blockspacer

blockspacer/index.html

Created January 9, 2018 11:17
Show Gist options
  • Save blockspacer/7b41da922e4f4c3340b89b8a6c59f977 to your computer and use it in GitHub Desktop.
Save blockspacer/7b41da922e4f4c3340b89b8a6c59f977 to your computer and use it in GitHub Desktop.
Download ZIP
tmp mosaic
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>adasdasd</title>
<script type="text/javascript" src="nem-sdk.js"/></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<body>
<div>Hello</div>
<div style="padding-top: 20px" id="success"></div>
<div style="padding-top: 20px">
<table>
<tbody id="dynamic_global"></tbody>
</table>
</div>
<div class="jumbotron text-center">
<h1>WebSockets</h1>
</div>
<div id="stream" style="width: 850px;height: 350px;margin: auto;border: 1px solid #444;padding: 20px;overflow: auto;"></div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Transactions in block <span id="txsHeight"></span></h4>
</div>
<div id="txs" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//var Api = window.nem-sdk;
var nem = require("nem-sdk").default;
// Get an empty object
//var transferTransaction = nem.model.objects.get("transferTransaction");
// Create an NIS endpoint object
var endpoint = nem.model.objects.create("endpoint")(nem.model.nodes.defaultTestnet, nem.model.nodes.websocketPort);
var req_endpoint = nem.model.objects.create("endpoint")(nem.model.nodes.defaultTestnet, nem.model.nodes.defaultPort);
// Address to subscribe
var address = "TC5RAAPINKE4YOFWB7E7QY2ELAAJIRQLIW5KCR4O";
// Create a connector object
var connector = nem.com.websockets.connector.create(endpoint, address);
// Set start date of the monitor
var date = new Date();
var MOSAIC_CREATION_ACCOUNT = "TCNIF4R27MWF6CY6V5DFKOZI4ON4TNOTB3GKO2OG";
// Add event to the stream div
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Starting monitor...</p>');
// Try to establish a connection
connect(connector);
// Connect using connector
function connect(connector){
return connector.connect().then(function() {
// Set time
date = new Date();
// If we are here, we are connected
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Connected to: '+ connector.endpoint.host +'</p>');
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Subscribing to errors</p>');
// Subscribe to errors channel
nem.com.websockets.subscribe.errors(connector, function(res){
// Set time
date = new Date();
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Received error</p>');
// Show data
$('#stream').append('<p><b>'+ date.toLocaleString()+': <pre>' + JSON.stringify(res) +'</pre>');
});
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Recieving mosaic definition</p>');
// TODO: periodic task
nem.com.requests.namespace
.mosaicDefinition(req_endpoint, "blockspace", "x0y0").then(
function(res) {
// If code >= 2, it's an error
if (res.code >= 2) {
console.log("[NEM] [ERROR] Could not get mosaic definition " + ": " + JSON.stringify(res));
return false;
}
console.log("[SUCCESS] Successfully recieved mosaic definition: " + JSON.stringify(res));
},
function(err) {
console.error(err);
});
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Subscribing to new mosaic definitions by account</p>');
// Subscribe to new mosaic definitions by account
// (!) Gets all mosaics created by account (one-by-one) every time any mosaic changes/creates
// @see https://github.com/NemProject/NanoWallet/blob/be6f84ef88bcd9863654797a832d8d99a96c1320/src/app/services/dataBridge.service.js#L264
nem.com.websockets.subscribe.account.mosaics.definitions(connector, function(res){
// Set time
date = new Date();
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Received a new mosaic definition</p>');
// Show data
$('#stream').append('<p><b>'+ date.toLocaleString()+': <pre>' + JSON.stringify(res) +'</pre>');
}, MOSAIC_CREATION_ACCOUNT);
/*nem.com.requests.namespace.mosaicDefinitions(connector.endpoint, mosaicAttachment2.mosaicId.namespaceId).then(function(res) {
// Look for the mosaic definition(s) we want in the request response (Could use ["eur", "usd"] to return eur and usd mosaicDefinitionMetaDataPairs)
var neededDefinition = nem.utils.helpers.searchMosaicDefinitionArray(res, ["eur"]);
// Get full name of mosaic to use as object key
var fullMosaicName = nem.utils.format.mosaicIdToName(mosaicAttachment2.mosaicId);
// Check if the mosaic was found
if(undefined === neededDefinition[fullMosaicName]) return console.error("Mosaic not found !");
// Set eur mosaic definition into mosaicDefinitionMetaDataPair
mosaicDefinitionMetaDataPair[fullMosaicName] = {};
mosaicDefinitionMetaDataPair[fullMosaicName].mosaicDefinition = neededDefinition[fullMosaicName];
// Prepare the transfer transaction object
var transactionEntity = nem.model.transactions.prepare("mosaicTransferTransaction")(common, transferTransaction, mosaicDefinitionMetaDataPair, nem.model.network.data.testnet.id);
// Serialize transfer transaction and announce
nem.model.transactions.send(common, transactionEntity, endpoint)
},
function(err) {
console.error(err);
});*/
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Subscribing to new blocks</p>');
// Subscribe to new blocks channel
nem.com.websockets.subscribe.chain.blocks(connector, function(res){
// Set time
date = new Date();
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Received a new block</p>');
// Show data
$('#stream').append('<p><b>'+ date.toLocaleString()+': <pre>' + JSON.stringify(res) +'</pre>');
});
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Subscribing to recent transactions</p>');
// Subscribe to recent transactions channel
nem.com.websockets.subscribe.account.transactions.recent(connector, function(res){
// Set time
date = new Date();
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Received recent transactions</p>');
// Show data
$('#stream').append('<p><b>'+ date.toLocaleString()+': <pre>' + JSON.stringify(res) +'</pre>');
});
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Subscribing to account data of '+ connector.address +'</p>');
// Subscribe to account data channel
nem.com.websockets.subscribe.account.data(connector, function(res) {
// Set time
date = new Date();
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Received account data</p>');
// Show data
$('#stream').append('<p><b>'+ date.toLocaleString()+': <pre>' + JSON.stringify(res) +'</pre>');
});
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Subscribing to unconfirmed transactions of '+ connector.address +'</p>');
// Subscribe to unconfirmed transactions channel
nem.com.websockets.subscribe.account.transactions.unconfirmed(connector, function(res) {
// Set time
date = new Date();
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Received unconfirmed transaction</p>');
// Show data
$('#stream').append('<p><b>'+ date.toLocaleString()+': <pre>' + JSON.stringify(res) +'</pre>');
});
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Subscribing to confirmed transactions of '+ connector.address +'</p>');
// Subscribe to confirmed transactions channel
nem.com.websockets.subscribe.account.transactions.confirmed(connector, function(res) {
// Set time
date = new Date();
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Received confirmed transaction</p>');
// Show data
$('#stream').append('<p><b>'+ date.toLocaleString()+': <pre>' + JSON.stringify(res) +'</pre>');
});
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Requesting account data of '+ connector.address +'</p>');
// Request account data
nem.com.websockets.requests.account.data(connector);
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Requesting recent transactions of '+ connector.address +'</p>');
// Request recent transactions
nem.com.websockets.requests.account.transactions.recent(connector);
}, function(err) {
// Set time
date = new Date();
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> An error occured</p>');
// Show data
$('#stream').append('<p><b>'+ date.toLocaleString()+': <pre>' + JSON.stringify(err) +'</pre>');
// Try to reconnect
reconnect();
});
}
function reconnect() {
// Replace endpoint object
endpoint = nem.model.objects.create("endpoint")(nem.model.nodes.testnet[1].uri, nem.model.nodes.websocketPort);
// Replace connector
connector = nem.com.websockets.connector.create(endpoint, address);
// Set time
date = new Date();
// Show event
$('#stream').append('<p><b>'+ date.toLocaleString()+':</b> Trying to connect to: '+ endpoint.host +'</p>');
// Try to establish a connection
connect(connector);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment