Démarrage rapide : créer une application serverless avec Azure Functions et SignalR Service à l’aide de JavaScript

  • Article

Dans ce guide de démarrage rapide, vous allez utiliser Azure SignalR Service, Azure Functions et JavaScript pour créer une application serverless afin de diffuser des messages aux clients.

Notes

Le code utilisé dans l’article est accessible sur le site GitHub.

Prérequis

Ce démarrage rapide peut être exécuté sur macOS, Windows ou Linux.

Configuration requise Description
Un abonnement Azure Si vous n’avez pas d’abonnement, créez un compte Azure gratuit
Éditeur de code Vous avez besoin d’un éditeur de code de type Visual Studio Code.
Azure Functions Core Tools Nécessite la version 2.7.1505 ou ultérieure pour exécuter des applications Python Azure Function localement.
Node.JS Consultez les versions node.js prises en charge dans le Guide du développeur JavaScript Azure Functions.
Azurite La liaison SignalR a besoin de Stockage Azure. Vous pouvez utiliser un émulateur de stockage local quand la fonction s’exécute localement.
Azure CLI Vous pouvez également utiliser Azure CLI pour créer une instance Azure SignalR Service.

Créer une instance de service SignalR Azure

Dans cette section, vous créez une instance Azure SignalR de base pour votre application. Les étapes suivantes utilisent le portail Azure pour créer une nouvelle instance, mais vous pouvez également utiliser Azure CLI. Pour plus d’informations sur la commande az signalr create, consultez la documentation de référence sur l’interface CLI Azure SignalR Service.

  1. Connectez-vous au portail Azure.
  2. En haut à gauche de la page, sélectionnez + Créer une ressource.
  3. Dans la page Créer une ressource, dans la zone de texte Rechercher dans les services et la Place de marché, entrez signalr, puis sélectionnez SignalR Service dans la liste.
  4. Dans la page SignalR Service, sélectionnez Créer.
  5. Sous l’onglet Informations de base, vous devez entrer les informations de base concernant votre nouvelle instance SignalR Service. Saisissez les valeurs suivantes :
Champ Valeur suggérée Description
Abonnement Choisir votre abonnement Sélectionnez l’abonnement que vous souhaitez utiliser pour créer une instance SignalR Service.
Groupe de ressources Créer un groupe de ressources nommé SignalRTestResources Sélectionnez ou créez un groupe de ressources pour votre ressource SignalR. Nous vous conseillons de créer un nouveau groupe de ressources pour ce tutoriel plutôt que d’utiliser un groupe existant. Pour libérer les ressources une fois le tutoriel terminé, supprimez le groupe de ressources.

La suppression du groupe de ressources supprimera également toutes les ressources qu’il contient. Cette action ne peut pas être annulée. Avant de supprimer un groupe de ressources, vérifiez qu’il ne contient pas des ressources que vous souhaitez conserver.

Pour plus d’informations, consultez Utilisation des groupes de ressources pour gérer vos ressources Azure.
Nom de la ressource testsignalr Entrez un nom de ressource unique à utiliser pour la ressource SignalR. Si le nom testsignalr n’est pas disponible dans votre région, ajoutez un chiffre ou un caractère au nom pour le rendre unique.

