Übung: Aktivieren automatischer Updates in einer Webanwendung mithilfe von SignalR Service

12 Minuten

Zum Hinzufügen von SignalR zu diesem Prototyp müssen Sie Folgendes erstellen:

Eine Azure SignalR-Ressource
Einige neue Funktionen zur Unterstützung von SignalR
Aktualisieren des Clients zur Unterstützung von SignalR

Erstellen einer SignalR-Ressource

Sie müssen eine Azure SignalR-Ressource erstellen.

Kehren Sie zum Terminal zurück, um die SignalR-Ressource zu erstellen.
Navigieren Sie zum setup-resources Unterverzeichnis, um die Ressource zu erstellen.
```
cd stock-prototype/setup-resources && bash create-signalr-resources.sh & cd ..
```
Kopieren Sie die Verbindungszeichenfolge für die SignalR-Ressource. Sie benötigen dies, um den Servercode zu aktualisieren.

Ressourcentyp Umgebungsvariable

Azure SignalR Als SIGNALR_CONNECTION_STRING bezeichnet

Ressourcentyp	Umgebungsvariable
Azure SignalR	Als SIGNALR_CONNECTION_STRING bezeichnet

Aktualisieren von Serverkonfigurationsumgebungsvariablen

Fügen Sie in ./start/server/local.settings.json eine Variable zum Wert-Objekt namens SIGNALR_CONNECTION_STRING hinzu, mit dem im Terminal aufgeführten Wert, und speichern Sie die Datei.

Erstellen der `signalr-open-connection` Funktion

Der Webclient nutzt das SignalR-Client SDK, um eine Verbindung mit dem Server herzustellen. Das SDK ruft die Verbindung mithilfe einer Funktion namens signalr-open-connection, um eine Verbindung mit dem Dienst herzustellen.

Öffnen Sie die Visual Studio Code-Befehlspalette, indem Sie F1 drücken.
Suchen Sie den Befehl Azure Functions: Funktion erstellen, und wählen Sie diesen aus.
Wählen Sie Standard festlegen und dann Start/Server aus, um den Speicherort der Funktions-App festzulegen.
Wählen Sie Ja aus, wenn Sie Folgendes gefragt werden: Das Projekt für die Verwendung mit VS Code initialisieren?.
Geben Sie bei entsprechender Aufforderung die folgenden Informationen ein:

Name Wert

Vorlage HTTP-Trigger

Name signalr-open-connection

Eine Datei mit dem Namen signalr-open-connection.ts ist jetzt unter ./start/server/src/functions verfügbar.

Name	Wert
Vorlage	HTTP-Trigger
Name	signalr-open-connection

Öffnen Sie signalr-open-connection.ts, und ersetzen Sie alles durch den folgenden 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]
});

Die SignalR-Verbindungsinformationen werden von der Funktion zurückgegeben.

Erstellen der `signalr-send-message`-Funktion

Öffnen Sie die Visual Studio Code-Befehlspalette, indem Sie F1 drücken.
Suchen Sie den Befehl Azure Functions: Funktion erstellen, und wählen Sie diesen aus.
Wählen Sie den Speicherort der Funktions-App als Start/Server aus.

Geben Sie bei entsprechender Aufforderung die folgenden Informationen ein:

Name	Wert
Vorlage	Azure Cosmos DB-Trigger
Name	`signalr-send-message`
Cosmos DB-Verbindungszeichenfolge	COSMOSDB_CONNECTION_STRING
Zu überwachender Datenbankname	`stocksdb`
Sammlungsname	`stocks`
Überprüft das Vorhandensein und erstellt automatisch die Leasesammlung	true

Aktualisieren Sie das Explorer-Fenster in Visual Studio Code, damit die Updates angezeigt werden. Eine Datei mit dem Namen signalr-open-connection ist jetzt unter ./start/server/src/functions verfügbar.

Öffnen Sie signalr-send-message.ts, und ersetzen Sie alles durch den folgenden 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);

