快速入門：使用 Azure Functions 和 SignalR Service 透過 C 建立顯示 GitHub 星號計數的應用程式#

發行項
11/16/2023

在本文中，您將瞭解如何使用 SignalR 服務和 Azure Functions 來建置具有 C# 的無伺服器應用程式，以將訊息廣播至用戶端。

內含式
隔離進程

注意

您可以從 GitHub 取得本文所述的程式碼。

必要條件

本快速入門需要下列必要條件：

Visual Studio Code 或其他程式碼編輯器。如果您尚未安裝 Visual Studio Code，請在這裡下載 Visual Studio Code。
Azure 訂用帳戶。如果您沒有 Azure 訂用帳戶，請在開始之前免費建立一個訂用帳戶。
Azure Functions Core Tools
.NET Core SDK

建立 Azure SignalR 服務實例

在本節中，您會建立要用於應用程式的基本 Azure SignalR 實例。下列步驟會使用Azure 入口網站來建立新的實例，但您也可以使用 Azure CLI。如需詳細資訊，請參閱 Azure SignalR Service CLI 參考 中的 az signalr create 命令。

登入 Azure 入口網站。
在頁面左上角，選取 [+ 建立資源 ]。
在 [ 建立資源 ] 頁面上的 [搜尋服務和市 集] 文字方塊中， 輸入 signalr ，然後從清單中選取 SignalR 服務 。
在 [ SignalR 服務] 頁面上，選取 [ 建立 ]。
在 [ 基本] 索引 標籤上，輸入新 SignalR Service 實例的基本資訊。輸入下列值：

欄位	建議的值	描述
訂用帳戶	選擇您的訂用帳戶	選取您想要用來建立新 SignalR Service 實例的訂用帳戶。
資源群組	建立名為 SignalRTestResources 的資源群組	選取或建立 SignalR 資源的資源群組。為本教學課程建立新的資源群組，而不是使用現有的資源群組會很有用。若要在完成本教學課程之後釋放資源，請刪除資源群組。刪除資源群組也會刪除屬於群組的所有資源。此動作無法復原。刪除資源群組之前，請確定它不包含您想要保留的資源。如需詳細資訊，請參閱使用資源群組來管理您的 Azure 資源。
資源名稱	testsignalr	輸入要用於 SignalR 資源的唯一資源名稱。如果您的區域中已經採用 testignalr ，請新增數位或字元，直到名稱是唯一的。名稱必須是 1 到 63 個字元的字串，且只包含數位、字母和連字號（ `-` ）字元。名稱不能以連字號字元開頭或結尾，且連續連字號字元無效。
區域	選擇您的區域	為新的 SignalR 服務實例選取適當的區域。 Azure SignalR Service 目前無法在所有區域中使用。如需詳細資訊，請參閱 Azure SignalR 服務區域可用性
定價層	選取 [變更 ]，然後選擇 [ 免費]（僅限開發/測試）。選擇 [ 選取 ] 以確認您選擇的定價層。	Azure SignalR Service 有三個定價層：免費、標準和進階版。除非必要條件另有說明，否則教學課程會使用免費層。如需階層與定價之間功能差異的詳細資訊，請參閱 Azure SignalR 服務定價
服務模式	選擇適當的服務模式	當您在 Web 應用程式中裝載 SignalR 中樞邏輯，並使用 SignalR 服務作為 Proxy 時，請使用預設值。當您使用無伺服器技術，例如 Azure Functions 來裝載 SignalR 中樞邏輯時，請使用無伺服器。傳統模式僅供回溯相容性使用，不建議使用。如需詳細資訊，請參閱 Azure SignalR Service 中的服務模式。

您不需要變更 SignalR 教學課程之 [網路 和標籤 ] 索引標籤上的設定。

選取 [基本] 索引 標籤底部的 [ 檢閱 + 建立] 按鈕。
在 [ 檢閱 + 建立] 索引標籤上，檢閱值，然後選取 [ 建立 ]。部署需要一些時間才能完成。
部署完成時，選取 [移至資源 ] 按鈕。
在 [SignalR 資源] 頁面上，從左側的功能表中， 選取 [設定 ]。
複製主鍵的連線字串 。在本教學課程稍後，您需要此連接字串來設定您的應用程式。

在本機設定並執行 Azure 函式

您將需要此步驟的 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 中的程式碼有三個函式：

GetHomePage 用來取得網站作為用戶端。
Negotiate 用戶端會使用來取得存取權杖。
Broadcast 會定期呼叫以從 GitHub 取得星號計數，然後將訊息廣播給所有用戶端。

此範例的用戶端介面是網頁。我們從檔案 content/index.html 讀取 HTML 內容，以使用 GetHomePage 函式轉譯 網頁。現在，讓我們使用下列內容，在 content 子目錄下建立此 index.html ：

<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>"
```
現在幾乎完成了。最後一個步驟是將 SignalR Service 的連接字串設定為 Azure 函式設定。
1. 確認 SignalR Service 實例已成功建立，方法是在入口網站頂端的搜尋方塊中搜尋其名稱。選取實例以開啟它。
2. 選取 [金鑰 ] 以檢視 SignalR 服務實例的連接字串。
3. 複製主要連接字串，然後執行下列命令：
```
func settings add AzureSignalRConnectionString "<signalr-connection-string>"
```
在本機執行 Azure 函式：
```
func start
```
在 Azure 函式在本機執行之後，請開啟 http://localhost:7071/api/index ，您可以看到目前的星號計數。如果您在 GitHub 中以星號顯示或取消星號，您就會每隔幾秒鐘重新整理一次星號計數。