ROMANCE DAWN for the new world

Microsoft Azure を中心とした技術情報を書いています。

Azure SignalR Service で ASP.NET SignalR を使ってみる

この記事は、Azure Advent Calendar 2018 の 8 日目 の記事です。
qiita.com
Ignite 2018 で GA が発表された Azure SignalR Service ですが、ASP.NET Core SignalR だけでなく、まだプレビューですが ASP.NET SignalR にも対応しています。
今回は、Core ではない ASP.NET SignalR を使って試してみました。

Azure SignalR Service とは

Azure SignalR Service は、SignalR を使って開発したアプリケーションのコネクションやスケーリングを管理してくれるマネージドサービスです。
build 2018 のセッションから引用したスライドです。
f:id:TonyTonyKun:20181118124127j:plain
アプリケーションの規模が大きくなると、バックエンドで Redis や Service Bus を使ったコネクションやスケーリングの管理が必要になります。このような面倒なところを Azure SignalR Service に任せることができます。
Azure SignalR Service の使い方は、こちらの公式ドキュメントにある通りですが、早速試していきます。
github.com

Azure SignalR Service を作成する

Azure Portal から、Azure SignalR Service を作成します。

f:id:TonyTonyKun:20181118142922p:plain

Standard プラン以外の他に、20 コネクションまでの Free プランもあります。東日本リージョンもあるので、安心して使えます。

ASP.NET SignalR のコードを変更する

ASP.NET SignalR のプロジェクトに対して、Azure SignalR Service に対応するための変更を加えていきます。

NuGet ライブラリのインストール

まず、Azure SignalR Service 用の NuGet ライブラリの Microsoft.Azure.SignalR.AspNet をインストールします。

PM> Install-Package Microsoft.Azure.SignalR.AspNet -Version 1.0.0-preview1-10259

NuGet ライブラリをインストールしたら、HTML ファイルで指定されている JavaScript のパスを変更します。

<script src="Scripts/jquery.signalR-2.4.0-preview2-20181018-02.min.js"></script>

Startup クラスを変更する

Startup クラスで呼び出している MapSignalR メソッドを MapAzureSignalR メソッドに置き換えます。引数には、他のアプリケーションと区別する一意な名前を渡します。

public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        //app.MapSignalR();
        app.MapAzureSignalR(this.GetType().FullName);
    }
}

接続文字列の追加

Web.config に Azure SignalR Service の接続文字列を設定します。接続文字列は、Azure Portal から取得できます。

<connectionStrings>
  <add name="Azure:SignalR:ConnectionString" connectionString="Endpoint=xxx;AccessKey=xxx;Version=1.0;"/>
</connectionStrings>

動作確認

ASP.NET SignalR のサンプルとして、クリスマスなので懐かしい Fireworks のアプリケーションを Azure Web Apps にデプロイしました。

f:id:TonyTonyKun:20181208094616p:plain

自分で打ち上げた花火を、他のブラウザでもリアルタイムに観ることができます。
試してみたい方は、こちらの URL からどうぞ。

ブラウザの開発者ツールで確認すると、Azure SignalR Service に接続されていることがわかります。

f:id:TonyTonyKun:20181208103828p:plain

まとめ

ASP.NET SignalR は、チャットやダッシュボードなどのリアルタイムな Web アプリケーションを開発できるフレームワークです。
今から開発するなら ASP.NET Core SignalR を選択すべきですが、それが難しい場合でも Azure SignalR Service を使うことができます。
本番運用では、バックエンドでコネクションやスケーリングの管理が必須となるので、 Redis や Service Bus を使わずに Azure に任せられる嬉しいサービスだと思います。