Le nom doit être une chaîne de 1 à 63 caractères, et il ne peut contenir que des chiffres, des lettres et le caractère - (trait d'union). Le nom ne peut ni commencer ni se terminer par un trait d’union, et il n’accepte pas de traits d’union consécutifs.
Région Choisir votre région Sélectionnez la région appropriée pour votre nouvelle instance SignalR Service.

Azure SignalR Service n’est pas disponible dans toutes les régions. Pour plus d’informations, consultez Disponibilité d’Azure SignalR Service par région.
Niveau tarifaire Sélectionnez Modifier, puis choisissez Gratuit (Dev/Test uniquement). Choisissez Sélectionner pour confirmer votre choix de niveau tarifaire. Azure SignalR Service propose trois niveaux tarifaires : Gratuit, Standard et Premium. Les tutoriels utilisent le niveau Gratuit, sauf indication contraire dans les prérequis.

Pour plus d’informations sur les différences de fonctionnalités entre les niveaux et les tarifs, consultez Tarifs Azure SignalR Service.
Mode de service Choisir le mode de service approprié Utilisez Par défaut lorsque vous hébergez la logique du hub SignalR dans vos applications web et utilisez le service SignalR en tant que proxy. Utilisez Serverless lorsque vous utilisez des technologies serverless telles qu’Azure Functions pour héberger la logique du hub SignalR.

Le mode classique est uniquement pour la compatibilité descendante et il n’est pas recommandé de l’utiliser.

Pour plus d’informations, consultez Mode de service dans Azure SignalR Service.

Vous n’avez pas besoin de modifier les paramètres des onglets Réseau et Étiquettes pour les tutoriels SignalR.

  1. Sélectionnez le bouton Vérifier + créer au bas de l’onglet Informations de base.
  2. Sous l’onglet Vérifier + créer, passez en revue les valeurs, puis sélectionnez Créer. Le déploiement prend quelques instants.
  3. Une fois le déploiement terminé, sélectionnez le bouton Accéder à la ressource.
  4. Dans la page de ressource SignalR, sélectionnez Clés dans le menu de gauche sous Paramètres.
  5. Copiez la chaîne de connexion pour la clé primaire. Vous avez besoin de cette chaîne de connexion pour configurer votre application plus loin dans ce tutoriel.

Configurer un projet de fonction

Vérifiez qu’Azure Functions Core Tools est installé.

  1. Ouvrez une ligne de commande.
  2. Créez le répertoire du projet et l’utiliser pour remplacer l’actuel.
  3. Exécutez la commande Azure Functions func init pour initialiser un nouveau projet.
# Initialize a function project
func init --worker-runtime javascript

Créer les fonctions de projet

Après avoir initialisé un projet, vous devez créer des fonctions. Ce projet nécessite trois fonctions :

  • index : héberge une page web pour un client.
  • negotiate : permet à un client d’obtenir un jeton d’accès.
  • broadcast : utilise un déclencheur de temps pour diffuser régulièrement des messages à tous les clients.

Lorsque vous exécutez la commande func new à partir du répertoire racine du projet, l’ensemble d’outils Azure Functions Core Tools crée des fichiers sources de fonction et les stocke dans un dossier nommé d’après la fonction. Vous modifiez les fichiers si nécessaire en remplaçant le code par défaut par le code de l’application.

Créer la fonction d’index

  1. Exécutez la commande suivante pour créer la fonction index.

    func new -n index -t HttpTrigger

  2. Modifiez index/function.json et remplacez le contenu par le code JSON suivant :

    {
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "get",
        "post"
      ]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

  3. Modifiez index/index.js et remplacez le contenu par le code suivant :

    var fs = require('fs').promises

module.exports = async function (context, req) {
    const path = context.executionContext.functionDirectory + '/../content/index.html'
    try {
        var data = await fs.readFile(path);
        context.res = {
            headers: {
                'Content-Type': 'text/html'
            },
            body: data
        }
        context.done()
    } catch (err) {
        context.log.error(err);
        context.done(err);
    }
}

Créer la fonction negotiate

  1. Exécutez la commande suivante pour créer la fonction negotiate.

    func new -n negotiate -t HttpTrigger

  2. Modifiez negotiate/function.json et remplacez le contenu par le code JSON suivant :

    {
  "disabled": false,
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "methods": [
        "post"
      ],
      "name": "req",
      "route": "negotiate"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    },
    {
      "type": "signalRConnectionInfo",
      "name": "connectionInfo",
      "hubName": "serverless",
      "connectionStringSetting": "AzureSignalRConnectionString",
      "direction": "in"
    }
  ]
}

  3. Modifiez negotiate/index.js et remplacez le contenu par le code JavaScript suivant :

    module.exports = async function (context, req, connectionInfo) {
    context.res.body = connectionInfo;
};

Créez une fonction de diffusion.

  1. Exécutez la commande suivante pour créer la fonction broadcast.

    func new -n broadcast -t TimerTrigger

  2. Modifiez broadcast/function.json et remplacez le contenu par le code suivant :

    {
  "bindings": [
    {
      "name": "myTimer",
      "type": "timerTrigger",
      "direction": "in",
      "schedule": "*/5 * * * * *"
    },
    {
      "type": "signalR",
      "name": "signalRMessages",
      "hubName": "serverless",
      "connectionStringSetting": "AzureSignalRConnectionString",
      "direction": "out"
    }
  ]
}

  3. Modifiez broadcast/index.js et remplacez le contenu par le code suivant :

    var https = require('https');

var etag = '';
var star = 0;

