Övning – Aktivera automatiska uppdateringar i en webbapp med SignalR Service

12 minuter

Om du vill lägga till SignalR i den här prototypen måste du skapa:

En Azure SignalR-resurs
Några nya funktioner för att stödja SignalR
Uppdatera klienten för att stödja SignalR

Skapa en SignalR-resurs

Du måste skapa en Azure SignalR-resurs.

Gå tillbaka till terminalen för att skapa SignalR-resursen.

Gå till underkatalogen setup-resources för att skapa resursen.

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

Kopiera anslutningssträng för SignalR-resursen. Du behöver detta för att uppdatera serverkoden.

Resurstyp Miljövariabel

Azure SignalR Kallas SIGNALR_CONNECTION_STRING

Resurstyp	Miljövariabel
Azure SignalR	Kallas SIGNALR_CONNECTION_STRING

Uppdatera miljövariabler för serverkonfiguration

I ./start/server/local.settings.json lägger du till en variabel i objektet Värden med namnet SIGNALR_CONNECTION_STRING med värdet som anges i terminalen och sparar filen.

`signalr-open-connection` Skapa funktionen

Webbklienten använder SignalR-klientens SDK för att upprätta en anslutning till servern. SDK:et hämtar anslutningen via en funktion med namnet signalr-open-connection för att ansluta till tjänsten.

Öppna Visual Studio Code-kommandopaletten genom att trycka på F1.
Leta upp och välj kommandot Azure Functions: Create Function (Azure Functions: Skapa funktion).
Välj Ange standard och välj sedan start/server för att ange platsen för funktionsappen.
Välj Ja när du uppmanas att initiera projektet för användning med VS Code?.
När du uppmanas att göra det anger du följande information.

Name Värde

Template HTTP-utlösare

Name signalr-open-connection

En fil med namnet signalr-open-connection.ts är nu tillgänglig på ./start/server/src/functions.

Name	Värde
Template	HTTP-utlösare
Name	signalr-open-connection

Öppna signalr-open-connection.ts och ersätt allt med följande kod.

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

SignalR-anslutningsinformationen returneras från funktionen.

`signalr-send-message` Skapa funktionen

Öppna Visual Studio Code-kommandopaletten genom att trycka på F1.
Leta upp och välj kommandot Azure Functions: Create Function (Azure Functions: Skapa funktion).
Välj platsen för funktionsappen som start/server.

När du uppmanas att göra det anger du följande information.

Name	Värde
Template	Azure Cosmos DB-utlösare
Name	`signalr-send-message`
Cosmos DB-anslutningssträng	COSMOSDB_CONNECTION_STRING
Databasnamn som ska övervakas	`stocksdb`
Samlingsnamn	`stocks`
Söker efter existens och skapar automatiskt lånesamlingen	true

Uppdatera Explorer-fönstret i Visual Studio Code om du vill se uppdateringarna. En fil med namnet signalr-open-connection är nu tillgänglig på ./start/server/src/functions.

Öppna signalr-send-message.ts och ersätt allt med följande kod.

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

Definiera inkommande data: Objektet comingFromCosmosDB definierar Cosmos DB-utlösaren för att hålla utkik efter ändringar.
Definiera utgående transport: Objektet goingOutToSignalR definierar samma SignalR-anslutning. HubName är samma hubb default.
Anslut data till transport: Hämtar dataToMessage de ändrade objekten stocks i tabellen och skickar varje ändrat objekt individuellt via SignalR med hjälp av extraOutputs samma hubb default.
Anslut till appen: Bindningarna app.CosmosDB kopplas till funktionsnamnet send-signalr-messages.

Checka in ändringar och skicka till GitHub

I terminalen checkar du in ändringarna till lagringsplatsen.
```
git add .
git commit -m "Add SignalR functions"
git push
```

`signalr-send-message` Skapa funktionen

Skapa en funktionsapp och relaterade resurser i Azure som du kan publicera den nya funktionskoden till.

Öppna Azure Portal för att skapa en ny funktionsapp.

Använd följande information för att slutföra fliken Grundläggande för resursskapande.

Name	Värde
Resursgrupp	Skapa ett nytt resursgruppsnamn `stock-prototype`.
Funktionsappens namn	Postpend ditt namn till `api`. Exempel: `api-jamie`
Kod eller container	Välj kod.
CLR-stack	Välj Node.js.
Version	Välj en LTS-version av Node.js.
Region	Välj en region nära dig.
Operativsystem	Välj Linux.
Värd	Välj Förbrukningsplan.

Fyll inte i några andra flikar och välj Granska + skapa och välj sedan Skapa. Vänta tills distributionen är klar innan du fortsätter.
Välj Gå till resurs för att öppna den nya funktionsappen.

Konfigurera GitHub-distributionen

Anslut din nya funktionsapp till GitHub-lagringsplatsen för att aktivera kontinuerlig distribution. I en produktionsmiljö distribuerar du i stället kodändringar till en mellanlagringsplats innan du byter dem till produktion.

På sidan Azure Portal för den nya funktionsappen väljer du Distributionscenter på den vänstra menyn.
Välj Källa för GitHub.

Använd följande information för att slutföra distributionskonfigurationen.

