Exercice : Activer les mises à jour automatiques dans une application web à l’aide de SignalR Service

12 minutes

Pour ajouter SignalR à ce prototype, vous devez :

Créer une ressource Azure SignalR
Créer quelques nouvelles fonctions pour prendre en charge SignalR
Mettre à jour le client pour qu’il prenne en charge SignalR

Créer une ressource SignalR

Vous devez créer une ressource Azure SignalR.

Revenez au terminal pour créer la ressource SignalR.

Accédez au sous-répertoire setup-resources pour créer la ressource.

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

Copiez la chaîne de connexion de la ressource SignalR. Vous en aurez besoin pour mettre à jour le code du serveur.

Type de ressource Variable d’environnement

Azure SignalR Appelée SIGNALR_CONNECTION_STRING

Type de ressource	Variable d’environnement
Azure SignalR	Appelée SIGNALR_CONNECTION_STRING

Mettre à jour les variables d’environnement de configuration du serveur

Dans ./start/server/local.settings.json, ajoutez une variable à l’objet Values nommé SIGNALR_CONNECTION_STRING avec la valeur listée dans le terminal et enregistrez le fichier.

Créer la fonction `signalr-open-connection`

Le client web utilise le kit SDK client SignalR pour établir une connexion au serveur. Le kit de développement logiciel (SDK) récupère la connexion via une fonction nommée signalr-open-connection pour se connecter au service.

Ouvrez la palette de commandes Visual Studio Code en appuyant sur F1.
Recherchez et sélectionnez la commande Azure Functions : Create Function.
Choisissez Définir la valeur par défaut, puis sélectionnez start/server pour définir l’emplacement de l’application de fonction.
Sélectionnez Oui quand vous êtes invité à Initialiser le projet pour utilisation avec VS Code ?.
À l’invite, fournissez les informations suivantes.

Nom Valeur

Modèle Déclencheur HTTP

Nom signalr-open-connection

Un fichier nommé signalr-open-connection.ts est désormais disponible à l’adresse ./start/server/src/functions.

Nom	Valeur
Modèle	Déclencheur HTTP
Nom	signalr-open-connection

Ouvrez signalr-open-connection.ts et remplacez tout par le code suivant.

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

Les informations de connexion SignalR sont retournées depuis la fonction.

Créer la fonction `signalr-send-message`

Ouvrez la palette de commandes Visual Studio Code en appuyant sur F1.
Recherchez et sélectionnez la commande Azure Functions : Create Function.
Sélectionnez l’emplacement de l’application de fonction comme start/server.

À l’invite, fournissez les informations suivantes.

Nom	Valeur
Modèle	Déclencheur Azure Cosmos DB
Nom	`signalr-send-message`
Chaîne de connexion Cosmos DB	COSMOSDB_CONNECTION_STRING
Nom de la base de données à analyser	`stocksdb`
Nom de la collection	`stocks`
Vérifie l'existence et crée automatiquement la collection des baux	true

Actualisez la fenêtre Explorateur dans Visual Studio Code pour voir les mises à jour. Un fichier nommé signalr-open-connection est désormais disponible à l’adresse ./start/server/src/functions.

Ouvrez signalr-send-message.ts et remplacez tout par le code suivant.

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

Définissez les données entrantes : L’objet comingFromCosmosDB définit le déclencheur Cosmos DB pour surveiller les modifications.
Définissez le transport sortant : L’objet goingOutToSignalR définit la même connexion SignalR. Le hubName est le même hub default.
Connectez les données au transport : dataToMessage obtient les éléments modifiés dans le tableau stocks et envoie chaque élément modifié individuellement via SignalR en utilisant extraOutputs via le même hub default.
Connectez-vous à l’application : app.CosmosDB associe les liaisons au nom de la fonction send-signalr-messages.

Valider les modifications et envoyer (push) vers GitHub

Dans le terminal, validez les modifications apportées au référentiel.
```
git add .
git commit -m "Add SignalR functions"
git push
```

Créer la fonction `signalr-send-message`

Créez une application de fonction et les ressources associées dans Azure vers lesquelles vous pouvez publier le nouveau code de fonctions.

Ouvrez le Portail Azure pour créer une application de fonctions.

Utilisez les informations suivantes pour remplir l’onglet de création de ressources Informations de base.

Nom	Valeur
Groupe de ressources	Créer un groupe de ressources nommé `stock-prototype`.
Nom de l’application de fonction	Ajouter votre nom à `api`. Par exemple : `api-jamie`.
Code ou conteneur	Sélectionner code.
Pile d’exécution	Sélectionnez Node.js.
Version	Sélectionner une version LTS de Node.js.
Région	Sélectionnez une région proche de chez vous.
Système d'exploitation	Sélectionnez Linux.
Hébergement	Sélectionner Plan de consommation.

Ne renseignez aucun autre onglet et sélectionnez Vérifier + créer , puis sélectionnez Créer. Attendez que le déploiement se termine avant de continuer.
Sélectionnez Accéder à la ressource pour ouvrir la nouvelle application de fonction.

Configurer le déploiement GitHub

Connectez votre nouvelle application de fonction au référentiel GitHub pour activer le déploiement continu. Dans un environnement de production, vous déploieriez plutôt les modifications de code sur un emplacement de préproduction avant de les passer en production.