Definieren von eingehenden Daten: Das comingFromCosmosDB Objekt definiert den Cosmos DB-Trigger, um auf Änderungen zu achten.
Ausgehenden Transport definieren: Das goingOutToSignalR Objekt definiert dieselbe SignalR-Verbindung. Der hubName ist derselbe Hub default.
Verbinden von Daten zum Transport: Die dataToMessage holt die geänderten Elemente aus der stocks Tabelle und sendet jedes geänderte Element mithilfe von extraOutputs desselben Hubs default einzeln über SignalR.
Herstellen einer Verbindung mit der App: Die app.CosmosDB verknüpft die Bindungen mit dem Funktionsnamen send-signalr-messages.

Übernehmen von Änderungen und Push an GitHub

Übernehmen Sie im Terminal die Änderungen an dem Repository.
```
git add .
git commit -m "Add SignalR functions"
git push
```

Erstellen der `signalr-send-message`-Funktion

Erstellen Sie eine Funktions-App und zugehörige Ressourcen in Azure, in denen Sie den neuen Funktionscode veröffentlichen können.

Öffnen Sie das Azure-Portal, um eine neue Funktions-App zu erstellen.

Verwenden Sie die folgenden Informationen, um die Registerkarte Grundlagen der Ressourcenerstellung abzuschließen.

Name	Wert
Resource group	Erstellen Sie eine neue Ressourcengruppe namens `stock-prototype`.
Name der Funktions-App	Hängen Sie Ihren Namen an `api` an. Beispiel: `api-jamie`.
Code oder Container	Wählen Sie Code.
Runtimestapel	Wählen Sie Node.js aus.
Version	Wählen Sie eine LTS-Version von Node.js aus.
Region	Wählen Sie eine Region in Ihrer Nähe aus.
Betriebssystem	Wählen Sie Linux aus.
Hosting	Wählen Sie Verbrauchsplan aus.

Füllen Sie keine anderen Registerkarten aus, und wählen Sie Überprüfen und Erstellen und dann Erstellen aus. Warten Sie auf den Abschluss der Bereitstellung, bevor Sie fortfahren.
Wählen Sie Zur Ressource wechseln aus, um die neue Funktions-App zu öffnen.

Konfigurieren der GitHub-Bereitstellung

Verbinden Sie Ihre neue Funktions-App mit dem GitHub-Repository, um eine kontinuierliche Bereitstellung zu ermöglichen. In einer Produktionsumgebung würden Sie stattdessen Codeänderungen an einem Stagingslot bereitstellen, bevor Sie sie in die Produktion eintauschen.

Wählen Sie auf der Seite "Azure-Portal" für die neue Funktions-App das Bereitstellungscenter im linken Menü aus.
Wählen Sie die Quelle von GitHub aus.

Verwenden Sie die folgenden Informationen, um die Bereitstellungskonfiguration abzuschließen.

Name	Wert
Organisation	Wählen Sie Ihr GitHub-Konto.
Repository	Suchen Sie nach `mslearn-advocates.azure-functions-and-signalr`, und wählen Sie diese Option aus.
Verzweigung	Wählen Sie den Mainbranch aus.
Workflowoption	Workflow hinzufügen... auswählen.
Authentication type	Benutzerseitig zugewiesene Identität auswählen.
Abonnement	Wählen Sie dasselbe Abonnement wie oben auf der Seite aus.
Identität	Wählen Sie Neu erstellen.

Wählen Sie oben im Abschnitt Speichern aus, um die Einstellungen zu speichern. Dadurch wird eine neue Workflowdatei in Ihrem Verzweigungs-Repository erstellt.
Diese Bereitstellungskonfiguration erstellt eine GitHub Actions-Workflowdatei im Repository. Sie müssen die Workflowdatei aktualisieren, um den richtigen Paketpfad für die Funktions-App zu verwenden.

GitHub-Bereitstellungsworkflow bearbeiten

