Cvičení – umožnění automatických aktualizací webové aplikace pomocí služby SignalR

12 min

Pokud chcete do tohoto prototypu přidat SignalR, musíte vytvořit:

Prostředek Azure SignalR
Několik nových funkcí pro podporu služby SignalR
Aktualizace klienta tak, aby podporoval SignalR

Vytvoření prostředku SignalR

Potřebujete vytvořit prostředek Azure SignalR.

Vraťte se do terminálu a vytvořte prostředek SignalR.
Přejděte do setup-resources podadresáře a vytvořte prostředek.
```
cd setup-resources && bash create-signalr-resources.sh & cd ..
```
Zkopírujte připojovací řetězec pro prostředek SignalR. Budete ho potřebovat k aktualizaci kódu serveru.

Typ prostředku Proměnná prostředí

Azure SignalR Označuje se jako SIGNALR_CONNECTION_STRING

Typ prostředku	Proměnná prostředí
Azure SignalR	Označuje se jako SIGNALR_CONNECTION_STRING

Aktualizace proměnných prostředí konfigurace serveru

V souboru ./start/server/local.settings.json přidejte proměnnou do objektu Values s SIGNALR_CONNECTION_STRING hodnotou uvedenou v terminálu a uložte soubor.

`signalr-open-connection` Vytvoření funkce

Webový klient používá k navázání připojení k serveru klientskou sadu SDK pro SignalR. Sada SDK načte připojení prostřednictvím funkce s názvem signalr-open-connection pro připojení ke službě.

Klávesou F1 otevřete paletu příkazů editoru Visual Studio Code.
Vyhledejte a vyberte příkaz Azure Functions: Create Function (Azure Functions: Vytvořit funkci).
Zvolte Nastavit výchozí a pak vyberte start/server a nastavte umístění aplikace funkcí.
Po zobrazení výzvy k inicializaci projektu pro použití s VS Code vyberte Ano.
Po zobrazení výzvy zadejte tyto informace.

Jméno Hodnota

Šablona Trigger HTTP

Jméno signalr-open-connection

Soubor s názvem signalr-open-connection.ts je nyní k dispozici na adrese ./start/server/src/functions.

Jméno	Hodnota
Šablona	Trigger HTTP
Jméno	signalr-open-connection

Otevřete signalr-open-connection.ts a nahraďte vše následujícím kódem.

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

Informace o připojení SignalR se vrátí z funkce.

`signalr-send-message` Vytvoření funkce

Klávesou F1 otevřete paletu příkazů editoru Visual Studio Code.
Vyhledejte a vyberte příkaz Azure Functions: Create Function (Azure Functions: Vytvořit funkci).
Vyberte umístění aplikace funkcí jako start/server.

Po zobrazení výzvy zadejte tyto informace.

Jméno	Hodnota
Šablona	Trigger služby Azure Cosmos DB
Jméno	`signalr-send-message`
Připojovací řetězec cosmos DB	COSMOSDB_CONNECTION_STRING
Název databáze, který se má monitorovat	`stocksdb`
Název kolekce	`stocks`
Kontroluje existenci a automaticky vytvoří kolekci zapůjčení.	true

Obnovte okno Průzkumníka v editoru Visual Studio Code, aby se aktualizace projevily. Soubor s názvem signalr-open-connection je nyní k dispozici na adrese ./start/server/src/functions.

Otevřete signalr-send-message.ts a nahraďte vše následujícím kódem.

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

Definujte příchozí data: Objekt comingFromCosmosDB definuje trigger cosmos DB, který sleduje změny.
Definovat odchozí přenos: Objekt goingOutToSignalR definuje stejné připojení SignalR. HubName je stejné centrum default.
Připojení dat k přenosu: Získá dataToMessagezměněné položky v stocks tabulce a odešle každou změněnou položku jednotlivě přes SignalR pomocí extraOutputs stejného rozbočovače default.
Připojit k aplikaci: app.CosmosDB Vazby se spojí s názvem send-signalr-messagesfunkce .

Potvrzení změn a nasdílení změn do GitHubu

V terminálu potvrďte změny do úložiště.

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

Vytvoření aplikace Azure Functions

Vytvořte aplikaci funkcí a související prostředky v Azure, do kterých můžete publikovat nový kód funkcí.

Otevřete azure Portal a vytvořte novou aplikaci funkcí.

Pomocí následujících informací dokončete kartu Základy vytváření prostředků.

Jméno	Hodnota
Hostování	Vyberte Plán Consumption.
Skupina prostředků	Vytvořte nové názvy `stock-prototype`skupin prostředků .
Název aplikace funkcí	Posaďte své jméno na `api`. Například `api-jamie`.
Kód nebo kontejner	Vyberte kód.
Zásobník modulu runtime	Vyberte Node.js.
Verze	Vyberte verzi Node.js LTS.
Oblast	Vyberte oblast blízko od vás.
Operační systém	Vyberte Linux.

