次の方法で共有


クイック スタート: Azure Functions と SignalR Service で C# を使用して、GitHub の星の数を表示するアプリを作成する

この記事では、SignalR Service と Azure Functions を使用して、C# を用いてサーバーレス アプリケーションを構築し、クライアントにメッセージをブロードキャストする方法について説明します。

注意

この記事に記載しているコードは、GitHub から取得できます。

前提条件

このクイックスタートには、次の前提条件が必要です。

Azure SignalR Service のインスタンスを作成する

このセクションでは、アプリに使う基本的な Azure SignalR インスタンスを作成します。 次の手順では、Azure portal を使って新しいインスタンスを作成しますが、Azure CLI を使うこともできます。 詳細については、Azure SignalR Service CLI リファレンスaz signalr create コマンドを参照してください。

  1. Azure portal にサインインします。
  2. ページの左上にある [+ リソースの作成] を選択します。
  3. [リソースの作成] ページで、[Search services and marketplace](サービスとマーケットプレースを検索) テキスト ボックスに「signalr」と入力し、リストから [SignalR Service] を選びます。
  4. [SignalR Service] ページで [作成] を選びます。
  5. [基本] タブで、新しい SignalR Service のインスタンスに必要な情報を入力します。 次の値を入力します。
フィールド 推奨値 説明
サブスクリプション サブスクリプションの選択 新しい SignalR Service インスタンスを作成するために使うサブスクリプションを選びます。
リソース グループ SignalRTestResources というリソース グループを作成する SignalR リソースのリソース グループを選択または作成します。 既存のリソース グループを使う代わりに、このチュートリアルのために新しいリソース グループを作成すると便利です。 チュートリアルの終了後にリソースを解放するには、リソース グループを削除します。

リソース グループを削除すると、そのグループに所属するすべてのリソースも削除されます。 この削除操作は元に戻すことができません。 保存するリソースが含まれていないことを確認してから、リソース グループを削除してください。

詳細については、 リソース グループを使用した Azure リソースの管理に関するページを参照してください。
リソース名 testsignalr SignalR リソースに使用する一意のリソース名を入力します。 testsignalr がお使いのリージョンに既に導入されている場合は、数字や文字を追加して名前が一意になるようにします。

名前は 1 ~ 63 文字の文字列で、数字、英字、ハイフン (-) 文字のみを使用する必要があります。 名前の先頭と末尾にはハイフン文字を使用できません。また、連続するハイフン文字は無効です。
[リージョン] 自分のリージョンを選択します 新しい SignalR Service インスタンスに適切なリージョンを選びます。

Azure SignalR Service は、現在すべてのリージョンで使用できるわけではありません。 詳細については、Azure SignalR Service リージョンの可用性に関するページを参照してください
価格レベル [変更] を選び、[Free (Dev/Test Only)](無料 (Dev/Test のみ)) を選びます。 [選択] を選び、価格レベルを確認します。 Azure SignalR Service には、Free、Standard、Premium という 3 つの価格レベルがあります。 チュートリアルでは、前提条件で特に明記されない限り、[Free] レベルを使います。

レベルと価格による機能の違いの詳細については、「Azure SignalR Service の価格」を参照してください
サービス モード 適切なサービス モードを選びます Web アプリで SignalR のハブ ロジックをホストしていて、SignalR Service をプロキシとして使う場合は、[既定] を使います。 Azure Functions などのサーバーレス テクノロジを使って SignalR のハブ ロジックをホストする場合は、[サーバーレス] を使います。

[クラシック] モードは下位互換性のためだけにあり、使わないことをお勧めします。

詳細については、「Azure SignalR Service のサービス モード」を参照してください。

SignalR チュートリアルでは、[ネットワーク][タグ] タブの設定を変更する必要はありません。

  1. [基本] タブの下部にある [確認と作成] ボタンを選びます。
  2. [確認と作成] タブで、値を確認し [作成] を選びます。 デプロイが完了するまでしばらくかかります。
  3. デプロイが完了したら、[リソースに移動] ボタンを選びます。
  4. SignalR リソース ページで、左側のメニューから、[設定] の下にある [キー] を選びます。
  5. 主キーの [接続文字列] をコピーします。 この接続文字列は、このチュートリアルで後ほどアプリを構成するために必要です。

Azure Functions をローカルで設定して実行する

