Oefening: Automatische updates in een webtoepassing inschakelen met behulp van SignalR Service

  • 12 minuten

Als u SignalR wilt toevoegen aan dit prototype, moet u het volgende maken:

  • Een Azure SignalR-resource
  • Enkele nieuwe functies ter ondersteuning van SignalR
  • De client bijwerken om SignalR te ondersteunen

Een SignalR-resource maken

U moet een Azure SignalR-resource maken.

  1. Ga terug naar de terminal om de SignalR-resource te maken.

  2. Navigeer naar de setup-resources submap om de resource te maken.

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

  3. Kopieer de verbindingsreeks voor de SignalR-resource. U hebt deze nodig om de servercode bij te werken.

    Resourcetype Omgevingsvariabele
    Azure SignalR Aangeduid als SIGNALR_CONNECTION_STRING

Omgevingsvariabelen voor serverconfiguratie bijwerken

Voeg in ./start/server/local.settings.json een variabele toe aan het object Waarden met de naam SIGNALR_CONNECTION_STRING met de waarde die wordt vermeld in de terminal en sla het bestand op.

signalr-open-connection De functie maken

De SDK van de SignalR-client wordt door de webclient gebruikt om verbinding te maken met de server. De SDK haalt de verbinding op via een functie met de naam signalr-open-connection om verbinding te maken met de service.

  1. Druk op F1 om het opdrachtenpalet van Visual Studio Code te openen.

  2. Zoek en selecteer de opdracht Azure Functions: functie maken.

  3. Kies Standaard instellen en selecteer vervolgens start/server om de locatie van de functie-app in te stellen.

  4. Selecteer Ja wanneer u wordt gevraagd om het project te initialiseren voor gebruik met VS Code?.

  5. Geef de volgende informatie op wanneer u daarom wordt gevraagd.

    Naam Weergegeven als
    Template HTTP-trigger
    Naam signalr-open-connection

    Een bestand met de naam signalr-open-connection.ts is nu beschikbaar op ./start/server/src/functions.

  6. Open signalr-open-connection.ts en vervang alles door de volgende code.

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

    De SignalR-verbindingsgegevens worden geretourneerd door de functie.

signalr-send-message De functie maken

  1. Druk op F1 om het opdrachtenpalet van Visual Studio Code te openen.

  2. Zoek en selecteer de opdracht Azure Functions: functie maken.

  3. Selecteer de locatie van de functie-app als start/server.

  4. Geef de volgende informatie op wanneer u daarom wordt gevraagd.

    Naam Weergegeven als
    Template Azure Cosmos DB-trigger
    Naam signalr-send-message
    Cosmos DB-verbindingsreeks COSMOSDB_CONNECTION_STRING
    Databasenaam die moet worden bewaakt stocksdb
    Naam van verzameling stocks
    Controleert op bestaan en maakt automatisch de leaseverzameling true

    Vernieuw het Explorer-venster in Visual Studio Code om de updates weer te geven. Een bestand met de naam signalr-open-connection is nu beschikbaar op ./start/server/src/functions.

  5. Open signalr-send-message.ts en vervang alles door de volgende code.

    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);
  • Binnenkomende gegevens definiëren: het comingFromCosmosDB object definieert de Cosmos DB-trigger om te controleren op wijzigingen.
  • Uitgaande transport definiëren: het goingOutToSignalR object definieert dezelfde SignalR-verbinding. De hubName is dezelfde hub default.
  • Verbinding maken met gegevens om te transporteren: de dataToMessage gewijzigde items in de stocks tabel worden opgehaald en elk gewijzigd item afzonderlijk via SignalR verzonden met behulp van extraOutputs dezelfde hub default.
  • Verbinding maken met app: de app.CosmosDB bindingen worden gekoppeld aan de naam van de functie send-signalr-messages.

Wijzigingen doorvoeren en pushen naar GitHub

  1. Voer in de terminal de wijzigingen door in de opslagplaats.

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

signalr-send-message De functie maken

Maak een functie-app en gerelateerde resources in Azure waarnaar u de nieuwe functiecode kunt publiceren.

  1. Open Azure Portal om een nieuwe functie-app te maken.

  2. Gebruik de volgende informatie om het tabblad Basisinformatie voor het maken van resources te voltooien.

    Naam Weergegeven als
    Resourcegroep Maak een nieuwe resourcegroepnamen stock-prototype.
    Functions App-naam Postpend uw naam aan api. Bijvoorbeeld: api-jamie.
    Code of container Selecteer code.
    Runtimestack Selecteer Node.js.
    Versie Selecteer een LTS-versie van Node.js.
    Regio Selecteer een regio bij u in de buurt.
    Besturingssysteem Selecteer Linux.
    Hosting Selecteer Verbruiksabonnement.

  3. Vul geen andere tabbladen in en selecteer Beoordelen en maken en selecteer Vervolgens Maken. Wacht tot de implementatie is voltooid voordat u doorgaat.

  4. Selecteer Ga naar de resource om de nieuwe functie-app te openen.

De GitHub-implementatie configureren

