Japan Azure User Group 12周年イベント 2022/09/24(土) 御成門プログラマー(Tomotaka Suzuki)

1. Azure SignalR Service
使ってみた
Japan Azure User Group 12周年イベント
2022/09/24(土)
御成門プログラマー(Tomotaka Suzuki)

2. 自己紹介
• 御成門プログラマー(Tomotaka Suzuki)
• Microsoft Azure、Angular を使った Webアプリ開発者
• Twitter：@onarimonprogram
• 技術ブログ：onarimon.jp
趣味のグルメブログです。
よかったらこっちも見てくださ
い！！(food.onarimon.jp)
こっちが
技術ブログ

3. Azure SignalR Service とは
• リアルタイムに通信できる機能を提供
• 通常の通信では少しめんどくさいサーバーからクラ
イアントに向けての通信を簡単に実装できる
• ASP.NET にもあった ASP.NET SignalR 機能の
Azureマネージドサービス版
• すべてのクライアントにブロードキャスト、個別の
ユーザーに送信、グループに送信など使い分け可能
Azure SignalR サービスとは | Microsoft Learn

4. Azure SignalR Service
の利用用途の例

5. 利用用途：データのリアルタイム更新
• データをリアルタイムで更新して表示する
• 時間ごとに情報を取得する方式だと余計な通信が発生してしまう。
• 例) スポーツのスコア速報を変更があったタイミングで更新する
• 例) ダッシュボードのチャートデータなどを最新の状態で更新して表示する。
• 例) 在庫情報一覧のなどのデータに変更があったら更新する
Azure SignalR Service
情報の更新があったタイミングで接続し
ているユーザーにブロードキャスト
ダッシュボードや表データなど

6. 利用用途：キュー処理の結果を受け取る
• 処理をキューに投げた後に処理が完了したタイミングで結果を
受け取る。
• Azure のデプロイ完了通知とかがイメージ近いかもしれない(Azure が
使っているかは不明)
Azure SignalR Service
Azure Queue Storage Azure Functions
クライアント
キューに投げる。
(そのタイミングでリクエスト自
体は終了してしまう)
Azure Functions
202 Accepted
202 Accepted
デキュー
何かしらの処理
処理終了後、メッ
セージを Post
処理が完了したメッセージを
個別のクライアントに送信
処理を API に投げる

7. 利用用途：リアルタイムチャット機能
• 後ほどデモ予定
フロントエンド
Azure Web Apps
バックエンド
Azure Functions
Azure SignalR
Service
メッセージ送信：
こんにちわ！！
メッセージ受信：
こんにちわ！！
クライアント
(送信者)
クライアント
(受信者)

8. 他にもたくさん
Azure SignalR Service の使い道
• Microsoft公式ドキュメントでチェック
https://learn.microsoft.com/ja-jp/azure/azure-signalr/signalr-overview
色々な使い道があるのでできることの幅が
広がりそうです！！

9. Azure SignalR Service の利用の流れ
Azure SignalR Service
クライアント
④メッセージ送信
②接続情報
③接続
①Negotiate
別のクライアント
←同様の手順で接続済
⑤メッセージ受信
⑥クライアントアプリ側で受信
したメッセージを処理
・
・
・

10. Azure SignalR Service
の Demo

11. Azure Functions の
SignalR Service バインドが便利
• Azure Functions の SignalR バインド機能を使うと簡単に実装
できることが分かった
• Azure SignalR Service へのクライアントの認証やメッセージ送
信の処理を行ってくれる
Azure Functions における SignalR Service のバインド | Microsoft Learn

12. Azure SignalR Local Emulator
https://github.com/Azure/azure-signalr
• ローカルでの開発でわざわざAzure上の SignalR Service を使う
ことなくSignalrをローカルで実行できるエミュレーター。
初回設定後はstartコマンドを実行して出てく
るローカル用の接続文字列をアプリケーショ
ンで設定するだけ。ローカルと意識すること
なく使えます。

13. Azure SignalR Service 使ってみた感想
• SignalR 導入により、アプリケーションでできることの幅が広
がりそう。いろいろ試してみたくなった。
• マネージドサービスとしてとても簡単に実装できる
• Azure Functions の SignalR Service バインドが便利
• Azure SignalR Local Emulator の使用