SignalRをPostmanでデバッグする

対象者

• WebSocketなど双方向の通信に興味のある方
• フロントエンドはひとまず置いてといてバックエンドのみの実装したい方

ゴール

1.サンプルのSignalRをローカルで起動し、Postmanから接続可能にする。
2.デプロイ後のリモート環境に対して、Postmanから接続可能にする。

使うもの

• VisualStudio２０２２　（無償版）、.NET7（C#）
• Azure　AppService（デプロイ先）
• コード：https://github.com/aspnet/SignalR-samples/tree/main/ChatSample
• 参考文献：https://trailheadtechnology.com/using-postman-with-signalr-websockets-development/

手順

1.まずはローカルで起動確認します。

サンプルコードをローカルにクローンしてVisualStudioで実行します。
図のようにブラウザを２つ横に並べて、相互にメッセージのやりとりが行えることを確認します。

2.Postmanでのデバッグ

MyWorkSpacce>Collections>Newから「WebSocketRequest」を選択します。

RawとSocket.ioが選択できますが、デフォルトのままRawを選択してください。

PostmanのEnter Server URlの欄に先ほどのURLを入力します。
このとき、httpをwsに変更し、末尾にchatと入れてください。

コードのこの部分と紐づいているようです。

メッセージをDevToolsの方から取ってきます。（※メッセージの末尾に特殊な文字が含まれていますので、こちらも一緒にコピペしてください。）
{"protocol":"json","version":1}

ブラウザとPostmanでメッセージを双方向にやりとりができることを確認します。このときPostmanからは次のメッセージを使用しました。
{"arguments":["aaa","aabb"],"invocationId":"0","streamIds":[],"target":"send","type":1}

このとき、Postmanから送信したメッセージを図のように保存しておくといいと思います。

3.Azureにデプロイ

諸々割愛しますが、構成>全般設定>Webソケットを有効にしておきます。

先ほどのPostmanのコレクションのURLのドメインのみ変更して接続します。ローカルと同じ動作となればOKです。

つまづき

RSという特殊な文字が含まれていることがなかなか気づけませんでした。というかキーボードでどうやって入力するのか。これをメッセージで送らないと、サーバー側から応答が返ってこないので、終了を認識させる識別文字なのだと思います。

まとめ

フロントエンドとバックエンドの作業者が異なっている場合に、それぞれ分業しやすいようにと当内容を調査しました。巷の情報は少ないと思います。
私も、まだまだSignalRもWebSocketもわからないことが多いので今後も調査を続けていこうと思います。