Verbind uw nieuwe functie-app met de GitHub-opslagplaats om continue implementatie mogelijk te maken. In een productieomgeving zou u in plaats daarvan codewijzigingen in een staging-site implementeren voordat u ze in productie wisselt.

  1. Selecteer Implementatiecentrum in het linkermenu op de azure-portalpagina voor de nieuwe functie-app.

  2. Selecteer Bron van GitHub.

  3. Gebruik de volgende informatie om de implementatieconfiguratie te voltooien.

    Naam Weergegeven als
    Organisatie Selecteer uw GitHub-account.
    Opslagplaats Zoek en selecteer mslearn-advocates.azure-functions-and-signalr.
    Vertakking Selecteer de hoofdbranch .
    Werkstroomoptie Selecteer Een werkstroom toevoegen....
    Authentication type Selecteer Door de gebruiker toegewezen identiteit.
    Abonnement Selecteer hetzelfde abonnement als bovenaan de pagina.
    Identiteit Selecteer Nieuw maken.

  4. Selecteer Opslaan bovenaan de sectie om de instellingen op te slaan. Hiermee maakt u een nieuw werkstroombestand in uw geforkte opslagplaats.

  5. Met deze implementatieconfiguratie maakt u een Werkstroombestand voor GitHub Actions in de opslagplaats. U moet het werkstroombestand bijwerken om het juiste pakketpad voor de functie-app te gebruiken.

Op dit moment kan uw GitHub-implementatie een fout genereren vanwege een verkeerde configuratie in de door de gebruiker toegewezen beheerde identiteit die is gemaakt in uw resourcegroep in Azure.

De beheerde identiteit bijwerken

  1. Selecteer op de pagina van de nieuwe functie-app in Azure Portal uw resourcegroep in Overview>Essentials en selecteer vervolgens de beheerde identiteit onder Resources. Deze beheerde identiteit is gemaakt door Functions toen u de GitHub-implementatie hebt ingeschakeld.
  2. Selecteer> op de pagina Beheerde identiteit instellingen federatieve referenties en selecteer vervolgens de bestaande referentie.
  3. Wijzig in Uw Github-account de instelling voor Entiteit naar Omgeving en voer Production deze in voor Omgeving.
  4. Selecteer Bijwerken om de referentie bij te werken.

GitHub-implementatiewerkstroom bewerken

  1. Haal in de Visual Studio Code-terminal het nieuwe werkstroombestand op uit uw fork (oorsprong).

    git pull origin main

    Hiermee wordt een nieuwe map op .github geplaatst met een pad naar uw werkstroombestand: .github/workflows/main_RESOURCE_NAME.yml waar RESOURCE_NAME is de naam van de functie-app.

  2. Open het werkstroombestand en wijzig de name waarde boven aan het bestand in Server.

  3. Omdat de bronopslagplaats de functie-app in een submap heeft, moet het actiebestand worden gewijzigd om dat weer te geven. Voeg in de sectie env een nieuwe variabele toe met de naam PACKAGE_PATH om het pakketpad te gebruiken.

    env:
  PACKAGE_PATH: 'start/server'

  4. Zoek de projectafhankelijkheden oplossen met behulp van de npm-stap en vervang de inhoud door de volgende YAML om ook het pad naar de submap van het pakket te gebruiken. De kritieke wijziging is het pad in de pushd opdracht om de env.PACKAGE_PATH variabele op te nemen.

    - 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

  5. Zoek het Zip-artefact voor de implementatiestap en vervang de inhoud door de volgende YAML om ook het pad naar de submap van het pakket te gebruiken.

    - name: Zip artifact for deployment
  run: |
    pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}'
    zip -r release.zip .
    popd
    cp ./${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}/release.zip ./release.zip

    Het zip-bestand wordt in de hoofdmap van de opslagplaats geplaatst, zodat de ../ waarde nodig is om het zip-bestand in de hoofdmap te plaatsen.

  6. Sla het bestand op en voer de wijzigingen door in de opslagplaats.

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

    Door deze wijziging wordt de werkstroom uitgevoerd. U kunt de werkstroom bekijken vanuit de sectie Acties van de fork op GitHub.

De omgevingsvariabelen voor de API-functies configureren

  1. Zoek uw functie-app in Azure Portal en selecteer Instellingenconfiguratie> en selecteer vervolgens Nieuwe toepassingsinstelling.

  2. Voer de instellingen in voor de Cosmos DB- en SignalR-verbindingsreeks s. U vindt de waarden in de local.settings.json start/server map.

    Naam Weergegeven als
    COSMOSDB_CONNECTION_STRING De verbindingsreeks voor het Cosmos DB-account.
    SIGNALR_CONNECTION_STRING De verbindingsreeks voor het SignalR-account.

  3. Selecteer Opslaan om de instellingen op te slaan.

De implementatie van de API-functies testen

  1. Selecteer In De Azure-portal overzicht en selecteer de URL om de app in een browser te openen.
  2. Kopieer de URL. U hebt dat nodig wanneer u het clientbestand .env bijwerkt voor de BACKEND_URL waarde wanneer u in les 7 werkt.
  3. Open de URL in een browser om de API-functies te testen.
  4. Voeg /api/getStocks toe aan de URL in de browser en druk op Enter. U ziet nu een JSON-matrix met voorraadgegevens.

U hebt de servercode bijgewerkt om aandelen te retourneren met SignalR en u hebt geïmplementeerd in een functie-app. Vervolgens werkt u de client bij om SignalR te gebruiken om updates te ontvangen.