Websocket GUI Debug Tool比較

# postman / insomni が websocket非対応

業務でwebsocketを触ることが多くなったが、

- [Postmanでwebsocket非対応](https://github.com/postmanlabs/postman-app-support/issues/3186)
- [insomniaでwebsocket非対応](https://github.com/getinsomnia/insomnia/issues/528)

と、他にもこれとったデファクトスタンダードもなさそうなので、いろいろGUI Toolを試してみた結果のまとめ。

結論は[Browser WebSocket Client](https://chrome.google.com/webstore/detail/browser-websocket-client/mdmlhchldhfnfnkfmljgeinlffmdgkjo/related)が良かった、というかRequestを保存できるのがむしろこれしかなかった。

### 追記: postwomanが対応してる

きちんと確認してないですがWebSocketに対応してる模様。OSSとしてコミュニティが強いのでかなり良さそうです。時間ができたら確認して記事に反映するかもしれないです。


## 機能比較一覧

機能での比較は下記の通り

|   No | ツール名                                                     | GUI / CLI | Auto Reconnect | Pretty Format | Req/Res履歴表示 | Import/Export | Request保存 |
| ---: | :----------------------------------------------------------- | :-------- | :------------- | :------------ | :-------------- | :-------------- | :---------- |
|    1 | [Simple WebSocket Client](https://chrome.google.com/webstore/detail/simple-websocket-client/pfdhoblngboilpfeibdedpjgfnlcodoo?hl=ja) | GUI       | ×              | ×             | ◯               | ×               | ×           |
|    2 | [Smart Websocket Client](https://chrome.google.com/webstore/detail/smart-websocket-client/omalebghpgejjiaoknljcfmglgbpocdp) | GUI       | ◯              | ◯             | △               | ×               | ×           |
|    3 | [Advanced Rest Client](https://github.com/advanced-rest-client/arc-electron) | GUI       | ◯              | ×             | ◯               | △               | ×           |
|    4 | [Browser WebSocket Client](https://chrome.google.com/webstore/detail/browser-websocket-client/mdmlhchldhfnfnkfmljgeinlffmdgkjo/related) | GUI       | ×              | ◯             | ◯               | ×               | ◯           |



## 使い心地の所感

### 1. Simple WebSocket Client

[Simple WebSocket Client](https://chrome.google.com/webstore/detail/simple-websocket-client/pfdhoblngboilpfeibdedpjgfnlcodoo?hl=ja)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/186228/20373f3b-1850-914b-d6f7-9cb4edee33ac.png)


- 名前の通り必要最低限の機能のみを搭載
- 見た目も古き良き時代を感じるUIで逆にそこがいい

### 2. Smart Websocket Client

[Smart Websocket Client](https://chrome.google.com/webstore/detail/smart-websocket-client/omalebghpgejjiaoknljcfmglgbpocdp)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/186228/d57fd2e7-f79b-b8c3-9cab-a7d257fb693f.png)

- Responseが履歴表示されないのは致命的で、例えば1つのRequestに対して複数のResponseが返るようなEventを実行しても最新の1つしかResponseが表示されていない

## 3. Advanced Rest Client (ARC)
[Advanced Rest Client](https://github.com/advanced-rest-client/arc-electron)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/186228/5a4c1d47-86e5-5505-483d-7d0cb42f6f26.png)

- Requestするたびにセットした内容が消えるという仕様が使いにくい
- Requestを保存できるがARC上からの保存ができず自分で生ファイルを作成する必要があったり、そのファイルの呼び出しもドラッグオンドロップしかない
- UI的にPretty Formatされていない＋Request/Responseのどっちなのかがわかりにくい

## 4. Browser WebSocket Client

[Browser WebSocket Client](https://chrome.google.com/webstore/detail/browser-websocket-client/mdmlhchldhfnfnkfmljgeinlffmdgkjo/related)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/186228/e3f5d5bf-5ca1-e339-3606-c99d6f85289b.png)

- Requestを保存しておけるのは便利。ただ、Import/Exportなどは実装されていない。

- responseデータはクリックするとポップアップでPretty formatで表示される


## まとめ

- 通常のRESTful APIではPOSTMANを使っているが、Postmanでいうところの`env`/`pre-script`/`test`といった機能をWebsocketでも使いたかったので調べたのだが、まだまだツールが発展途上すぎてrequestの`import/export`すら、まともにできないものがばかりとう状態だった
- エンジニアなら黙ってCLIを使うのが正しいのかもしれない



【追記2018/11/13】
Browser WebSocket Clientにて、微妙に機能がいろいろ増えてUI的にも使いやすくなっている。