module.exports = function (context) {
    var req = https.request("https://api.github.com/repos/azure/azure-signalr", {
        method: 'GET',
        headers: {'User-Agent': 'serverless', 'If-None-Match': etag}
    }, res => {
        if (res.headers['etag']) {
            etag = res.headers['etag']
        }

        var body = "";

        res.on('data', data => {
            body += data;
        });
        res.on("end", () => {
            if (res.statusCode === 200) {
                var jbody = JSON.parse(body);
                star = jbody['stargazers_count'];
            }

            context.bindings.signalRMessages = [{
                "target": "newMessage",
                "arguments": [ `Current star count of https://github.com/Azure/azure-signalr is: ${star}` ]
            }]
            context.done();
        });
    }).on("error", (error) => {
        context.log(error);
        context.res = {
          status: 500,
          body: error
        };
        context.done();
    });
    req.end();
}

Créer le fichier index.html

L’interface client de cette application est une page web. La fonction index lit le contenu HTML à partir du fichier contenu/index.html.

  1. Créez un dossier appelé content dans le dossier racine de votre projet.

  2. Créez le fichier content/index.html.

  3. Copiez le contenu suivant dans le fichier contenu/index.html et enregistrez-le :

    <html>

<body>
  <h1>Azure SignalR Serverless Sample</h1>
  <div id="messages"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.7/signalr.min.js"></script>
  <script>
    let messages = document.querySelector('#messages');
    const apiBaseUrl = window.location.origin;
    const connection = new signalR.HubConnectionBuilder()
        .withUrl(apiBaseUrl + '/api')
        .configureLogging(signalR.LogLevel.Information)
        .build();
      connection.on('newMessage', (message) => {
        document.getElementById("messages").innerHTML = message;
      });

      connection.start()
        .catch(console.error);
  </script>
</body>

</html>

Ajouter la chaîne de connexion SignalR Service aux paramètres de l’application de fonction

Un compte de stockage est nécessaire pour l’utilisation d’Azure Functions. Vous pouvez installer et exécuter l’émulateur de stockage Azure. Ou vous pouvez mettre à jour le paramètre pour utiliser votre compte de stockage réel avec la commande suivante : bash func settings add AzureWebJobsStorage "<storage-connection-string>"

Vous avez presque terminé. La dernière étape consiste à définir une chaîne de connexion de SignalR Service dans les paramètres de l’application Azure Function.

  1. Dans le Portail Azure, accédez à l’instance SignalR Service déployée précédemment.

  2. Sélectionnez Clés pour afficher les chaînes de connexion de l’instance du service SignalR.

    Screenshot of Azure SignalR service Keys page.

  3. Copiez la chaîne de connexion principale, puis exécutez la commande :

func settings add AzureSignalRConnectionString "<signalr-connection-string>"

Exécutez localement l’application Azure Function

Démarrez l’émulateur de stockage Azurite :

azurite

Exécutez l’application Azure Function dans votre environnement local :

func start

Notes

Si vous voyez des erreurs de lecture sur le stockage d’objets blob, vérifiez que le paramètre « AzureWebJobsStorage » dans le fichier local.settings.json est défini sur UseDevelopmentStorage=true.

Après l’exécution locale d’Azure Function, accédez à http://localhost:7071/api/index. La page affiche le nombre d’étoiles actuel pour le dépôt GitHub Azure/azure-signalr. Lorsque vous ajoutez ou supprimez une étoile sur le GitHub, le nombre actualisé s’affiche toutes les quelques secondes.

Vous rencontrez des problèmes ? Essayez le guide de résolution des problèmes ou faites-le nous savoir.

Nettoyer les ressources

Si vous ne pensez pas continuer à utiliser cette application, supprimez toutes les ressources créées par ce démarrage rapide en procédant de la façon suivante de façon à ne pas exposer de coûts :

  1. Dans le portail Azure, sélectionnez Groupes de ressources tout à gauche, puis sélectionnez le groupe de ressources que vous avez créé. Vous pouvez également utiliser la zone de recherche pour trouver le groupe de ressources grâce à son nom.

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

  3. Dans la nouvelle fenêtre, saisissez le nom du groupe de ressources à supprimer, puis cliquez sur Supprimer.

Étapes suivantes

Dans ce guide de démarrage rapide, vous avez généré et exécuté une application serverless en temps réel sur l’hôte local. Ensuite, découvrez comment permettre une communication bidirectionnelle entre les clients et Azure Function grâce à SignalR Service.

Liaisons de service SignalR pour Azure Functions

Communication bidirectionnelle dans Serverless

Déployer Azure Functions avec VS Code