Quickstart: Create an app showing GitHub star count with Azure Functions and SignalR Service via C#

In this article, you learn how to use SignalR Service and Azure Functions to build a serverless application with C# to broadcast messages to clients.

Prerequisites

The following prerequisites are needed for this quickstart:

• Visual Studio Code, or other code editor. If you don't already have Visual Studio Code installed, download Visual Studio Code here.
• An Azure subscription. If you don't have an Azure subscription, create one for free before you begin.
• Azure Functions Core Tools
• .NET Core SDK

Create an Azure SignalR Service instance

In this section, you create a basic Azure SignalR instance to use for your app. The following steps use the Azure portal to create a new instance, but you can also use the Azure CLI. For more information, see the az signalr create command in the Azure SignalR Service CLI Reference.

1. Sign in to the Azure portal.
2. In the upper-left side of the page, select + Create a resource.
3. On the Create a resource page, in the Search services and marketplace text box, enter signalr and then select SignalR Service from the list.
4. On the SignalR Service page, select Create.
5. On the Basics tab, you enter the essential information for your new SignalR Service instance. Enter the following values:

You don't need to change the settings on the Networking and Tags tabs for the SignalR tutorials.

6. Select the Review + create button at the bottom of the Basics tab.
7. On the Review + create tab, review the values and then select Create. It takes a few moments for deployment to complete.
8. When the deployment is complete, select the Go to resource button.
9. On the SignalR resource page, select Keys from the menu on the left, under Settings.
10. Copy the Connection string for the primary key. You need this connection string to configure your app later in this tutorial.

Setup and run the Azure Function locally

You need the Azure Functions Core Tools for this step.

1. Create an empty directory and change to the directory with the command line.

2. Initialize a new project.

   • In-process
   • Isolated process

   # 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. Using your code editor, create a new file with the name Function.cs. Add the following code to Function.cs:

   • In-process
   • Isolated process

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

   The code in Function.cs has three functions:

   • GetHomePage is used to get a website as client.
   • Negotiate is used by the client to get an access token.
   • Broadcast is periodically called to get the star count from GitHub and then broadcast messages to all clients.

4. The client interface for this sample is a web page. We render the web page using the GetHomePage function by reading HTML content from file content/index.html. Now let's create this index.html under the content subdirectory with the following 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>
   

5. Update your *.csproj to make the content page in the build output folder.

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

6. Azure Functions requires a storage account to work. You can install and run the Azure Storage Emulator. Or you can update the setting to use your real storage account with the following command:

   func settings add AzureWebJobsStorage "<storage-connection-string>"
   

7. It's almost done now. The last step is to set a connection string of the SignalR Service to Azure Function settings.

   1. Confirm the SignalR Service instance was successfully created by searching for its name in the search box at the top of the portal. Select the instance to open it.

      

   2. Select Keys to view the connection strings for the SignalR Service instance.

      

   3. Copy the primary connection string, and then run the following command:

      func settings add AzureSignalRConnectionString "<signalr-connection-string>"
      

8. Run the Azure function locally:

   func start
   

   After the Azure function is running locally, open http://localhost:7071/api/index, and you can see the current star count. If you star or unstar in the GitHub, you get a star count refreshing every few seconds.

Clean up resources

If you're not going to continue to use this app, delete all resources created by this quickstart with the following steps so you don't incur any charges:

1. In the Azure portal, select Resource groups on the far left, and then select the resource group you created. Alternatively, you may use the search box to find the resource group by its name.

2. In the window that opens, select the resource group, and then click Delete resource group.

3. In the new window, type the name of the resource group to delete, and then click Delete.

Having issues? Try the troubleshooting guide or let us know.

Next steps

In this quickstart, you built and ran a real-time serverless application locally. Next, learn more about bi-directional communication between clients and Azure Functions with Azure SignalR Service.