Ö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.
Stöd för SignalR genom att skapa några nya funktioner.
Uppdatera klienten så att den stöder 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 och skapa resursen.

cd setup-resources && bash create-signalr-resources.sh & cd ..

Kopiera och spara anslutningssträngen för SignalR-resursen. Du behöver det här värdet för att uppdatera serverkoden.

Resurstyp Miljövariabel

Azure SignalR-tjänst Kallas SIGNALR_CONNECTION_STRING

Resurstyp	Miljövariabel
Azure SignalR-tjänst	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.

Namn Värde

Mall HTTP-utlösare

Namn signalr-öppen-anslutning

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

Namn	Värde
Mall	HTTP-utlösare
Namn	signalr-öppen-anslutning

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

Namn	Värde
Mall	Azure Cosmos DB-utlösare
Namn	`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	sann

Uppdatera utforskarfönstret i Visual Studio Code och visa 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 origin main

Skapa Azure Functions-appen

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.

Namn	Värde
Värd	Välj Förbrukningsplan.
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.
Utgåva	Välj en LTS-version av Node.js.
Region	Välj en region nära dig.
Operativsystem	Välj Linux.

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

Om du vill aktivera kontinuerlig distribution ansluter du din nya funktionsapp till GitHub-lagringsplatsen. 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.

Namn	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.
Autentiseringstyp	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. En ny arbetsflödesfil skapas 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.

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
```
Det här kommandot ska 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 origin main
```
Den här ändringen utlöser arbetsflödet som ska 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-portalen och välj Inställningar>Miljövariabler sedan välja + Lägg till.
Ange inställningarna för Cosmos DB- och SignalR-anslutningssträng. Du hittar värdena i local.settings.jsonstart/server mappen .

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

Namn	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-portalen väljer du Översikt och väljer Standarddomän för att öppna appen 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.
Kopiera URL:en. Du behöver den senare när du uppdaterar klientfilen .env för BACKEND_URL värdet när du arbetar i enhet 7.

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