ソース

概要

catapult-restには、rest本体のほかに、いくつかのツールが入っています。

今回は、toolsの中にある、websocketを動かしてみます。これは、ブラウザでブロックチェーンのモニタリングができるツールのようです。

例えば、以下のようなものを検知できます。

新しいブロックができたとき
送ったトランザクションが失敗したとき
Cosignature対象のトランザクションが発生したとき

また、ライブラリについては、ソースを見ると、Vue.jsとBigInteger.js、それとbootstrapが使われているようです。

何かwebアプリを作るときの参考になりそうです。

前提

Windows 10
catapult-restの接続先

始め方

githubのリリースページにアクセス。

zipをダウンロードし、解凍する。

これを開く

└─tools
    │  .eslintrc
    │  package.json
    │  yarn.lock
    │
    └─websocket
            .eslintrc
            client.html  <- これ
            client.js

このような画面が表示されるはず。

接続する

接続先は、localhost:3000とする。

ここにlocalhostって入力し、Connectを押す。

つながる。

ブロック生成をモニタリング

ここに、モニタリングで使用するアドレスを入力する。

blockボタンが選択されていること（黒背景）を確認して、Subscribeボタンを押す。

ブロックが生成されたら、右側に通知される。

Unsubscribeボタンで、モニタリングを中断できる。

そのほかのモニタリング項目

すべて指定したアカウントに関係するもののみが表示されます

項目	説明
block	ブロックが生成されたら
confirmedAdded	トランザクションがブロックに取り込まれたら
unconfirmedAdded	トランザクションが発生したら
unconfimedRemoved	unconfirmedAddedが消えたら
status	トランザクションが失敗したら
partialAdded	Aggregate Bondedトランザクションが発生したら
partialRemoved	partialAddedが消えたら
cosignature	Cosignatureトランザクションが発生したら

表示されるメッセージについて

blockの項目については、block received with heightで始まるメッセージが表示されます。

block以外の項目については、received unknown data with key(s):で始まるメッセージが表示されます。メッセージはkeyのみが表示され、valueは表示されません。

カスタマイズ

いつも使う接続先やアドレスがあるなら、ドロップダウンリストから選べるようにしたほうが楽かもしれません。

接続先

接続先は、client.jsの135行目から。localhostは標準で用意されています。


			{ name: 'host1', value: 'set-proper-hostname' },
			{ name: 'host2', value: 'set-proper-hostname' },
			{ name: 'host3', value: 'set-proper-hostname' },
			{ name: 'host4', value: 'set-proper-hostname' },
			{ name: 'Localhost', value: 'localhost' }

アドレス

アドレスは、client.jsの63行目から。

			{ name: 'host4', value: 'SAAAIBC7AM65HOFDLYGFUT46H44TROZ7MUWCW6MZ' },
			{ name: 'host5', value: 'SAAA57DREOPYKUFX4OG7IQXKITMBWKD6KXTVBBQP' },
			{ name: 'host6', value: 'SAAA467G4ZDNOEGLNXLGWUAXZKC6VAES74J7N34D' },
			{ name: 'host7', value: 'SAAAMZYSPE5TRAVH7I3VSF7ZD542EVDLB7JT7Z4K' },

ポート番号

ポート番号は、client.jsの151行目。ただし、接続先ごとに設定することはできません。

			return `ws://${this.host}:3000/ws`;

メッセージ

受信したメッセージをカスタマイズするなら、client.jsの223行目から。

例えば、statusの中身を表示するなら、このような感じでしょうか


				if ('block' in data.message) {
					const message = `block received with height ${formatUint64(data.message.block.height)}`;
					formattedData = { level: 'light', message };
				} else if ('status' in data.message) {
					const message = `status received ${data.message.status}`;
					formattedData = { level: 'warning', message };
				} else {
					const message = `received unknown data with key(s): ${Object.keys(data.message)}`;
					formattedData = { level: 'warning', message };
				}

例

アドレスとstatusを少し変更した例

まとめ

ブラウザでブロックチェーンのモニタリングができる
ブロックやトランザクションの発生を教えてくれる
接続先やアドレスがカスタマイズできる
通知メッセージは、まだ整ってないので、自分でカスタマイズする

通知メッセージについては、どう設計したらうまくいくのかを考えていきたいですね