Guía de inicio rápido: creación de una aplicación sin servidor con Azure Functions y el servicio SignalR mediante JavaScript

Artículo
11/17/2023

En este artículo, usará Azure SignalR Service, Azure Functions y JavaScript para crear una aplicación sin servidor para difundir mensajes a los clientes.

Nota

Puede obtener todo el código usado en el artículo en GitHub.

Prerrequisitos

Esta guía de inicio rápido se puede ejecutar en macOS, Windows o Linux.

Requisito previo	Descripción
Una suscripción de Azure	Si no tiene una suscripción, cree una cuenta gratuita de Azure
Editor de código	Necesitará un editor de código como Visual Studio Code.
Azure Functions Core Tools	Requiere la versión 2.7.1505 o posterior para ejecutar aplicaciones de funciones de Azure de Python localmente.
Node.js	Consulte las versiones de node.js admitidas en la guía para desarrolladores de JavaScript de Azure Functions.
Azurite	El enlace de SignalR necesita Azure Storage. Las funciones que se ejecuten localmente pueden usar un emulador de almacenamiento local.
CLI de Azure	Opcionalmente, puede usar la CLI de Azure para crear una instancia de Azure SignalR Service.

Creación de una instancia del servicio Azure SignalR

En esta sección, creará una instancia básica de Azure SignalR que se usará para la aplicación. En los pasos siguientes se usa Azure Portal para crear una instancia, pero también puede usar la CLI de Azure. Para obtener más información, vea el comando az signalr create en la referencia de la CLI de Azure SignalR Service.

Inicie sesión en Azure Portal.
En la parte superior izquierda de la página, seleccione + Crear un recurso.
En la página Crear un recurso, en el cuadro de texto Search services and marketplace (Servicios de búsqueda y Marketplace), escriba signalr y, después, seleccione SignalR Service en la lista.
En la página SignalR Service, seleccione Crear.
En la pestaña Aspectos básicos, escriba la información esencial para la nueva instancia de SignalR Service. Escriba los siguientes valores:

Campo	Valor sugerido	Descripción
Suscripción	Elija una suscripción	Seleccione la suscripción que quiere usar para crear una instancia de SignalR Service.
Grupos de recursos	Cree un grupo de recursos denominado SignalRTestResources	Seleccione o cree un grupo de recursos para el recurso SignalR. Es útil crear un grupo de recursos para este tutorial en lugar de usar un grupo de recursos existente. Para liberar recursos después de completar el tutorial, elimine el grupo de recursos. Al eliminar un grupo de recursos también se eliminarán todos los recursos que pertenezcan a él. Esta acción no se puede deshacer. Antes de eliminar un grupo de recursos, asegúrese de que no incluye los recursos que quiere conservar. Para obtener más información, consulte Uso de grupos de recursos para administrar los recursos de Azure.
Nombre del recurso	testsignalr	Escriba un nombre de recurso único para usarlo en el recurso SignalR. Si testsignalr ya se ha usado en la región, agregue un dígito o carácter hasta que el nombre sea único. El nombre debe ser una cadena de entre 1 y 63 caracteres y solo puede contener números, letras y el carácter de guion (`-`). El nombre no puede empezar ni terminar con el carácter de guion y no se pueden usar varios guiones consecutivos.
Región	Elija la región.	Seleccione la región adecuada para la nueva instancia de SignalR Service. Azure SignalR Service no está disponible actualmente en todas las regiones. Para obtener más información, vea Disponibilidad en regiones para Azure SignalR Service.
Plan de tarifa	Seleccione Cambiar y luego elija Free (Dev/Test Only) (Gratis (solo desarrollo/pruebas)). Elija Seleccionar para confirmar el plan de tarifa que elija.	Azure SignalR Service tiene tres planes de tarifa: Gratis, Estándar y Premium. Los tutoriales usan el nivel Gratis, a menos que se indique lo contrario en los requisitos previos. Para obtener más información sobre las diferencias de función entre los niveles y los precios, vea Precios de Azure SignalR Service.
Modo de servicio	Elección del modo de servicio adecuado	Use Valor predeterminado cuando hospede la lógica del centro de SignalR en las aplicaciones web y use el servicio SignalR como proxy. Use Sin servidor cuando use tecnologías sin servidor como Azure Functions para hospedar la lógica del centro de SignalR. El modo Clásico solo es para compatibilidad con versiones anteriores y no se recomienda usar. Para obtener más información, vea Modo de servicio en Azure SignalR Service.

No es necesario cambiar la configuración en las pestañas Redes y Etiquetas de los tutoriales de SignalR.

Seleccione el botón Revisar y crear de la parte inferior de la pestaña Aspectos básicos.
En la pestaña Revisar y crear, revise los valores y luego seleccione Crear. La implementación tarda unos minutos en completarse.
Cuando se complete la implementación, seleccione el botón Ir al grupo de recursos.
En la página de recursos de SignalR, seleccione Claves en el menú de la izquierda, en Configuración.
Copie la cadena de conexión de la clave principal. Necesita esta cadena de conexión para configurar la aplicación más adelante en este tutorial.

Proyecto de función de agregado

Asegúrese de que Azure Functions Core Tools está instalado.

