Inicio rápido: Uso de JavaScript para crear una aplicación en la que se muestre el número de estrellas de GitHub con Azure Functions y SignalR Service

Azure SignalR Service permite agregar fácilmente funciones en tiempo real a una aplicación y Azure Functions es una plataforma sin servidor que 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 JavaScript para difundir mensajes a los clientes.

Prerrequisitos

• Un editor de código como Visual Studio Code

• Una cuenta de Azure con una suscripción activa. Cree una cuenta gratuita.

• Azure Functions Core Tools, versión 2 o superiores. Se usa para ejecutar aplicaciones de Azure Functions de forma local.

• Node.js, versión 10.x

  Nota

  Los ejemplos deberían funcionar con otras versiones de Node.js. Para más información, consulte la documentación de las versiones del runtime de Azure Functions.

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

Inicio de sesión en Azure

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 javascript
   

2. Después de inicializar un proyecto, tendrá que crear funciones. En este ejemplo, es necesario crear tres funciones.

   1. Ejecute el comando siguiente para crear una función index, que hospedará una página web para el cliente.

      func new -n index -t HttpTrigger
      

      Abra index/function.json y copie los códigos JSON siguientes:

      {
        "bindings": [
          {
            "authLevel": "anonymous",
            "type": "httpTrigger",
            "direction": "in",
            "name": "req",
            "methods": [
              "get",
              "post"
            ]
          },
          {
            "type": "http",
            "direction": "out",
            "name": "res"
          }
        ]
      }
      

      Abra index/index.js y copie los códigos siguientes.

      var fs = require('fs').promises
      
      module.exports = async function (context, req) {
          const path = context.executionContext.functionDirectory + '/../content/index.html'
          try {
              var data = await fs.readFile(path);
              context.res = {
                  headers: {
                      'Content-Type': 'text/html'
                  },
                  body: data
              }
              context.done()
          } catch (error) {
              context.log.error(err);
              context.done(err);
          }
      }
      

   2. Cree una función negotiate para que los clientes obtengan el token de acceso.

      func new -n negotiate -t SignalRNegotiateHTTPTrigger
      

      Abra negotiate/function.json y copie los códigos JSON siguientes:

      {
        "disabled": false,
        "bindings": [
          {
            "authLevel": "anonymous",
            "type": "httpTrigger",
            "direction": "in",
            "methods": [
              "post"
            ],
            "name": "req",
            "route": "negotiate"
          },
          {
            "type": "http",
            "direction": "out",
            "name": "res"
          },
          {
            "type": "signalRConnectionInfo",
            "name": "connectionInfo",
            "hubName": "serverless",
            "connectionStringSetting": "AzureSignalRConnectionString",
            "direction": "in"
          }
        ]
      }
      

   3. Cree una función broadcast para difundir mensajes a todos los clientes. En el ejemplo, se usa el desencadenador de tiempo para difundir los mensajes de manera periódica.

      func new -n broadcast -t TimerTrigger
      

      Abra broadcast/function.json y copie los códigos siguientes.

      {
        "bindings": [
          {
            "name": "myTimer",
            "type": "timerTrigger",
            "direction": "in",
            "schedule": "*/5 * * * * *"
          },
          {
            "type": "signalR",
            "name": "signalRMessages",
            "hubName": "serverless",
            "connectionStringSetting": "AzureSignalRConnectionString",
            "direction": "out"
          }
        ]
      }
      

      Abra broadcast/index.js y copie los códigos siguientes.

      var https = require('https');
      
      module.exports = function (context) {
          var req = https.request("https://api.github.com/repos/azure/azure-signalr", {
              method: 'GET',
              headers: {'User-Agent': 'serverless'}
          }, res => {
              var body = "";
      
              res.on('data', data => {
                  body += data;
              });
              res.on("end", () => {
                  var jbody = JSON.parse(body);
                  context.bindings.signalRMessages = [{
                      "target": "newMessage",
                      "arguments": [ `Current star count of https://github.com/Azure/azure-signalr is: ${jbody['stargazers_count']}` ]
                  }]
                  context.done();
              });
          }).on("error", (error) => {
              context.log(error);
              context.res = {
                status: 500,
                body: error
              };
              context.done();
          });
          req.end();
      }    
      

3. La interfaz de cliente de este ejemplo es una página web. Si se lee contenido HTML de content/index.html en la función index, 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. 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>"
      

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