実証実験を迅速に開始するためのフレームワークSYMPOCをご紹介します。
xembook/sympoc
レポジトリ
特徴
- 確実にノードに接続する
- どのSDKを使うかまではサポートしない
- ブラウザで動く
サンプルプログラム
最小構成
<!DOCTYPE html>
<html>
<body>
Hello SYMPOC!
<script src="https://xembook.github.io/sympoc/config_symbol_application.js"></script>
<script src="https://xembook.github.io/sympoc/sympoc.js"></script>
<script>
startSymbolApplication(
//設定(config.jsより)
CONFIG_SYMBOL_APPLICATION,
////受信トリガー
//初期設定完了時
async function(node){
console.log("Connect to Symbol Blockchain");
console.log(node);
},
//ソケット受信時
async function(event){
console.log("onSocketMessage");
console.log(event);
},
//QR受信時
async function(event){
console.log("onPhysicalMessage");
console.log(event);
},
////異常時トリガー
//ソケット再起動時
function(nodeSocket){
console.log("onSocketResumed");
console.log(nodeSocket);
},
//ノード再選択時
function(event){
console.log("onStatusChange");
console.log(event);
}
);
</script>
</body>
</html>
読み込みファイル
- config_symbol_application.js
- sympoc.js
config_symbol_application.js
ノード一覧と初期設定情報が記載されています。
sympoc.js
SYMPOCを動かすためのライブラリ群です。
startSymbolApplication(config,a,b,c,d,e)
config
サンプルとして以下のような情報が設定されています。
const CONFIG_SYMBOL_APPLICATION = {
nodes:NODES,
selectNodeCount:3, //同期確認のために接続するノード数
timeout:8000, //ノード接続待機時間 ミリ秒
heightDiffThreshold: 1, // 同期判断ブロック高差
retryCount:30, //最大再接続回数
mainnet:"MAIN_NET",
testnet:"TEST_NET"
};
SYMPOCでは確実にノードに接続するためにノードから様々な情報を取得して同期情報を確認します。
サンプル設定では3台のノードに接続し、8秒以内に応答がない場合は再度接続を試み、最大30回行います。
3台の直近のブロック高の差が1以上ある場合も再接続します。
また /node/health /network/properties の値が取れない場合も再接続です。
websocket対応・非対応は検知できません。
a
ノード接続に成功すると、このcallback:a が呼ばれます。
サンプルプログラムでは"Connect to Symbol Blockchain"と出力されます。
b
ソケットを受信した場合にこのcallback:b が呼ばれます。
WebSocketの設定方法は後述します。
c
QRコードなどをのスキャンに成功すると callback:c が呼ばれます。
QRコードスキャナの出し方は後述します。
d
ソケット通信が切れると、自動的に再接続を行い、その後 callback:d が呼ばれます。
e
その他、もろもろのエラーをキャッチすると、callback:e が呼ばれます。
Websocketサンプル
ブロック生成受信
<!DOCTYPE html>
<html>
<body>
Hello SYMPOC!
<script src="https://xembook.github.io/sympoc/config_symbol_application.js"></script>
<script src="https://xembook.github.io/sympoc/sympoc.js"></script>
<script>
startSymbolApplication(
CONFIG_SYMBOL_APPLICATION,
async function(node){
setSocket(node.socket);
},
async function(event){
console.log(event);
},
async function(event){},
//ソケット再起動時
function(nodeSocket){
setSocket(nodeSocket);
},
function(event){}
);
function setSocket(nodeSocket){
socketSend(nodeSocket,'block');
}
</script>
</body>
</html>
socketSend(nodeSocket,'block');
socketSendでサブスクライブします。この例では新しいブロックが生成されるとcallback:bが呼ばれます。
未承認トランザクションの情報をサブスクライブする場合は
socketSend(nodeSocket,'unconfirmedAdded/TBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB');
とします。
Websocketは省電力モードで頻繁に切断されるため、ソケット再接続時にも忘れずにsocketSend(nodeSocket,'block')を呼び出すようにしてください。
QRコードサンプル
jsQRスキャナ
<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
<script src="https://xembook.github.io/sympoc/config_symbol_application.js"></script>
<script src="https://xembook.github.io/sympoc/sympoc.js"></script>
</head>
<body>
<div class="container">
<h1>SYMPOC QR</h1>
</div><!-- container -->
<!-- QRスキャンモーダル -->
<div class="modal-content">
<canvas id="canvas" width="100%" hidden></canvas>
</div>
<script type="text/javascript">
startSymbolApplication(
CONFIG_SYMBOL_APPLICATION,
async function(node){
startVideo();
},
async function(event){},
async function(event){
console.log("onPhysicalMessage");
console.log(event);
},
function(nodeSocket){},
function(event){}
);
</script>
</body>
</html>
jsQRを使用するのでjqueryとjsQRを読み込みます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
スキャナエリアを以下のように記述してください。
<div class="modal-content">
<canvas id="canvas" width="100%" hidden></canvas>
</div>
startVideo() で自動的にスキャナが立ち上がります。