このステップには、Azure Functions Core Tools が必要です。

  1. 空のディレクトリを作成し、コマンド ラインを使用してそのディレクトリに変更します。

  2. 新しいプロジェクトを初期化する。

    # Initialize a function project
    func init --worker-runtime dotnet
    
    # Add SignalR Service package reference to the project
    dotnet add package Microsoft.Azure.WebJobs.Extensions.SignalRService
    
  3. コード エディターを使って、Function.cs という名前で新しいファイルを作成します。 次のコードを Function.cs に追加します。

    using System;
    using System.IO;
    using System.Linq;
    using System.Net.Http;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Azure.WebJobs;
    using Microsoft.Azure.WebJobs.Extensions.Http;
    using Microsoft.Azure.WebJobs.Extensions.SignalRService;
    using Newtonsoft.Json;
    
    namespace CSharp
    {
        public static class Function
        {
            private static HttpClient httpClient = new HttpClient();
            private static string Etag = string.Empty;
            private static string StarCount = "0";
    
            [FunctionName("index")]
            public static IActionResult GetHomePage([HttpTrigger(AuthorizationLevel.Anonymous)]HttpRequest req, ExecutionContext context)
            {
                var path = Path.Combine(context.FunctionAppDirectory, "content", "index.html");
                return new ContentResult
                {
                    Content = File.ReadAllText(path),
                    ContentType = "text/html",
                };
            }
    
            [FunctionName("negotiate")]
            public static SignalRConnectionInfo Negotiate(
                [HttpTrigger(AuthorizationLevel.Anonymous)] HttpRequest req,
                [SignalRConnectionInfo(HubName = "serverless")] SignalRConnectionInfo connectionInfo)
            {
                return connectionInfo;
            }
    
            [FunctionName("broadcast")]
            public static async Task Broadcast([TimerTrigger("*/5 * * * * *")] TimerInfo myTimer,
            [SignalR(HubName = "serverless")] IAsyncCollector<SignalRMessage> signalRMessages)
            {
                var request = new HttpRequestMessage(HttpMethod.Get, "https://api.github.com/repos/azure/azure-signalr");
                request.Headers.UserAgent.ParseAdd("Serverless");
                request.Headers.Add("If-None-Match", Etag);
                var response = await httpClient.SendAsync(request);
                if (response.Headers.Contains("Etag"))
                {
                    Etag = response.Headers.GetValues("Etag").First();
                }
                if (response.StatusCode == System.Net.HttpStatusCode.OK)
                {
                    var result = JsonConvert.DeserializeObject<GitResult>(await response.Content.ReadAsStringAsync());
                    StarCount = result.StarCount;
                }
    
                await signalRMessages.AddAsync(
                    new SignalRMessage
                    {
                        Target = "newMessage",
                        Arguments = new[] { $"Current star count of https://github.com/Azure/azure-signalr is: {StarCount}" }
                    });
            }
    
            private class GitResult
            {
                [JsonRequired]
                [JsonProperty("stargazers_count")]
                public string StarCount { get; set; }
            }
        }
    }
    

    Function.cs のコードには、次の 3 つの関数があります。

    • GetHomePage は、Web サイトをクライアントとして取得するために使用されます。
    • Negotiate は、クライアントがアクセス トークンを取得するために使用されます。
    • Broadcast は、GitHub から星の数を取得し、全クライアントにメッセージをブロードキャストするために、定期的に呼び出されます。
  4. このサンプルのクライアント インターフェイスは Web ページです。 ここでは、Web ページをレンダリングするために、GetHomePage 関数を使って、ファイル content/index.html から HTML コンテンツを読み取っています。 次は、この index.htmlcontent サブディレクトリ以下に次の内容で作成しましょう。

    <html>
    
    <body>
      <h1>Azure SignalR Serverless Sample</h1>
      <div id="messages"></div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.7/signalr.min.js"></script>
      <script>
        let messages = document.querySelector('#messages');
        const apiBaseUrl = window.location.origin;
        const connection = new signalR.HubConnectionBuilder()
            .withUrl(apiBaseUrl + '/api')
            .configureLogging(signalR.LogLevel.Information)
            .build();
          connection.on('newMessage', (message) => {
            document.getElementById("messages").innerHTML = message;
          });
    
          connection.start()
            .catch(console.error);
      </script>
    </body>
    
    </html>
    
  5. *.csproj を更新して、ビルド出力フォルダー内にコンテンツ ページを作成します。

    <ItemGroup>
      <None Update="content/index.html">
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
      </None>
    </ItemGroup>
    
  6. Azure Functions が機能するには、ストレージ アカウントが必要になります。 Azure ストレージ エミュレーターをインストールして実行できます。 または、次のコマンドを使用して、実際のストレージ アカウントを使用するように設定を更新できます。

    func settings add AzureWebJobsStorage "<storage-connection-string>"
    
  7. もう少しで完了です。 最後の手順では、Azure Functions の設定に SignalR Service の接続文字列を設定します。

    1. SignalR Service インスタンスについて、ポータルの上部にある検索ボックスで名前を検索して、正常に作成されたことを確認します。 インスタンスを選択して開きます。

      SignalR Service インスタンスの検索

    2. [Key](キー) を選択し、SignalR Service インスタンスの接続文字列を表示します。

      プライマリ接続文字列が強調表示されているスクリーンショット。

    3. プライマリ接続文字列をコピーし、次のコマンドを実行します。

      func settings add AzureSignalRConnectionString "<signalr-connection-string>"
      
  8. Azure 関数をローカルで実行します。

    func start
    

    Azure 関数をローカルで実行した後、http://localhost:7071/api/index を開くと、現在の星の数が表示されます。 GitHub で星を付けたり外したりすると、数秒ごとに星の数が更新されます。

リソースをクリーンアップする

このアプリの使用を続けない場合は、次の手順に従って、このクイック スタートで作成したすべてのリソースを削除して、課金が発生しないようにします。

  1. Azure Portal の左端で [リソース グループ] を選択し、作成したリソース グループを選択します。 検索ボックスを使用して名前でリソース グループを検索することもできます。

  2. 表示されたウィンドウでリソース グループを選択し、[リソース グループの削除] をクリックします。

  3. 新しいウィンドウで、削除するリソース グループの名前を入力し、[削除] をクリックします。

問題がある場合は、 トラブルシューティング ガイドをお試しになるか、ご連絡ください

次のステップ

このクイックスタートでは、ローカルでリアルタイムのサーバーレス アプリケーションを構築して実行しました。 次は、Azure SignalR Service を使用したクライアントと Azure Functions 間の双方向通信について詳しく確認します。