PostmanでWebsocketを接続してみた
PostmanはAPIテストのプラットフォームですが、HTTP以外にもGraphQLやgRPCなどのプロトコルにも対応しています。
というわけで、今回はPostmanで対応しているプロトコルの中からWebsocketを試してみたいと思います。
事前準備
今回は手っ取り早く動作確認するために、以前の記事で紹介したAppSync EventsのイベントをPostmanでPubsubしてみます。
そのため、以下のものが必要です。
- AWSアカウント
- Postmanのアカウント
AppSync Eventsの設定
まずは今回使用するAppSync Eventsの設定を行います。
AWSのコンソールにログインし、AppSyncのコンソールに移動します。
AppSyncのコンソールに移動したら、以下のメニューから「Event API」を選択します。
開いたらAPI名には任意の名前を設定し、「作成」をクリックします。
たったこれだけでAppSync Eventsの設定は完了です。
作成されると、APIの管理画面に遷移されます。マネコンから作成されると、APIキーを使った認証のみが自動的に作成されるようです。(以前Amplifyで検証したときは普通にCognito User Poolの認証が使えてたから、そのうち他の認証も使えるかも知れない…)
Postmanに接続するために、APIのエンドポイントを取得するために「設定」タブをクリックします。
設定画面の中にあるDNSエンドポイントに2種類のエンドポイントが表示されていますが、今回はPostmanで両方のエンドポイントを使うので、2つともコピーしておきます。
認可モードにあるAPIキーを使って認証をするためこれもコピーしておきます。
Postmanで接続
Publisherの設定
ここからPostmanを使った設定です。
はじめに、Publisherの設定を行います。Postmanのワークスペース画面から「New」ボタンをクリックしたときに表示されるメニューから「HTTP」をクリックし、新規のリクエスト作成画面を開きます。
作成画面を開いたらメソッドURLに以下の設定を行います。
- メソッド:
POST - URL:
https://<AppSync EventsでコピーしたHTTPエンドポイント>/event
Headersタブを開いたら、以下のヘッダーを追加します。
-
x-api-key:<AppSync EventsでコピーしたAPIキー>
続けてBodyタブを開いて、Bodyのタイプを raw 、フォーマットを JSON に設定します。
Bodyには以下のJSONを入力します。
{
"channel": "default/channel",
"events": [
"{ \"message\": \"Hello, Postman!\"}"
]
}
作成したら任意の名前、コレクションに保存します。
その後、「Send」ボタンをクリックしてリクエストを送信し、APIのレスポンスに以下の画像のようなレスポンスが返ってくれば成功です。
Subscriberの設定
次にSubscriberの設定を行います。
Postmanのワークスペース画面から「New」ボタンをクリックしたときに表示されるメニューから「Websocket」をクリックし、新規のリクエスト作成画面を開きます。
作成画面を開いたらURLに wss://<AppSync Eventsでコピーしたリアルタイムエンドポイント>/event/realtime を入力します。
Messageタブには以下のJSONを入力します。
ここでのポイントはUUIDは任意のものでOKなのと、authorization.host には リアルタイムエンドポイントではなく、HTTPエンドポイントを指定する必要があることです。また、 channel には頭に / をつけてPublisherで指定したチャンネル名を指定します。
{
"type": "subscribe",
"id": "ee849ef0-cf23-4cb8-9fcb-152ae4fd1e69",
"channel": "/default/channel",
"authorization": {
"x-api-key": "<AppSync EventsでコピーしたAPIキー>",
"host": "<AppSync EventsでコピーしたHTTPエンドポイント>"
}
}
入力はJSON形式ですがWebsocketに送信するときは、文字列として送るので、以下の通りメッセージの型は text に設定します。
この後ヘッダーに、認証情報をSubprotocolで設定しますが、そのために認証情報をBase64エンコードしてヘッダーに設定する必要があります。
そこで、以下のコマンドを使ってあらかじめ認証情報をBase64エンコードしておきます。
HTTP_ENDPOINT="<AppSync EventsでコピーしたHTTPエンドポイント>"
API_KEY="<AppSync EventsでコピーしたAPIキー>"
header="{\"host\":\"$HTTP_ENDPOINT\", \"x-api-key\":\"$API_KEY\"}"
encoded_header=`echo "$header" | base64 | tr '+/' '-_' | tr -d '\n='`
echo $encoded_header
エンコードされた文字列はこの後ヘッダーに設定するため、コピーしておきます。
Headerタブを開いて、以下のヘッダーを追加します。
-
Sec-WebSocket-Protocol:header-<エンコードされた文字列>,aws-appsync-event-ws
Websocketではヘッダー情報をSubprotocolで設定することが多いです。JavaScriptのWebSocket APIでは、 new WebSocket(url, ['header-<エンコードされた文字列>', 'aws-appsync-event-ws']) のよう第2引数にSubprotocolを指定しますが、Postmanではヘッダーに Sec-WebSocket-Protocol で指定し、値をコンマ区切りで指定することでSubprotocolを指定することができます(以前WebSocketを扱ったときも躓いたポイント)。
後は、任意の名前、コレクションに保存すればSubscriberの設定は完了です。
動かしてみる
それでは実際に動かしてみます。
まずはSubscriberを実行します。
Websocketのタブにある「Connect」ボタンをクリックして接続します。
接続が完了すると、レスポンス欄に以下のように Connected と表示されます。
続けて、Messageタブをクリックし、「Send」ボタンをクリックします。
メッセージが送信され、レスポンスで以下のように subscribe_success と表示されればSubscriberは正常に接続できています。
Subscriberが接続できたら、Publisherを実行します。
Publisherのリクエストを開き、「Send」ボタンをクリックします。
再びSubscriberの画面に戻り、以下のようにメッセージが表示されれば成功です。
まとめ
今回はPostmanでWebsocketを使ってAppSync EventsのイベントをPubsubしてみました。
PostmanでWebsocketは以前にも使ったことはありましたが、久々過ぎてSubprotocolの設定方法を忘れていたので、改めて確認できてよかったです。
参考
Discussion