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

[アーティクル]
04/07/2023

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

インプロセス
分離プロセス

注意

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

前提条件

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

Visual Studio Code、またはその他のコードエディター。 Visual Studio Code をインストールしていない場合は、ここから Visual Studio Code をダウンロードしてください。
Azure サブスクリプション。 Azure サブスクリプションをお持ちでない場合は、開始する前に無料でアカウントを 1 つ作成してください。
Azure Functions Core Tools
.NET Core SDK

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

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

Azure portal にサインインします。
ページの左上にある [+ リソースの作成] を選択します。
[リソースの作成] ページで、[Search services and marketplace](サービスとマーケットプレースを検索) テキストボックスに「signalr」と入力し、リストから [SignalR Service] を選びます。
[SignalR Service] ページで [作成] を選びます。
[基本] タブで、新しい 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 チュートリアルでは、[ネットワーク] と [タグ] タブの設定を変更する必要はありません。

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

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

この手順には、Azure Functions Core Tools が必要です。

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

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

インプロセス
分離プロセス

# 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

# Initialize a function project
func init --worker-runtime dotnet-isolated

# Add extensions package references to the project
dotnet add package Microsoft.Azure.Functions.Worker.Extensions.Http
dotnet add package Microsoft.Azure.Functions.Worker.Extensions.SignalRService
dotnet add package Microsoft.Azure.Functions.Worker.Extensions.Timer

コードエディターを使って、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; }
        }
    }
}

using System.Net;
using System.Net.Http.Json;
using System.Text.Json.Serialization;
using Microsoft.Azure.Functions.Worker;
using Microsoft.Azure.Functions.Worker.Http;

namespace csharp_isolated;

public class Functions
{
    private static readonly HttpClient HttpClient = new();
    private static string Etag = string.Empty;
    private static int StarCount = 0;

    [Function("index")]
    public static HttpResponseData GetHomePage([HttpTrigger(AuthorizationLevel.Anonymous)] HttpRequestData req)
    {
        var response = req.CreateResponse(HttpStatusCode.OK);
        response.WriteString(File.ReadAllText("content/index.html"));
        response.Headers.Add("Content-Type", "text/html");
        return response;
    }

    [Function("negotiate")]
    public static HttpResponseData Negotiate([HttpTrigger(AuthorizationLevel.Anonymous)] HttpRequestData req,
        [SignalRConnectionInfoInput(HubName = "serverless")] string connectionInfo)
    {
        var response = req.CreateResponse(HttpStatusCode.OK);
        response.Headers.Add("Content-Type", "application/json");
        response.WriteString(connectionInfo);
        return response;
    }

    [Function("broadcast")]
    [SignalROutput(HubName = "serverless")]
    public static async Task<SignalRMessageAction> Broadcast([TimerTrigger("*/5 * * * * *")] TimerInfo timerInfo)
    {
        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 == HttpStatusCode.OK)
        {
            var result = await response.Content.ReadFromJsonAsync<GitResult>();
            if (result != null)
            {
                StarCount = result.StarCount;
            }
        }
        return new SignalRMessageAction("newMessage", new object[] { $"Current star count of https://github.com/Azure/azure-signalr is: {StarCount}" });
    }

    private class GitResult
    {
        [JsonPropertyName("stargazers_count")]
        public int StarCount { get; set; }
    }
}

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

GetHomePage は、Web サイトをクライアントとして取得するために使用されます。
Negotiate は、クライアントがアクセストークンを取得するために使用されます。
Broadcast は、GitHub から星の数を取得し、全クライアントにメッセージをブロードキャストするために、定期的に呼び出されます。

このサンプルのクライアントインターフェイスは Web ページです。ここでは、Web ページをレンダリングするために、GetHomePage 関数を使って、ファイル content/index.html から HTML コンテンツを読み取っています。次は、この index.html を content サブディレクトリ以下に次の内容で作成しましょう。

<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>

*.csproj を更新して、ビルド出力フォルダー内にコンテンツページを作成します。

<ItemGroup>
  <None Update="content/index.html">
    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
  </None>
</ItemGroup>

Azure Functions が機能するには、ストレージアカウントが必要になります。 Azure ストレージエミュレーターをインストールして実行できます。 または、次のコマンドを使用して、実際のストレージアカウントを使用するように設定を更新できます。
```
func settings add AzureWebJobsStorage "<storage-connection-string>"
```
もう少しで完了です。最後の手順では、Azure Functions の設定に SignalR Service の接続文字列を設定します。
1. SignalR Service インスタンスについて、ポータルの上部にある検索ボックスで名前を検索して、正常に作成されたことを確認します。インスタンスを選択して開きます。
2. [Key](キー) を選択し、SignalR Service インスタンスの接続文字列を表示します。
3. プライマリ接続文字列をコピーし、次のコマンドを実行します。
```
func settings add AzureSignalRConnectionString "<signalr-connection-string>"
```
Azure 関数をローカルで実行します。
```
func start
```
Azure 関数をローカルで実行した後、http://localhost:7071/api/index を開くと、現在の星の数が表示されます。 GitHub で星を付けたり外したりすると、数秒ごとに星の数が更新されます。

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

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

Azure Portal の左端で [リソースグループ] を選択し、作成したリソースグループを選択します。検索ボックスを使用して名前でリソースグループを検索することもできます。
表示されたウィンドウでリソースグループを選択し、[リソースグループの削除] をクリックします。
新しいウィンドウで、削除するリソースグループの名前を入力し、[削除] をクリックします。

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

次のステップ

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

Azure Functions における SignalR サービスのバインド

Azure Functions の双方向通信サンプル

Azure Functions の分離プロセス用の双方向通信サンプル

Visual Studio を使用して Azure Function App にデプロイする

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