Share via

Tutoriel : Créer une application de notification serverless avec Azure Functions et le service Azure Web PubSub

  • Article

Le service Azure Web PubSub vous aide à créer des applications web de messagerie en temps réel à l’aide de WebSockets. Azure Functions est une plateforme serverless qui vous permet d’exécuter votre code sans gérer d’infrastructures. Dans ce tutoriel, vous apprenez à utiliser le service Azure Web PubSub et Azure Functions pour construire une application serverless avec une messagerie en temps réel dans le cadre de scénarios de notification.

Dans ce tutoriel, vous allez apprendre à :

  • Créer une application de notification serverless
  • Utiliser des liaisons d’entrée et de sortie de fonction Web PubSub
  • Exécuter les exemples de fonctions localement
  • Déployer la fonction sur l’application de fonction Azure

Prérequis

Si vous n’avez pas d’abonnement Azure, créez un compte gratuit Azure avant de commencer.

Connexion à Azure

Connectez-vous au portail Azure sur https://portal.azure.com/ avec votre compte Azure.

Créer une instance de service Azure Web PubSub

Votre application se connectera à l’instance de service Web PubSub dans Azure.

  1. Cliquez sur le bouton Nouveau dans le coin supérieur gauche du portail Azure. À l’écran Nouveau, saisissez Web PubSub dans la zone de recherche et appuyez sur Entrée. (Vous pouvez également effectuer une recherche dans Azure Web PubSub à partir de la catégorie Web.)

    Screenshot of searching the Azure Web PubSub in portal.

  2. Sélectionnez Web PubSub dans les résultats de la recherche, puis Créer.

  3. Entrez les paramètres suivants.

    Paramètre Valeur suggérée Description
    Nom de la ressource Nom globalement unique Nom unique au monde qui identifie votre nouvelle instance de service Web PubSub. Les caractères valides sont a-z, A-Z, 0-9 et -.
    Abonnement Votre abonnement Abonnement Azure sous lequel cette instance de service Web PubSub est créée.
    Groupe de ressources myResourceGroup Le nom du nouveau groupe de ressources dans lequel créer l’instance de service Web PubSub.
    Lieu USA Ouest Sélectionnez une région proche de chez vous.
    Niveau tarifaire Gratuit Vous pouvez d’abord essayer le service Azure Web PubSub gratuitement. En savoir plus sur les niveaux tarifaires du service Azure Web PubSub
    Nombre d’unité - Le nombre d’unité spécifie le nombre de connexions que votre instance de service Web PubSub peut accepter. Chaque unité prend en charge 1 000 connexions simultanées au maximum. Ceci n’est configurable que dans le niveau Standard.

    Screenshot of creating the Azure Web PubSub instance in portal.

  4. Sélectionnez Créer pour commencer le déploiement de l’instance de service Web PubSub.

Créer et exécuter les fonctions localement

  1. Vérifiez qu’Azure Functions Core Tools est installé. À présent, créez un répertoire vide pour le projet. Exécutez la commande sous ce répertoire de travail. Utilisez l’une des options ci-dessous.

    func init --worker-runtime javascript --model V4

  2. Suivez les étapes d’installation Microsoft.Azure.WebJobs.Extensions.WebPubSub.

    Confirmez ou mettez à jour host.jsonl’extensionBundle vers la version 4.* ou ultérieure pour obtenir la prise en charge de Web PubSub. Pour mettre à jour le host.jsonfichier, ouvrez le fichier dans l’éditeur, puis remplacez l’extension de version existanteBundle par la version 4.* ou ultérieure.

    {
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[4.*, 5.0.0)"
    }
}

  3. Créez une fonction index pour lire et héberger une page web statique pour les clients.

    func new -n index -t HttpTrigger
    • Mettez à jour src/functions/index.js et copiez les codes suivants. 
      const { app } = require('@azure/functions');
const { readFile } = require('fs/promises');

app.http('index', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    handler: async (context) => {
        const content = await readFile('index.html', 'utf8', (err, data) => {
            if (err) {
                context.err(err)
                return
            }
        });

        return { 
            status: 200,
            headers: { 
                'Content-Type': 'text/html'
            }, 
            body: content, 
        };
    }
});

  4. Créez une fonction negotiate pour aider les clients à obtenir l’URL de connexion au service avec le jeton d’accès.

    func new -n negotiate -t HttpTrigger
    • Mettez à jour src/functions/negotiate.js et copiez les codes suivants. 
      const { app, input } = require('@azure/functions');

const connection = input.generic({
    type: 'webPubSubConnection',
    name: 'connection',
    hub: 'notification'
});

app.http('negotiate', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    extraInputs: [connection],
    handler: async (request, context) => {
        return { body: JSON.stringify(context.extraInputs.get('connection')) };
    },
});

  5. Créez une fonction notification avec laquelle générer des notifications TimerTrigger.

    func new -n notification -t TimerTrigger
    • Mettez à jour src/functions/notification.js et copiez les codes suivants. 
      const { app, output } = require('@azure/functions');

const wpsAction = output.generic({
    type: 'webPubSub',
    name: 'action',
    hub: 'notification'
});

app.timer('notification', {
    schedule: "*/10 * * * * *",
    extraOutputs: [wpsAction],
    handler: (myTimer, context) => {
        context.extraOutputs.set(wpsAction, {
            actionName: 'sendToAll',
            data: `[DateTime: ${new Date()}] Temperature: ${getValue(22, 1)}\xB0C, Humidity: ${getValue(40, 2)}%`,
            dataType: 'text',
        });
    },
});

