SYMPOCのご紹介

実証実験を迅速に開始するためのフレームワークSYMPOCをご紹介します。

# xembook/sympoc

### レポジトリ

https://github.com/xembook/sympoc

### 特徴

- 確実にノードに接続する
- どのSDKを使うかまではサポートしない
- ブラウザで動く


# サンプルプログラム

### 最小構成

```html
<!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サンプル

##### ブロック生成受信

```html
<!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スキャナ

```html
<!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を読み込みます。

```html
<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>
```

スキャナエリアを以下のように記述してください。
```html
<div class="modal-content">
<canvas id="canvas"  width="100%" hidden></canvas>
</div>
```

startVideo() で自動的にスキャナが立ち上がります。