Abra una ventana de línea comandos.
Cree el directorio del proyecto y, a continuación, cámbielo.
Ejecute el comando func init de Azure Functions para inicializar un nuevo proyecto.

# Initialize a function project
func init --worker-runtime javascript

Creación de las funciones del proyecto

Después de inicializar un proyecto, tendrá que crear funciones. Este proyecto requiere tres funciones:

index: hospeda una página web para un cliente.
negotiate: permite que un cliente obtenga un token de acceso.
broadcast: usa un desencadenador de tiempo para difundir periódicamente mensajes a todos los clientes.

Al ejecutar el comando func new desde el directorio raíz del proyecto, Azure Functions Core Tools creará los archivos de origen de la función que los almacena en una carpeta con el nombre de la función. Editará los archivos según sea necesario reemplazando el código predeterminado por el código de la aplicación.

Creación de la función de índice

Ejecute el siguiente comando para crear la función index.
```
func new -n index -t HttpTrigger
```

Edite index/function.json y reemplace el contenido por el código json siguiente:

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

Edite index/index.js y reemplace el contenido con el siguiente código:

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 (err) {
        context.log.error(err);
        context.done(err);
    }
}

Creación de la función negotiate

Ejecute el siguiente comando para crear la función negotiate.
```
func new -n negotiate -t HttpTrigger
```

Edite negotiate/function.json y reemplace el contenido por el código json siguiente:

{
  "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"
    }
  ]
}

Edite negotiate/index.js y reemplace el contenido por el código siguiente de JavaScript:

module.exports = async function (context, req, connectionInfo) {
    context.res.body = connectionInfo;
};

Cree una función de difusión.

Ejecute el siguiente comando para crear la función broadcast.
```
func new -n broadcast -t TimerTrigger
```

Edite broadcast/function.json y reemplace el contenido por el código siguiente:

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

Edite broadcast/index.js y reemplace el contenido por el código siguiente:

var https = require('https');

var etag = '';
var star = 0;

module.exports = function (context) {
    var req = https.request("https://api.github.com/repos/azure/azure-signalr", {
        method: 'GET',
        headers: {'User-Agent': 'serverless', 'If-None-Match': etag}
    }, res => {
        if (res.headers['etag']) {
            etag = res.headers['etag']
        }

        var body = "";

        res.on('data', data => {
            body += data;
        });
        res.on("end", () => {
            if (res.statusCode === 200) {
                var jbody = JSON.parse(body);
                star = jbody['stargazers_count'];
            }

            context.bindings.signalRMessages = [{
                "target": "newMessage",
                "arguments": [ `Current star count of https://github.com/Azure/azure-signalr is: ${star}` ]
            }]
            context.done();
        });
    }).on("error", (error) => {
        context.log(error);
        context.res = {
          status: 500,
          body: error
        };
        context.done();
    });
    req.end();
}

Creación del archivo index.html

La interfaz de cliente de esta aplicación es una página web. La función index lee el contenido HTML del archivo content/index.html.

Cree una carpeta denominada content en la carpeta raíz del proyecto.
Cree el archivo content/index.html.

Copie el siguiente contenido en el archivo content/index.html y guárdelo:

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

Agregue la cadena de conexión de SignalR Service a la configuración de la aplicación de funciones

Azure Functions requiere una cuenta de almacenamiento para funcionar. Puede instalar y ejecutar el emulador de Azure Storage. O bien, puede actualizar la configuración para usar su cuenta de almacenamiento real con el siguiente comando: bash func settings add AzureWebJobsStorage "<storage-connection-string>"

Ya casi ha terminado. El último paso es establecer la cadena de conexión de SignalR Service en la configuración de la aplicación Azure Function.

En Azure Portal, vaya a la instancia de SignalR que implementó anteriormente.
Seleccione Claves para ver las cadenas de conexión para la instancia del servicio SignalR.
Copie la cadena de conexión principal y ejecute el comando:

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

Ejecute localmente la aplicación de funciones de Azure

Inicie el emulador de almacenamiento de Azurite:

azurite

Ejecute la aplicación de funciones de Azure en el entorno local:

func start

Nota

Si viera errores mostrando errores de lectura en el almacenamiento de blobs, asegúrese de que la configuración "AzureWebJobsStorage" del archivo local.settings.json esté establecida en UseDevelopmentStorage=true.

Después de que Azure Function se esté ejecutando localmente, vaya a http://localhost:7071/api/index. En la página se muestra el recuento del factor de proporcionalidad actual para el repositorio de Azure/azure-signalr de GitHub. Al activar o desactivar el factor de proporcionalidad del repositorio en GitHub, verá el recuento actualizado cada pocos segundos.

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

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.
En la ventana que se abrirá, seleccione el grupo de recursos y luego haga clic en Eliminar grupo de recursos.
En la nueva ventana escriba el nombre del grupo de recursos que quiere eliminar y, después, haga clic en Eliminar.

Pasos siguientes

En este inicio rápido, ha compilado y ejecutado una aplicación sin servidor en tiempo real en localhost. 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.

Enlaces de SignalR Service para Azure Functions

Comunicación bidireccional sin servidor

Implementación de Azure Functions con VS Code