御成門プログラマーの技術日記

Microsoft AzureやAngularなどの技術情報を発信します

【Azure SignalR Service】Webアプリケーションにリアルタイムの通信機能を実装する【Azure SignalR Service 使ってみた】

Webアプリケーションにリアルタイムの通信機能を実装する Azure SignalR Service の紹介をします。
こちらの記事は私が Japan Azure User Group 12周年イベントで発表した「Azure SignalR Service 使ってみた」を記事に起こしたものになります。

Azure SignalR Service とは

Azure SignalR Service とはを簡単にまとめると下記のような機能を提供する Azure のサービスです。

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

Azure SignalR Service の利用例

Azure SignalR Service のリアルタイムな通信の機能を使うことでどのような利用用途があるか数例紹介します。
公式ページにはそのほかにもいくつかパターンが紹介されているのでそちらもご参照ください。

データのリアルタイム更新


グラフやチャートなどが表示されているダッシュボード、スポーツスコア中継速報のページなどをイメージします。

これらアプリケーションでは Azure SignalR Servie がない場合は、クライアント側からアクションを起こさないと最新のデータの取得ができませんが、Azure SignalR Service を使うことでデータに更新があったタイミングでサーバー駆動でクライアント側にデータをプッシュすることができるため、無駄な通信を行うことなく常に最新の情報を取得できます。

キュー処理の結果を送信する


長い時間のかかる処理などでAPIリクエスト中にAPIがキューに処理を投げるような動きを考えます。

その場合、リクエストのセッションはキューに投げて成功したというレスポンスが返却されて終了してしまいますが、クライアントとして処理が終わったことを検知できませんね。

処理が終わったタイミングで Azure SignalR Service を経由で処理を投げたクライアントに個別にレスポンスメッセージを返してあげることでクライアント側で処理の終了を検知した処理を実装することができます。

リアルタイムのチャットを提供する


複数のユーザーが Azure Signarl Service に接続していれば相互にメッセージをリアルタイムにやり取りするできます。

個別のクライアントやグループにだけメッセージを送信することも、接続を確立しているユーザーすべてに送信するブロードキャストも可能です。

Azure Signalr Service の利用フロー


Azure SignalR Service をアプリケーションの中で実装するときのフローを簡単に説明します。

  1. クライアントからAzure SignalR Service に対して Negotiate のリクエストを行います
  2. Azure SignalR Service で正しく認証が行われると、接続情報がリクエスト元に返却されます
  3. 返却された接続情報を使用してクライアントと Azure SignalR Service 間で Connection が確立されます
  4. 接続された状態でメッセージ送信のリクエストを送信すると、Azure SignalR側でリクエストされた送信先にメッセージがプッシュされます

上の図ではAzure SignalR に直接、接続や送信のリクエストを送っていますが、実際にはAPI として Azure Functions を間に経由していますAzure Functions の SignalR Service バインドを使用することで Azure SignalrR Service の認証や送信の処理を行ってくれるバックエンドを簡単に実装できました。
Azure Functions における SignalR Service のバインド | Microsoft Learn

ここら辺の実装方法については別のタイミングで紹介できたらと思っています。

ローカル開発で便利だった Azure SignalR Local Emulator

ローカルでの開発にて、Azure 上にある SignalR Service を使用することなく、エミュレーターで開発することでローカルでの開発をスムーズにします
Azure SignalR Local Emulator というエミュレータがあるのでそちらを使用すると便利です。こちらについても別のタイミングで紹介できたらと思っています。
github.com

実際に触ってみた感想

今回実際に Azure SignalR Service を使用してみて、思った以上の利用用途の多さにWebアプリケーションのできることの幅が広がる可能性を感じました。

そして、思ったより簡単にAzure SignalR Service を使用したアーキテクチャのアプリケーションが実装できた印象です。

試してみたいなアイデアも浮かぶので Azure SignalR Service を使ったアプリケーションをどんどん構築していきたいと思います。この記事を読んで頂いた方にも Azure SignalR Service に興味を持っていただいた方がいれば幸いです。ありがとうございました。

Japan Azure User Group 12周年イベント

JAZUGで Azure SignalR Service についてLT登壇した際の動画となります。
デモなども行っていますのでよろしければこちらもどうぞ。

「Azure SignalR Service 使ってみた」 3:17:07~です。トラブルで前半スライドが表示されてません。
youtu.be

発表資料はこちらです。

www.slideshare.net