Inicio rápido: Creación de una aplicación en la que se muestra el número de estrellas de GitHub con Azure Functions y SignalR Service mediante C#

El servicio Azure SignalR le permite agregar fácilmente funcionalidad en tiempo real a la aplicación. Azure Functions es una plataforma sin servidor que le permite ejecutar el código sin tener que administrar ninguna infraestructura. En este inicio rápido, aprenderá a usar SignalR Service y Azure Functions para compilar una aplicación sin servidor con C# para difundir mensajes a los clientes.

Requisitos previos

Si todavía no ha instalado Visual Studio Code, puede descargarlo y usarlo de forma gratuita(https://code.visualstudio.com/Download).

También puede ejecutar este tutorial en la línea de comandos (macOS, Windows o Linux) mediante Azure Functions Core Tools. También el SDK de .NET Core y el editor de código que prefiera.

Si no tiene una suscripción de Azure, cree una gratuita antes de comenzar.

¿Tiene problemas? Consulte la guía de solución de problemas o póngase en contacto con nosotros.

Inicio de sesión en Azure y creación de una instancia de SignalR Service

Inicie sesión en Azure Portal en https://portal.azure.com/ con su cuenta de Azure.

¿Tiene problemas? Consulte la guía de solución de problemas o póngase en contacto con nosotros.

Creación de una instancia del servicio Azure SignalR

La aplicación se conectará a una instancia del servicio SignalR en Azure.

1. Seleccione el botón Nuevo de la esquina superior izquierda en Azure Portal. En la pantalla Nuevo, escriba SignalR Service (Servicio SignalR) en el cuadro de búsqueda y presione Entrar.

   

2. Seleccione SignalR Service (Servicio SignalR) en los resultados de la búsqueda y, a continuación, seleccione Crear.

3. Escriba la siguiente configuración.

   Configuración	Valor sugerido	Descripción
   Nombre del recurso	Nombre único globalmente	Nombre que identifica la nueva instancia del servicio SignalR. Los caracteres válidos son a-z, 0-9 y -.
   Suscripción	Su suscripción	Suscripción en que se creará esta nueva instancia del servicio SignalR.
   Grupo de recursos	myResourceGroup	Nombre del nuevo grupo de recursos en el que se va a crear la instancia del servicio SignalR.
   Ubicación	Oeste de EE. UU.	Seleccione una región cerca de usted.
   Plan de tarifa	Gratuito	Pruebe el servicio Azure SignalR de forma gratuita.
   Recuento de unidades	No aplicable	El recuento de unidades especifica cuántas conexiones puede aceptar la instancia del servicio SignalR. Solo es configurable en el nivel Estándar.
   Modo de servicio	Sin servidor	Para su uso con Azure Functions o la API REST.

   

4. Seleccione Crear para empezar a implementar la instancia del servicio SignalR.

5. Una vez implementada la instancia, ábrala en el portal y busque su página de configuración. Cambie la configuración del modo de servicio Sin servidor solo si usa Azure SignalR Service a través del enlace de Azure Functions o la API de REST. Déjelo en Clásico o Predeterminado en caso contrario.

¿Tiene problemas? Consulte la guía de solución de problemas o póngase en contacto con nosotros.

Configuración y ejecución de la instancia de Azure Functions localmente

1. Asegúrese de que ha instalado Azure Function Core Tools. Cree un directorio vacío y vaya al directorio con la línea de comandos.

   # 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
   

2. Después de inicializar un proyecto. Cree un archivo con el nombre Function.cs. Agregue el código siguiente a Function.cs.

   using System;
   using System.IO;
   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();
   
           [FunctionName("index")]
           public static IActionResult Index([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 = "serverlessSample")] SignalRConnectionInfo connectionInfo)
           {
               return connectionInfo;
           }
   
           [FunctionName("broadcast")]
           public static async Task Broadcast([TimerTrigger("*/5 * * * * *")] TimerInfo myTimer,
           [SignalR(HubName = "serverlessSample")] IAsyncCollector<SignalRMessage> signalRMessages)
           {
               var request = new HttpRequestMessage(HttpMethod.Get, "https://api.github.com/repos/azure/azure-signalr");
               request.Headers.UserAgent.ParseAdd("Serverless");
               var response = await httpClient.SendAsync(request);
               var result = JsonConvert.DeserializeObject<GitResult>(await response.Content.ReadAsStringAsync());
               await signalRMessages.AddAsync(
                   new SignalRMessage
                   {
                       Target = "newMessage",
                       Arguments = new[] { $"Current star count of https://github.com/Azure/azure-signalr is: {result.StarCount}" }
                   });
           }
   
           private class GitResult
           {
               [JsonRequired]
               [JsonProperty("stargazers_count")]
               public string StarCount { get; set; }
           }
       }
   }
   

   Estos códigos tienen tres funciones. Index se usa para obtener un sitio web como cliente. Negotiate se usa para que el cliente obtenga el token de acceso. Broadcast se usa para obtener periódicamente el número de estrellas de GitHub y transmitir mensajes a todos los clientes.