Dans la page du Portail Azure de la nouvelle application de fonction, sélectionnez Centre de déploiement dans le menu de gauche.
Sélectionnez la Source de GitHub.

Utilisez les informations suivantes pour terminer la configuration du déploiement.

Nom	Valeur
Organization	Sélectionner votre compte GitHub.
Référentiel	Recherchez et sélectionnez `mslearn-advocates.azure-functions-and-signalr`.
Branche	Sélectionnez la branche main.
Option de flux de travail	Sélectionner Ajouter un flux de travail....
Type d'authentification	Sélectionner Identité affectée par l'utilisateur.
Abonnement	Sélectionner le même abonnement que celui affiché en haut de la page.
Identité	Sélectionnez Créer nouveau.

Sélectionnez Enregistrer en haut de la section pour enregistrer les paramètres. Cela crée un nouveau fichier de flux de travail dans votre référentiel dupliqué (forked).
Cette configuration de déploiement crée un fichier de flux de travail GitHub Actions dans le référentiel. Vous devez mettre à jour le fichier de flux de travail pour qu’il utilise le chemin d’accès au package approprié pour l’application de fonction.

Modifier le flux de travail de déploiement GitHub

Dans le terminal Visual Studio Code, extrayez le nouveau fichier de flux de travail depuis votre duplication (fork).
```
git pull origin main
```
Cela doit placer un nouveau dossier sur .github avec un chemin d’accès à votre fichier de flux de travail : « .github/workflows/main_RESOURCE_NAME.yml, où RESOURCE_NAME est le nom de l’application Azure Functions.
Ouvrez le fichier de flux de travail.
Remplacez la valeur name en haut du fichier par Server.
Le référentiel source disposant de l’application Azure Functions dans un sous-répertoire, le fichier d’action doit être modifié pour le refléter. Dans la section env, ajoutez une nouvelle variable nommée PACKAGE_PATH pour utiliser le chemin d’accès au package.
```
env:
  PACKAGE_PATH: 'start/server'
```
Accédez à l’étape Résoudre les dépendances de projet en utilisant npm et remplacez le contenu par le code YAML suivant pour utiliser également le chemin d’accès au sous-répertoire du package. La modification critique est le chemin d’accès dans la commande pushd pour inclure la variable 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
```
Accédez à l’étape Artefact zip pour l’étape de déploiement et remplacez le contenu par le fichier YAML suivant pour utiliser également le chemin d’accès au sous-répertoire du package.
```
- name: Upload artifact for deployment job
  uses: actions/upload-artifact@v3
  with:
    name: node-app
    path: release.zip
```
Le fichier zip est placé à la racine du référentiel, la valeur ../ est donc nécessaire pour placer le fichier zip à la racine.
Enregistrez le fichier et validez les modifications apportées au référentiel.
```
git add .
git commit -m "Update deployment workflow to use package path"
git push
```
Cette modification déclenchera l’exécution du flux de travail. Vous pouvez consulter le flux de travail depuis la section Actions de la duplication (fork) sur GitHub.

Configurer les variables d’environnement pour les fonctions d’API

Dans le Portail Azure, sélectionnez Paramètres -> Configuration, puis Nouveau paramètre d’application.
Entrez les paramètres des chaînes de connexion Cosmos DB et SignalR. Vous trouverez les valeurs dans local.settings.json, dans le dossier start/server.

Nom Valeur

COSMOSDB_CONNECTION_STRING La chaîne de connexion pour le compte Cosmos DB.

SIGNALR_CONNECTION_STRING La chaîne de connexion pour le compte SignalR.
Sélectionnez Enregistrer pour enregistrer les paramètres.

Nom	Valeur
COSMOSDB_CONNECTION_STRING	La chaîne de connexion pour le compte Cosmos DB.
SIGNALR_CONNECTION_STRING	La chaîne de connexion pour le compte SignalR.

Tester le déploiement des fonctions d’API

Dans le Portail Azure, sélectionnez Vue d’ensemble et sélectionnez URL pour ouvrir l’application dans un navigateur.
Copiez l’URL, vous en aurez besoin lorsque vous mettrez à jour le fichier client .env pour la valeur BACKEND_URL lorsque vous travaillez dans l’Unité 7.
Ouvrez l’URL dans un navigateur pour tester les fonctions d’API.
Ajoutez /api/getStocks à l’URL dans le navigateur, puis appuyez sur Entrée. Vous devez voir un tableau JSON avec des données de stock.

Vous avez mis à jour le code du serveur pour qu’il retourne les stocks avec SignalR et vous avez déployé sur une application de fonction. Par la suite, vous allez mettre à jour le client pour qu’il utilise SignalR pour recevoir des mises à jour.

Continuer

Créer une ressource SignalR

Mettre à jour les variables d’environnement de configuration du serveur

Créer la fonction signalr-open-connection

Créer la fonction signalr-send-message

Valider les modifications et envoyer (push) vers GitHub

Créer la fonction signalr-send-message

Configurer le déploiement GitHub

Modifier le flux de travail de déploiement GitHub

Configurer les variables d’environnement pour les fonctions d’API

Tester le déploiement des fonctions d’API

Commentaires

Créer la fonction `signalr-open-connection`

Créer la fonction `signalr-send-message`

Créer la fonction `signalr-send-message`