Ejercicio: Habilitar las actualizaciones automáticas en una aplicación web mediante SignalR Service

  • 12 minutos

Para agregar SignalR a este prototipo, debe crear:

  • Creación de un recurso de Azure SignalR
  • Algunas funciones nuevas para admitir SignalR
  • Actualización del cliente para admitir SignalR

Creación de un recurso de SignalR

Debe crear un recurso de Azure SignalR.

  1. Vuelva al terminal para crear el recurso SignalR.

  2. Vaya al subdirectorio setup-resources para crear el recurso.

    cd stock-prototype/setup-resources && bash create-signalr-resources.sh & cd ..

  3. Copie la cadena de conexión para el recurso SignalR. Necesitará esto para actualizar el código del servidor.

    Tipo de recurso Variable del entorno
    Azure SignalR Se conoce como SIGNALR_CONNECTION_STRING.

Actualizar variables de entorno de configuración del servidor

En ./start/server/local.settings.json, agregue una variable al objeto Values denominado SIGNALR_CONNECTION_STRING con el valor enumerado en el terminal y guarde el archivo.

Creación de la función signalr-open-connection

El cliente web usa el SDK de cliente de SignalR para establecer una conexión al servidor. El SDK recupera la conexión a través de una función denominada signalr-open-connection para conectarse al servicio.

  1. Presione F1 para abrir la paleta de comandos de Visual Studio Code.

  2. Busque y seleccione el comando Azure Functions: Crear función.

  3. Elija Establecer valor predeterminado y, a continuación, seleccione start/server para establecer la ubicación de la aplicación de funciones.

  4. Seleccione Sí cuando se le pregunte ¿Inicializar el proyecto para su uso con VS Code?

  5. Cuando se le pida, proporcione la siguiente información.

    Nombre Valor
    Plantilla Desencadenador HTTP
    Nombre signalr-open-connection

    Ahora hay disponible un archivo denominado signalr-open-connection.ts en ./start/server/src/functions.

  6. Abra signalr-open-connection.ts y reemplace todo por el código siguiente.

    import { app, input } from '@azure/functions';