Name	Värde
Organisation	Välj ditt GitHub-konto.
Lagringsplats	Sök efter och välj `mslearn-advocates.azure-functions-and-signalr`.
Filial	Välj huvudgrenen.
Arbetsflödesalternativ	Välj Lägg till ett arbetsflöde ....
Authentication type	Välj Användartilldelad identitet.
Prenumeration	Välj samma prenumeration som visas överst på sidan.
Identitet	Välj Skapa ny.

Spara inställningarna genom att välja Spara överst i avsnittet. Då skapas en ny arbetsflödesfil på din förgrenade lagringsplats.
Den här distributionskonfigurationen skapar en GitHub Actions-arbetsflödesfil på lagringsplatsen. Du måste uppdatera arbetsflödesfilen för att använda rätt paketsökväg för funktionsappen.

Nu kan din GitHub-distribution generera ett fel på grund av en felaktig konfiguration i den användartilldelade hanterade identiteten som skapats i resursgruppen i Azure.

Uppdatera den hanterade identiteten

På den nya funktionsappsidan i Azure Portal väljer du resursgruppen i Översikt>Essentials och väljer sedan den hanterade identiteten under Resurser. Den här hanterade identiteten skapades av Functions när du aktiverade GitHub-distributionen.
På sidan Hanterad identitet väljer du Inställningar>Federerade autentiseringsuppgifter och sedan de befintliga autentiseringsuppgifterna.
I Anslut ditt Github-konto ändrar du inställningen för Entitet till miljö och anger Production för Miljö.
Välj Uppdatera för att uppdatera autentiseringsuppgifterna.

Redigera GitHub-distributionsarbetsflöde

I Visual Studio Code-terminalen hämtar du den nya arbetsflödesfilen från din förgrening (ursprung).
```
git pull origin main
```
Detta bör placera en ny mapp på .github med en sökväg till arbetsflödesfilen: .github/workflows/main_RESOURCE_NAME.yml där RESOURCE_NAME är funktionsappens namn.
Öppna arbetsflödesfilen och ändra name värdet överst i filen till Server.
Eftersom källlagringsplatsen har funktionsappen i en underkatalog måste åtgärdsfilen ändras för att återspegla det. I avsnittet env lägger du till en ny variabel med namnet PACKAGE_PATH för att använda paketsökvägen.
```
env:
  PACKAGE_PATH: 'start/server'
```
Leta upp steget Lös projektberoenden med Npm och ersätt innehållet med följande YAML för att även använda underkatalogsökvägen för paketet. Den kritiska ändringen är sökvägen i pushd kommandot för att inkludera variabeln 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
```
Leta upp Zip-artefakten för distributionssteget och ersätt innehållet med följande YAML för att även använda underkatalogsökvägen för paketet.
```
- 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
```
Zip-filen placeras i roten på lagringsplatsen, så ../ värdet är nödvändigt för att placera zip-filen i roten.
Spara filen och checka in ändringarna på lagringsplatsen.
```
git add .
git commit -m "Update deployment workflow to use package path"
git push
```
Den här ändringen utlöser arbetsflödet att köras. Du kan titta på arbetsflödet från avsnittet Åtgärder i förgreningen på GitHub.

Konfigurera miljövariablerna för API-funktionerna

Leta upp funktionsappen i Azure Portal och välj Konfiguration av inställningar>och välj sedan Ny programinställning.
Ange inställningarna för Cosmos DB- och SignalR-anslutningssträng. Du hittar värdena i local.settings.json start/server mappen .

Name Värde

COSMOSDB_CONNECTION_STRING Anslutningssträng för Cosmos DB-kontot.

SIGNALR_CONNECTION_STRING Anslutningssträng för SignalR-kontot.
Spara inställningarna genom att klicka på Spara.

Name	Värde
COSMOSDB_CONNECTION_STRING	Anslutningssträng för Cosmos DB-kontot.
SIGNALR_CONNECTION_STRING	Anslutningssträng för SignalR-kontot.

Testa distributionen av API Functions

I Azure Portal väljer du Översikt och väljer URL för att öppna appen i en webbläsare.
Kopiera URL:en, det behöver du när du uppdaterar klientfilen .env för BACKEND_URL värdet när du arbetar i enhet 7.
Öppna URL:en i en webbläsare för att testa API-funktionerna.
/api/getStocks Lägg till url:en i webbläsaren och tryck på Retur. Du bör se en JSON-matris med lagerdata.

Du har uppdaterat serverkoden för att returnera aktier med SignalR och du har distribuerat till en funktionsapp. Därefter uppdaterar du klienten så att den använder SignalR för att ta emot uppdateringar.

Övning – Aktivera automatiska uppdateringar i en webbapp med SignalR Service

Skapa en SignalR-resurs

Uppdatera miljövariabler för serverkonfiguration

signalr-open-connection Skapa funktionen

signalr-send-message Skapa funktionen

Checka in ändringar och skicka till GitHub

signalr-send-message Skapa funktionen

Konfigurera GitHub-distributionen

Uppdatera den hanterade identiteten

Redigera GitHub-distributionsarbetsflöde

Konfigurera miljövariablerna för API-funktionerna

Testa distributionen av API Functions

Feedback

`signalr-open-connection` Skapa funktionen

`signalr-send-message` Skapa funktionen

`signalr-send-message` Skapa funktionen