function getValue(baseNum, floatNum) {
    return (baseNum + 2 * floatNum * (Math.random() - 0.5)).toFixed(3);
}

  6. Ajoutez la page unique du client index.html dans le dossier racine du projet et copiez le contenu.

    <html>
    <body>
    <h1>Azure Web PubSub Notification</h1>
    <div id="messages"></div>
    <script>
        (async function () {
            let messages = document.querySelector('#messages');
            let res = await fetch(`${window.location.origin}/api/negotiate`);
            let url = await res.json();
            let ws = new WebSocket(url.url);
            ws.onopen = () => console.log('connected');

            ws.onmessage = event => {
                let m = document.createElement('p');
                m.innerText = event.data;
                messages.appendChild(m);
            };
        })();
    </script>
    </body>
</html>

  7. Configurer et exécuter l’application de fonction Azure

    • Dans le navigateur, ouvrez le portail Azure et vérifiez que l’instance de service Web PubSub que vous avez déployée a été créée. Accédez à l’instance.
    • Sélectionnez Clés et copiez la chaîne de connexion.

    Screenshot of copying the Web PubSub connection string.

    Exécutez la commande dans le dossier de la fonction pour définir la chaîne de connexion du service. Remplacez <connection-string> par votre valeur le cas échéant.

    func settings add WebPubSubConnectionString "<connection-string>"

    Notes

    Le TimerTrigger utilisé dans l’exemple a une dépendance sur Stockage Azure, mais vous pouvez utiliser l’émulateur de stockage local lorsque la fonction est exécutée localement. Si vous rencontrez des erreurs telles que There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid., vous devez télécharger et activer l’There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid..

    Vous pouvez maintenant exécuter votre fonction locale par commande.

    func start --port 7071

    Et en vérifiant les journaux d’exécution, vous pouvez visiter la page statique de votre hôte local en visitant http://localhost:7071/api/index.

    Notes

    Certains navigateurs redirigent automatiquement vers https, ce qui conduit à une URL incorrecte. Suggérez d’utiliser Edge et de vérifier l’URL si le rendu ne réussit pas.

Déployer l’application de fonction dans Azure

Avant de déployer le code de votre fonction dans Azure, vous devez créer trois ressources :

  • Un groupe de ressources, qui est un conteneur logique pour les ressources associées.
  • Un compte de stockage, qui sert à conserver l’état et d’autres informations sur vos fonctions.
  • Une application de fonction, qui fournit l’environnement d’exécution de votre code de fonction. Une application de fonction est mappée à votre projet de fonction local. Elle vous permet de regrouper les fonctions en tant qu’unité logique pour faciliter la gestion, le déploiement et le partage des ressources.

Utilisez les commandes suivantes pour créer ces éléments.

  1. Connectez-vous à Azure :

    az login

  2. Créez un groupe de ressources, ou vous pouvez ignorer cette étape en réutilisant l’un des services Azure Web PubSub :

    az group create -n WebPubSubFunction -l <REGION>

  3. Créez un compte de stockage universel dans votre groupe de ressources et votre région :

    az storage account create -n <STORAGE_NAME> -l <REGION> -g WebPubSubFunction

  4. Créer l’application de fonction dans Azure :

    az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime node --runtime-version 18 --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

    Notes

    Consultez la documentation des versions d'exécution d'Azure Functions pour définir le paramètre --runtime-version à une valeur prise en charge.

  5. Déployez le projet de fonction sur Azure :

    Une fois que vous avez créé votre application de fonction dans Azure, vous êtes maintenant prêt à déployer votre projet de fonctions locales à l’aide de la commande func azure functionapp publish .

    func azure functionapp publish <FUNCIONAPP_NAME> --publish-local-settings

    Remarque

    Ici, nous déployons les paramètres locaux local.settings.json avec le paramètre de commande --publish-local-settings. Si vous utilisez l’Émulateur de stockage Microsoft Azure, vous pouvez taper no pour ne pas remplacer cette valeur sur Azure après le message d’invite : App setting AzureWebJobsStorage is different between azure and local.settings.json, Would you like to overwrite value in azure? [yes/no/show]. En outre, vous pouvez mettre à jour les paramètres de l’application de fonction dans Portail Azure ->Paramètres ->Configuration.

  6. Maintenant, vous pouvez vérifier votre site depuis votre application Azure Function en accédant à l’URL https://<FUNCIONAPP_NAME>.azurewebsites.net/api/index.

Nettoyer les ressources

Si vous ne pensez pas continuer à utiliser cette application, supprimez toutes les ressources créées dans le cadre de cette documentation en procédant de la façon suivante afin d’éviter des frais :

  1. Dans le portail Azure, sélectionnez Groupes de ressources tout à gauche, puis sélectionnez le groupe de ressources que vous avez créé. Utilisez la zone de recherche pour rechercher le groupe de ressources par son nom à la place.

  2. Dans la fenêtre qui s’ouvre, sélectionnez le groupe de ressources, puis sélectionnez Supprimer le groupe de ressources.

  3. Dans la nouvelle fenêtre, tapez le nom du groupe de ressources à supprimer, puis sélectionnez Supprimer.

Étapes suivantes

Dans ce démarrage rapide, vous avez appris à exécuter une application de conversation serverless. À présent, vous pouvez commencer à créer votre propre application.

Tutoriel : Créer un salon de conversation simple avec Azure Web PubSub

Liaisons Azure Web PubSub pour Azure Functions

Explorer d’autres exemples Azure Web PubSub