mirror of
https://github.com/bigchaindb/js-bigchaindb-driver.git
synced 2024-11-22 01:36:56 +01:00
Merge pull request #110 from michielmulders/websocket-api-doc
Websocket api documentation usage added for javascript
This commit is contained in:
commit
0b65d3d741
@ -357,6 +357,134 @@ Recap: Asset Creation & Transfer
|
|||||||
.then(() => conn.searchAssets('Bicycle Inc.'))
|
.then(() => conn.searchAssets('Bicycle Inc.'))
|
||||||
.then(assets => console.log('Found assets with serial number Bicycle Inc.:', assets))
|
.then(assets => console.log('Found assets with serial number Bicycle Inc.:', assets))
|
||||||
|
|
||||||
|
|
||||||
|
Websocket Event Stream API Usage
|
||||||
|
--------------------------------
|
||||||
|
|
||||||
|
The Event Stream API enables new ways to interact with BigchainDB, making it possible for your application to subscribe to all newly–confirmed transactions that are happening in the system.
|
||||||
|
Below piece of code can be opened in your web browser. It will connect to your websocket (change it at ``var wsUri``). This web page will display all validated transactions.
|
||||||
|
|
||||||
|
.. code-block:: html
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>WebSocket BigchainDB</title>
|
||||||
|
|
||||||
|
<!-- Latest compiled and minified CSS -->
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||||
|
|
||||||
|
<!-- jQuery library -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Latest compiled JavaScript -->
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Websocket Script -->
|
||||||
|
<script language="javascript" type="text/javascript">
|
||||||
|
|
||||||
|
var wsUri = "ws://localhost:9985/api/v1/streams/valid_transactions";
|
||||||
|
var output;
|
||||||
|
var alertbox;
|
||||||
|
|
||||||
|
function init()
|
||||||
|
{
|
||||||
|
output = document.getElementById("output");
|
||||||
|
alertbox = document.getElementById("alert-box");
|
||||||
|
setWebSocket();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setWebSocket()
|
||||||
|
{
|
||||||
|
websocket = new WebSocket(wsUri);
|
||||||
|
websocket.onopen = function(evt) { onOpen(evt) };
|
||||||
|
websocket.onclose = function(evt) { onClose(evt) };
|
||||||
|
websocket.onmessage = function(evt) { onMessage(evt) };
|
||||||
|
websocket.onerror = function(evt) { onError(evt) };
|
||||||
|
}
|
||||||
|
|
||||||
|
function onOpen(evt)
|
||||||
|
{
|
||||||
|
writeAlertMessage("CONNECTED");
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClose(evt)
|
||||||
|
{
|
||||||
|
writeAlertMessage("DISCONNECTED");
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMessage(evt)
|
||||||
|
{
|
||||||
|
writeToScreen('<a href="#" class="list-group-item"><h4 class="list-group-item-heading">Valid Transaction</h4><p class="list-group-item-text">' + evt.data + '</p></a>');
|
||||||
|
}
|
||||||
|
|
||||||
|
function onError(evt)
|
||||||
|
{
|
||||||
|
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeConnection(evt)
|
||||||
|
{
|
||||||
|
websocket.close()
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeToScreen(message)
|
||||||
|
{
|
||||||
|
var pre = document.createElement("p");
|
||||||
|
pre.style.wordWrap = "break-word";
|
||||||
|
pre.innerHTML = message;
|
||||||
|
output.appendChild(pre);
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeAlertMessage(message)
|
||||||
|
{
|
||||||
|
var alert = document.createElement("div");
|
||||||
|
alert.className = "alert alert-success";
|
||||||
|
alert.setAttribute("role", "alert");
|
||||||
|
alert.innerHTML = message;
|
||||||
|
alertbox.appendChild(alert);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Initialize websocket and attach all events */
|
||||||
|
window.addEventListener("load", init, false);
|
||||||
|
|
||||||
|
/* Event called on closing browser or refreshing page to close connection */
|
||||||
|
window.addEventListener("beforeunload", closeConnection, false);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- HTML Template -->
|
||||||
|
<div class="container">
|
||||||
|
<h2>WebSocket API Stream Valid Transactions BigchainDB</h2>
|
||||||
|
|
||||||
|
<!-- Box for displaying all alerts -->
|
||||||
|
<div id="alert-box"></div>
|
||||||
|
|
||||||
|
<!-- Div for attachting all outputs -->
|
||||||
|
<div id="output" class="list-group"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
Besides that, a NodeJs version has been created to display the validated transactions.
|
||||||
|
All transactions are printed to the console. To use this piece of code, you will need the ``ws`` (WebSocket package) through npm: ``npm install --save ws``.
|
||||||
|
|
||||||
|
.. code-block:: js
|
||||||
|
|
||||||
|
const WebSocket = require('ws')
|
||||||
|
|
||||||
|
const ws = new WebSocket('ws://localhost:9985/api/v1/streams/valid_transactions')
|
||||||
|
|
||||||
|
ws.on('open', () => {
|
||||||
|
console.log("CONNECTED")
|
||||||
|
});
|
||||||
|
|
||||||
|
ws.on('message', (data) => {
|
||||||
|
let json = JSON.parse(data)
|
||||||
|
console.log("\nTransactionId: ", json.transaction_id)
|
||||||
|
console.log("AssetId: ", json.asset_id)
|
||||||
|
console.log("BlockId: ", json.block_id)
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
Difference unspent and spent output
|
Difference unspent and spent output
|
||||||
-----------------------------------
|
-----------------------------------
|
||||||
An unspent output is simply an output of a transaction which isn't yet an input of another transaction.
|
An unspent output is simply an output of a transaction which isn't yet an input of another transaction.
|
||||||
|
Loading…
Reference in New Issue
Block a user