3. La interfaz de cliente de esta muestra es una página web. Si se lee contenido HTML de content/index.html en la función GetHomePage, cree un archivo index.html en el directorio content bajo la carpeta raíz del proyecto. Y copie el contenido siguiente.

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

4. Actualice para *.csproj que la página de contenido se cree en la carpeta de salida de compilación.

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

5. Ya casi ha terminado. El último paso consiste en establecer una cadena de conexión de SignalR Service a la configuración de Azure Functions.

   1. En el explorador que se muestra al abrir Azure Portal, confirme que la instancia del servicio SignalR que implementó anteriormente se ha creado correctamente buscando su nombre en el cuadro de búsqueda de la parte superior del portal. Seleccione la instancia para abrirla.

      

   2. Seleccione Claves para ver las cadenas de conexión para la instancia del servicio SignalR.

      

   3. Copie la cadena de conexión principal. Ejecute el comando siguiente.

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

6. Ejecute la función de Azure en el entorno local:

   func start
   

   Después de que la función de Azure se ejecute en el entorno local. Use el explorador para visitar http://localhost:7071/api/index y ver el número de estrellas actual. Y si asigna estrellas o las quita en GitHub, obtendrá un número de estrellas que se actualiza cada pocos segundos.

   Nota

   Para el enlace de SignalR se necesita Azure Storage, pero puede usar el emulador de almacenamiento local cuando la función se ejecuta localmente. Si se produce un error como There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid., tendrá que descargar y habilitar el emulador de almacenamiento.

¿Tiene problemas? Consulte la guía de solución de problemas o póngase en contacto con nosotros.

Limpieza de recursos

Si no va a seguir usando esta aplicación, siga estos pasos para eliminar todos los recursos creados en esta guía de inicio rápido a fin de que no se le apliquen cargos adicionales:

1. En Azure Portal, seleccione Grupos de recursos en el extremo izquierdo y luego seleccione el grupo de recursos que creó. Además, puede usar el cuadro de búsqueda para buscar el grupo de recursos por su nombre.

2. En la ventana que se abrirá, seleccione el grupo de recursos y luego haga clic en Eliminar grupo de recursos.

3. En la nueva ventana escriba el nombre del grupo de recursos que quiere eliminar y, después, haga clic en Eliminar.

¿Tiene problemas? Consulte la guía de solución de problemas o póngase en contacto con nosotros.

Pasos siguientes

En este inicio rápido, ha compilado y ejecutado una aplicación sin servidor en tiempo real en el entorno local. Obtenga más información sobre cómo usar enlaces de SignalR Service con Azure Functions. A continuación, obtendrá más información sobre cómo establecer la comunicación bidireccional entre los clientes y Azure Functions con SignalR Service.