Nevyplňujte žádné další karty a pak vyberte Zkontrolovat a vytvořit a pak vyberte Vytvořit. Než budete pokračovat, počkejte, dokud nasazování neskončí.
Výběrem možnosti Přejít k prostředku otevřete novou aplikaci funkcí.

Konfigurace nasazení GitHubu

Připojte novou aplikaci funkcí k úložišti GitHub a povolte průběžné nasazování. V produkčním prostředí byste místo toho nasadili změny kódu do přípravného slotu před jejich prohozením do produkčního prostředí.

Na stránce webu Azure Portal pro novou aplikaci funkcí v nabídce vlevo vyberte Deployment Center .
Vyberte Zdroj GitHubu.

K dokončení konfigurace nasazení použijte následující informace.

Jméno	Hodnota
Organizace	Vyberte svůj účet GitHubu.
Repository	Vyhledejte a vyberte `mslearn-advocates.azure-functions-and-signalr`.
Pobočka	Vyberte hlavní větev.
Authentication type	Vyberte identitu přiřazenou uživatelem.
Předplatné	Vyberte stejné předplatné jako v horní části stránky.
Identita	Vyberte, že chcete vytvořit novou IP adresu.

Nastavení uložíte výběrem možnosti Uložit v horní části oddílu. Tím se ve forku úložiště vytvoří nový soubor pracovního postupu.
Tato konfigurace nasazení vytvoří soubor pracovního postupu GitHub Actions v úložišti. Soubor pracovního postupu je potřeba aktualizovat tak, aby používal správnou cestu k balíčku pro aplikaci funkcí.

Úprava pracovního postupu nasazení GitHubu

V terminálu editoru Visual Studio Code stáhněte nový soubor pracovního postupu z forku (origin).
```
git pull origin main
```
Na .github by se měla umístit nová složka s cestou k souboru pracovního postupu: .github/workflows/main_RESOURCE_NAME.yml kde RESOURCE_NAME je název aplikace funkcí.
Otevřete soubor pracovního postupu a změňte name hodnotu v horní části souboru na Server.
Vzhledem k tomu, že zdrojové úložiště obsahuje aplikaci funkcí v podadresáři, musí se soubor akcí změnit tak, aby to odrážel. V části env přidejte novou proměnnou s názvem PACKAGE_PATH pro použití cesty balíčku.
```
env:
  PACKAGE_PATH: 'start/server'
```

Vyhledejte závislosti projektu pomocí kroku Npm a nahraďte obsah následujícím yaML, aby se také použila cesta k podadresáři balíčku. Kritická změna je cesta v pushd příkazu, která zahrnuje proměnnou 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

Vyhledejte artefakt ZIP pro krok nasazení a nahraďte obsah následujícím YAML, aby se také použila cesta k podadresáři balíčku.
```
- 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
```
Soubor ZIP se umístí do kořenového adresáře úložiště, takže ../ hodnota je nutná k umístění souboru ZIP do kořenového adresáře.
Uložte soubor a potvrďte změny do úložiště.
```
git add .
git commit -m "Update deployment workflow to use package path"
git push origin main
```
Tato změna aktivuje spuštění pracovního postupu. Pracovní postup můžete sledovat v části Akce forku na GitHubu.

Konfigurace proměnných prostředí pro funkce rozhraní API

V Azure Portálu vyhledejte svou funkční aplikaci a vyberte Nastavení>Proměnné prostředí a pak vyberte + Přidat.
Zadejte nastavení pro službu Cosmos DB a připojovací řetězec SignalR. Hodnoty najdete ve local.settings.jsonstart/server složce.

Jméno Hodnota

COSMOSDB_CONNECTION_STRING Připojovací řetězec pro účet Cosmos DB.

SIGNALR_CONNECTION_STRING Připojovací řetězec pro účet SignalR.
Vyberte Uložit a nastavení se uloží.

Jméno	Hodnota
COSMOSDB_CONNECTION_STRING	Připojovací řetězec pro účet Cosmos DB.
SIGNALR_CONNECTION_STRING	Připojovací řetězec pro účet SignalR.

Testování nasazení funkcí rozhraní API

Na portálu Azure vyberte Přehled a poté zvolte Výchozí doména pro otevření aplikace v prohlížeči a otestování funkcí API.
Připojte /api/getStocks se k adrese URL v prohlížeči a stiskněte Enter. Měli byste vidět pole JSON s uloženými daty.
Zkopírujte adresu URL, budete ji potřebovat při aktualizaci klientského .envBACKEND_URL souboru pro hodnotu při práci v lekci 7.

Aktualizovali jste kód serveru tak, aby vracel akcie pomocí SignalR a nasadili jste do aplikace funkcí. Dále aktualizujete klienta tak, aby k příjmu aktualizací používal SignalR.