ページにアクセスしたタイミング、入金したタイミングで最新のアカウント情報を取得するためのTIPSです。

今回はAliceアカウントを作成し、そこに記録されたモザイク一覧情報を、ページ表示時など能動的に取りに行く方法とWebSocketを利用して入金時に受動的に取得する方法を同じロジックを使用して処理する流れで説明します。

事前準備

(script = document.createElement('script')).src = 'https://xembook.github.io/nem2-browserify/symbol-sdk-pack-0.21.0.js';
document.getElementsByTagName('head')[0].appendChild(script);

chromeブラウザを開いてF12キーを押し、コンソール画面で上記スクリプトをコピー＆ペーストしてください。

ライブラリインポート、変数初期化

NODE = 'https://sym-test.opening-line.jp:3001';
GENERATION_HASH = '6C1B92391CCB41C96478471C2634C111D9E989DECD66130C0430B5B8D20117CD';

nem = require("/node_modules/symbol-sdk");
op   = require("/node_modules/rxjs/operators");
rxjs = require("/node_modules/rxjs");
accountHttp = new nem.AccountHttp(NODE);
nsHttp = new nem.NamespaceHttp(NODE);
wsEndpoint = NODE.replace('http', 'ws') + "/ws";
listener = new nem.Listener(wsEndpoint,nsHttp,WebSocket);

今回使用するライブラリのインポートとノードへの接続など、必要情報を定義します。

アカウント準備

alice = nem.Account.generateNewAccount(nem.NetworkType.TEST_NET);

"http://faucet-0.10.0.x-01.symboldev.network/?recipient=" + alice.address.plain() +"&amount=2"

Aliceアカウントを作成してそこに2XYM入金しておきます。

アカウント情報取得時のアクションを記述

accountSubscribe = function(observer){

	observer.subscribe(_=>{
		//ここにアクションを記述
        console.log(_);
	},err => console.log(err));
}

アカウント情報を取得した後、どのようなアクションを起こしたいかを定義しておきます。
ページに表示された項目の更新などになるかと思います。今回はコンソールに出力させるだけです。

アカウント情報から所有モザイク一覧情報だけを抜き出すオペレーション

opMergeMosaics = function(){
	return rxjs.pipe(
		op.mergeMap(_=>_.mosaics),
		op.map(_ =>  _.id),
		op.toArray(),
	)
}

アカウント情報から所有Mosaicを取り出すためには、取得情報を少し操作する必要があります。あらかじめどのように操作すればMosaic情報を取り出せるかを定義しておきます。

アカウント情報取得

getMosaics = function(){
	assetHttp = accountHttp.getAccountInfo(alice.address)
	.pipe(
		opMergeMosaics()
	);
	accountSubscribe(assetHttp);
};
getMosaics();

能動的にアカウント情報を取得します。

アカウント情報取得リスナー

listener.open().then(() => {
	assetListener = listener.confirmed(alice.address)
	.pipe(

		op.mergeMap(x=>accountHttp.getAccountInfo(alice.address)),
		op.first(),
		opMergeMosaics(),
		op.repeat()
	);
	accountSubscribe(assetListener);
});

WebSocketを利用して、入金時にアカウント情報を取得します。
confirmedリスナーでsubscribeされる内容には所有モザイク情報は含まれていません。ですので再度getAccountInfoで情報を取得する必要があります。listenerを使用した場合はHOTストリームなので、firstで取得できた1件だけを処理に回し、あとはrepeatで再び待ち受け状態にします。

入金テスト

"http://faucet-0.10.0.x-01.symboldev.network/?recipient=" + alice.address.plain() +"&amount=2"

入金してみましょう。