Ziehen Sie im Visual Studio Code-Terminal die neue Workflowdatei von Ihrer Verzweigung (Ursprung) nach unten.
```
git pull origin main
```
Dadurch sollte ein neuer Ordner auf github mit einem Pfad zur Workflowdatei:.github/workflows/main_RESOURCE_NAME.yml platziert werden, wobei RESOURCE_NAME der Name der Azure Functions-App ist.
Öffnen Sie die Workflowdatei.
Ändern Sie den name Wert oben in der Datei in Server.
Da das Quellrespository über die Azure Functions-App in einem Unterverzeichnis verfügt, muss die Aktionsdatei geändert werden, um dies widerzuspiegeln. Fügen Sie im Abschnitt env eine neue Variable namens PACKAGE_PATH hinzu, um den Paketpfad zu verwenden.
```
env:
  PACKAGE_PATH: 'start/server'
```
Suchen Sie den Schritt Projektabhängigkeiten mithilfe von Npm auflösen, und ersetzen Sie den Inhalt durch den folgenden YAML, um auch den Paketunterverzeichnispfad zu verwenden. Die kritische Änderung ist der Pfad im pushd Befehl, um die env.PACKAGE_PATH Variable einzuschließen.
```
- 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
```
Suchen Sie den Schritt Zip-Artefakt für die Bereitstellung, und ersetzen Sie den Inhalt durch den folgenden YAML, um auch den Paketunterverzeichnispfad zu verwenden.
```
- name: Upload artifact for deployment job
  uses: actions/upload-artifact@v3
  with:
    name: node-app
    path: release.zip
```
Die ZIP-Datei wird im Stammverzeichnis des Repositorys platziert, sodass der ../ Wert erforderlich ist, um die ZIP-Datei im Stammverzeichnis zu platzieren.
Speichern Sie die Datei, und übernehmen Sie die Änderungen am Repository.
```
git add .
git commit -m "Update deployment workflow to use package path"
git push
```
Diese Änderung löst die Ausführung des Workflows aus. Sie können den Workflow im Abschnitt Aktionen der Verzweigung auf GitHub ansehen.

Konfigurieren der Umgebungsvariablen für die API-Funktionen

Wählen Sie im Azure-Portal Einstellungen –> Konfiguration und dann Neue Anwendungseinstellung aus.
Geben Sie die Einstellungen für die Verbindungszeichenfolgen Cosmos DB und SignalR ein. Sie finden die Werte im local.settings.json im start/server Ordner.

Name Wert

COSMOSDB_CONNECTION_STRING Die Verbindungszeichenfolge für das Azure Cosmos DB-Konto.

SIGNALR_CONNECTION_STRING Die Verbindungszeichenfolge für das SignalR-Konto.
Klicken Sie auf Speichern, um die Einstellungen zu speichern.

Name	Wert
COSMOSDB_CONNECTION_STRING	Die Verbindungszeichenfolge für das Azure Cosmos DB-Konto.
SIGNALR_CONNECTION_STRING	Die Verbindungszeichenfolge für das SignalR-Konto.

Testen der Bereitstellung der API-Funktionen

Wählen Sie im Azure-Portal Übersicht und dann die URL aus, um die App in einem Browser zu öffnen.
Kopieren Sie die URL, die Sie benötigen, wenn Sie die Clientdatei .env für den BACKEND_URL Wert aktualisieren, wenn Sie in Einheit 7 arbeiten.
Öffnen Sie die URL in einem Browser, um die API-Funktionen zu testen.
Fügen Sie /api/getStocks zur URL im Browser an, und drücken Sie die Eingabetaste. Es sollte ein JSON-Array mit Bestandsdaten angezeigt werden.

Sie haben den Servercode aktualisiert, um Bestände mit SignalR zurückzugeben, und Sie haben sie in einer Funktions-App bereitgestellt. Als Nächstes aktualisieren Sie den Client so, dass SignalR zum Empfangen von Updates verwendet wird.

Weiter

Erstellen einer SignalR-Ressource

Aktualisieren von Serverkonfigurationsumgebungsvariablen

Erstellen der signalr-open-connection Funktion

Erstellen der signalr-send-message-Funktion

Übernehmen von Änderungen und Push an GitHub

Erstellen der signalr-send-message-Funktion

Konfigurieren der GitHub-Bereitstellung

GitHub-Bereitstellungsworkflow bearbeiten

Konfigurieren der Umgebungsvariablen für die API-Funktionen

Testen der Bereitstellung der API-Funktionen

Feedback

Erstellen der `signalr-open-connection` Funktion

Erstellen der `signalr-send-message`-Funktion

Erstellen der `signalr-send-message`-Funktion