nem catapult-rest tools/websocketの使い方

# ソース

https://github.com/nemtech/catapult-rest/tree/master/tools/websocket

# 概要

[catapult-rest](https://github.com/nemtech/catapult-rest)には、rest本体のほかに、いくつかのツールが入っています。

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172833/ceec36bc-51e8-c833-669c-f8a9dbe9b9eb.png)

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

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

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

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

# 前提

* Windows 10
* catapult-restの接続先

# 始め方

[githubのリリースページ](https://github.com/nemtech/catapult-rest/releases)にアクセス。

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

これを開く

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172833/ceec36bc-51e8-c833-669c-f8a9dbe9b9eb.png)

# 接続する

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172833/2f378d4d-5917-9fa4-75ff-0f1c1954b48f.png)

つながる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172833/dd525944-7f78-bf4a-6f79-9350ac1d227e.png)

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

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172833/0e8e9403-25ea-0141-0fcc-d924828a2f84.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172833/1ca94a45-7a45-4d13-5541-b3e649608031.png)

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は標準で用意されています。

https://github.com/nemtech/catapult-rest/blob/master/tools/websocket/client.js#L135

```javascript

			{ 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行目から。

https://github.com/nemtech/catapult-rest/blob/master/tools/websocket/client.js#L63

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

#### ポート番号

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

https://github.com/nemtech/catapult-rest/blob/master/tools/websocket/client.js#L151

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

#### メッセージ

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

https://github.com/nemtech/catapult-rest/blob/master/tools/websocket/client.js#L223

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

```javascript

				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を少し変更した例

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172833/00b252f1-540e-9e59-37de-941a355928d3.png)

# まとめ

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

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