const inputSignalR = input.generic({
    type: 'signalRConnectionInfo',
    name: 'connectionInfo',
    hubName: 'default',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

app.http('open-signalr-connection', {
    authLevel: 'anonymous',
    handler: (request, context) => {
        return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
    },
    route: 'negotiate',
    extraInputs: [inputSignalR]
});

    La información de conexión de SignalR se devuelve de la función.

Creación de la función signalr-send-message

  1. Presione F1 para abrir la paleta de comandos de Visual Studio Code.

  2. Busque y seleccione el comando Azure Functions: Crear función.

  3. Seleccione la ubicación de la aplicación de funciones como start/server.

  4. Cuando se le pida, proporcione la siguiente información.

    Nombre Valor
    Plantilla Desencadenador de Azure Cosmos DB
    Nombre signalr-send-message
    Cadena de conexión de Cosmos DB COSMOSDB_CONNECTION_STRING
    Nombre de la base de datos que se va a supervisar stocksdb
    Nombre de colección stocks
    Comprueba si existe la colección de concesiones y la crea automáticamente. true

    Actualice la ventana del explorador en Visual Studio Code para ver las actualizaciones. Ahora hay disponible un archivo denominado signalr-open-connection en ./start/server/src/functions.

  5. Abra signalr-send-message.ts y reemplace todo por el código siguiente.

    import { app, output, CosmosDBv4FunctionOptions, InvocationContext } from "@azure/functions";

const goingOutToSignalR = output.generic({
    type: 'signalR',
    name: 'signalR',
    hubName: 'default',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

export async function dataToMessage(documents: unknown[], context: InvocationContext): Promise<void> {

    try {

        context.log(`Documents: ${JSON.stringify(documents)}`);

        documents.map(stock => {
            // @ts-ignore
            context.log(`Get price ${stock.symbol} ${stock.price}`);
            context.extraOutputs.set(goingOutToSignalR,
                {
                    'target': 'updated',
                    'arguments': [stock]
                });
        });
    } catch (error) {
        context.log(`Error: ${error}`);
    }
}

const options: CosmosDBv4FunctionOptions = {
    connection: 'COSMOSDB_CONNECTION_STRING',
    databaseName: 'stocksdb',
    containerName: 'stocks',
    createLeaseContainerIfNotExists: true,
    feedPollDelay: 500,
    handler: dataToMessage,
    extraOutputs: [goingOutToSignalR],
};

app.cosmosDB('send-signalr-messages', options);
  • Definir datos entrantes: El objeto comingFromCosmosDB define el desencadenador de Cosmos DB para observar los cambios.
  • Definir el transporte saliente: El objeto goingOutToSignalR define la misma conexión de SignalR. HubName es el mismo concentrador default.
  • Conexión de datos al transporte: dataToMessage obtiene los elementos modificados de la tabla stocks y envía cada elemento modificado individualmente a través de SignalR mediante el uso de extraOutputs del mismo concentrador default.
  • Conexión a la aplicación: app.CosmosDB vincula los enlaces al nombre de la función send-signalr-messages.

Confirmación de cambios e inserción en GitHub

  1. En el terminal, confirme los cambios en el repositorio.

    git add .
git commit -m "Add SignalR functions"
git push

Creación de la función signalr-send-message

Cree una aplicación de funciones y recursos relacionados en Azure en los que puede publicar el nuevo código de funciones.

  1. Abra Azure Portal para crear una aplicación de funciones.

  2. Use la siguiente información para completar la pestaña Aspectos básicos de la creación de recursos.

    NOMBRE Value
    Resource group Cree un nuevo grupo de recursos denominado stock-prototype.
    Nombre de la aplicación de función Posponga el nombre en api. Por ejemplo, api-jamie.
    Código o contenedor Seleccione código.
    Pila del entorno en tiempo de ejecución seleccione Node.js.
    Versión Seleccione una versión LTS de Node.js.
    Region Seleccione una región cercana.
    Sistema operativo Seleccione Linux.
    Hospedar aplicaciones de WPF Seleccione Plan de consumo.

  3. No rellene ninguna otra pestaña y seleccione Revisar y crear y, a continuación, seleccione Crear. Antes de continuar, espere a que se complete la implementación.

  4. Seleccione Ir al recurso para abrir la nueva aplicación de funciones.

Configuración de la implementación de GitHub

Conecte la nueva aplicación de funciones al repositorio de GitHub para habilitar la implementación continua. En un entorno de producción, implementaría cambios de código en un espacio de ensayo antes de intercambiarlos en producción.

  1. En la página de Azure Portal de la nueva aplicación de funciones, seleccione Centro de implementación en el menú izquierdo.

  2. Seleccione Origen de GitHub.

  3. Use la siguiente información para completar la configuración de implementación.

    NOMBRE Valor
    Organización Seleccione la cuenta de GitHub.
    Repositorio Busque y seleccione mslearn-advocates.azure-functions-and-signalr.
    Sucursal Seleccione la rama main.
    Opción de flujo de trabajo Seleccione Agregar un flujo de trabajo ....
    Tipo de autenticación Seleccione Identidad asignada por el usuario.
    Subscription Seleccione la misma suscripción que se ve en la parte superior de la página.
    Identidad Seleccione Crear nuevo.

  4. Seleccione Guardar en la parte superior de la sección para guardar la configuración. Esto crea un nuevo archivo de flujo de trabajo en el repositorio bifurcado.

  5. Esta configuración de implementación crea un archivo de flujo de trabajo de Acciones de GitHub en el repositorio. Debe actualizar el archivo de flujo de trabajo para usar la ruta de acceso del paquete correcta para la aplicación de funciones.

Edición del flujo de trabajo de implementación de GitHub

  1. En el terminal de Visual Studio Code, extraiga el nuevo archivo de flujo de trabajo de la bifurcación (origen).

    git pull origin main

    Debe colocar una nueva carpeta en .github con una ruta de acceso al archivo de flujo de trabajo: '.github/workflows/main_RESOURCE_NAME.yml donde RESOURCE_NAME es el nombre de la aplicación de Azure Functions.

  2. Abra el archivo de flujo de trabajo.

  3. Cambie el valor name de la parte superior del archivo a Server.

  4. Dado que el repositorio de origen tiene la aplicación de Azure Functions en un subdirectorio, el archivo de acción debe cambiar para reflejarlo. En la sección env, agregue una nueva variable denominada PACKAGE_PATH para usar la ruta de acceso del paquete.

    env:
  PACKAGE_PATH: 'start/server'

  5. Busque el paso Resolver dependencias del proyecto mediante npm y reemplace el contenido por el siguiente código YAML para que use también la ruta de acceso del subdirectorio del paquete. El cambio crítico es la ruta de acceso del comando pushd para incluir la variable env.PACKAGE_PATH.

    - name: 'Resolve Project Dependencies Using Npm'
  shell: bash
  run: |
    pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}'
    npm install
    npm run build --if-present
    npm run test --if-present
    popd

  6. Busque el paso artefacto Zip para la implementación y reemplace el contenido por el siguiente código YAML para que use también la ruta de acceso del subdirectorio del paquete.

    - name: Upload artifact for deployment job
  uses: actions/upload-artifact@v3
  with:
    name: node-app
    path: release.zip

    El archivo ZIP se coloca en la raíz del repositorio, por lo que el valor ../ es necesario para colocar el archivo ZIP en la raíz.

  7. Guarde el archivo y confirme los cambios en el repositorio.

    git add .
git commit -m "Update deployment workflow to use package path"
git push

    Este cambio desencadenará la ejecución del flujo de trabajo. Puede ver el flujo de trabajo en la sección Acciones de la bifurcación en GitHub.

Configuración de las variables de entorno para las funciones de la API

  1. En Azure Portal, seleccione Configuración -> Configuración y, a continuación, seleccione Nueva configuración de la aplicación.

  2. Escriba la configuración de las cadenas de conexión de Cosmos DB y SignalR. Puede encontrar los valores en local.settings.json en la carpeta start/server.

    NOMBRE Valor
    COSMOSDB_CONNECTION_STRING Cadena de conexión de la cuenta de Cosmos DB.
    SIGNALR_CONNECTION_STRING Cadena de conexión para la cuenta de SignalR.

  3. Haga clic en Save (Guardar) para guardar la configuración.

Prueba de la implementación de las funciones de la API

  1. En Azure Portal, seleccione Información general y seleccione Dirección URL para abrir la aplicación en un explorador.
  2. Copie la dirección URL; la necesitará al actualizar el archivo de cliente .env para el valor BACKEND_URL al trabajar en la unidad 7.
  3. Abra la dirección URL en un explorador para probar las funciones de la API.
  4. Anexe /api/getStocks a la dirección URL en el explorador y presione Entrar. Debería ver una matriz JSON con datos de acciones.

Ha actualizado el código del servidor para devolver existencias con SignalR y lo ha implementado en una aplicación de funciones. A continuación, actualizará el cliente para que use SignalR para recibir actualizaciones.