Rychlý start: Použití JavaScriptu k vytvoření aplikace GitHub počet hvězdiček s Azure Functions a SignalR Service

Článek
11/24/2021
5 min ke čtení

Azure SignalR Service umožňuje do aplikace snadno přidávat funkce v reálném čase a Azure Functions je bez serverů, která umožňuje spouštět kód bez správy jakékoli infrastruktury. V tomto rychlém startu se dozvíte, jak pomocí SignalR Service a Azure Functions vytvořit bez serveru aplikaci s JavaScriptem pro vysílání zpráv klientům.

Poznámka

Všechny kódy uvedené v tomto článku můžete získat z GitHub

Požadavky

Editor kódu, například Visual Studio Code
Účet Azure s aktivním předplatným. Vytvořte si účet zdarma.
Azure Functions Core Toolsverze 2 nebo vyšší. Používá se ke spouštění aplikací Azure Function App místně.
Node.js, verze 10.x

Poznámka

Příklady by měly fungovat s jinými verzemi Node.js, další informace najdete v Azure Functions dokumentaci k verzím modulu runtime.

Poznámka

Toto Rychlé zprovoznění je možné spustit v systémech macOS, Windows nebo Linux.

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Přihlaste se k Azure.

Přihlaste se k webu Azure Portal na adrese https://portal.azure.com/ pomocí svého účtu Azure.

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Vytvoření instance služby Azure SignalR Service

Vaše aplikace se připojí k instanci služby SignalR Service v Azure.

Vyberte tlačítko Nový v levém horním rohu portálu Azure Portal. Do vyhledávacího pole na obrazovce Nový zadejte SignalR Service a stiskněte klávesu Enter.
Ve výsledcích hledání vyberte SignalR Service a pak vyberte Vytvořit.

Zadejte následující nastavení.

Nastavení	Navrhovaná hodnota	Popis
Název prostředku	Globálně jedinečný název	Název, který identifikuje novou instanci služby SignalR Service. Platné znaky jsou `a-z`, `0-9` a `-`.
Předplatné	Vaše předplatné	Předplatné, ve kterém se nová instance služby SignalR Service vytvoří.
Skupina prostředků	myResourceGroup	Název nové skupiny prostředků, ve které se má instance služby SignalR Service vytvořit.
Umístění	USA – západ	Vyberte oblast , která je blízko vás.
Cenová úroveň	Free	Vyzkoušejte si službu Azure SignalR Service zdarma.
Počet jednotek	Neuvedeno	Počet jednotek určuje, kolik připojení může instance služby SignalR Service přijmout. To lze nakonfigurovat jen na úrovni Standard.
Režim služby	Bez serveru	Pro použití s Azure Functions nebo REST API.

Snímek obrazovky znázorňující kartu základy signálu s hodnotami.

Pokud chcete začít nasazovat instanci služby SignalR Service, vyberte Vytvořit.
Po nasazení instance ho otevřete na portálu a najděte jeho stránku nastavení. Nastavte režim služby na možnost bez serveru jenom v případě, že používáte službu Azure Signal service prostřednictvím Azure Functions vazby nebo REST API. V opačném případě je ponechte v klasickém nebo výchozím nastavení .

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Nastavení a místní spuštění funkce Azure

Ujistěte se, že máte nainstalované nástroje Azure Function Core Tools. Vytvořte prázdný adresář a pomocí příkazového řádku do tohoto adresáře přejděte.
```
# Initialize a function project
func init --worker-runtime javascript
```

Po inicializaci projektu je potřeba vytvořit funkce. V této ukázce potřebujeme vytvořit 3 funkce.

Spuštěním následujícího příkazu vytvořte index funkci, která bude hostitelem webové stránky pro klienta.

func new -n index -t HttpTrigger

Otevřete index/function.json soubor a zkopírujte následující kódy JSON:

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

Otevřete index/index.js soubor a zkopírujte následující kódy.

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 (error) {
        context.log.error(err);
        context.done(err);
    }
}

Vytvořte pro negotiate klienty funkci pro získání přístupového tokenu.

func new -n negotiate -t SignalRNegotiateHTTPTrigger

Otevřete negotiate/function.json soubor a zkopírujte následující kódy JSON:

{
  "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"
    }
  ]
}

Vytvořte funkci broadcast pro vysílání zpráv všem klientům. V ukázce používáme časový trigger k pravidelnému vysílání zpráv.

func new -n broadcast -t TimerTrigger

Otevřete broadcast/function.json soubor a zkopírujte následující kódy.

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

Otevřete broadcast/index.js soubor a zkopírujte následující kódy.

var https = require('https');

module.exports = function (context) {
    var req = https.request("https://api.github.com/repos/azure/azure-signalr", {
        method: 'GET',
        headers: {'User-Agent': 'serverless'}
    }, res => {
        var body = "";

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

Rozhraní klienta této ukázky je webová stránka. Za to, že čteme obsah HTML z content/index.html funkce , vytvořte nový soubor v index index.html content adresáři v kořenové složce projektu. Zkopírujte následující obsah.

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

Už je to skoro hotové. Posledním krokem je nastavení připojovacího řetězce SignalR Service funkce Azure.
1. V prohlížeči, ve kterém máte otevřený Azure Portal, si ověřte, že se úspěšně vytvořila instance služby SignalR Service, kterou jste nasadili dříve. Vyhledejte její název pomocí vyhledávacího pole v horní části stránky portálu. Instanci vyberte a otevřete.
2. Výběrem možnosti Klíče zobrazte připojovací řetězce instance služby SignalR.
3. Zkopírujte primární připojovací řetězec. A spusťte následující příkaz.
```
func settings add AzureSignalRConnectionString "<signalr-connection-string>"
```
Spusťte funkci Azure v místním prostředí:
```
func start
```
Po spuštění funkce Azure Function v místním prostředí. V prohlížeči přejděte na http://localhost:7071/api/index web a uvidíte aktuální počet hvězdiček. A pokud v GitHub hvězdičku, bude se každých pár sekund aktualizován počet hvězdiček.

Poznámka

Vazba SignalR musí Azure Storage, ale pokud je funkce spuštěná místně, můžete použít emulátor místního úložiště. Pokud se vám zobrazí nějaká There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid. chyba, například Potřebujete si stáhnout a povolit Storage Emulator

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Vyčištění prostředků

Pokud nebudete tuto aplikace nadále používat, odstraňte na základě následujícího postupu všechny prostředky vytvořené podle tohoto rychlého startu, aby se vám neúčtovaly žádné poplatky:

Úplně nalevo na webu Azure Portal vyberte Skupiny prostředků a pak vyberte skupinu prostředků, kterou jste vytvořili. Případně můžete použít vyhledávací pole a skupinu prostředků vyhledat podle jejího názvu.
V okně, které se otevře, vyberte příslušnou skupinu prostředků a pak klikněte na Odstranit skupinu prostředků.
V novém okně zadejte název skupiny prostředků, kterou chcete odstranit, a pak klikněte na Odstranit.

Máte problémy? Vyzkoušejte průvodce odstraňováním potíží nebo nám dejte vědět.

Další kroky

V tomto rychlém startu jste sestavili a spustili aplikaci bez serveru v reálném čase v místním prostředí. Další informace o používání SignalR Service pro Azure Functions. Dále se dozvíte, jak obousměrně komunikovat mezi klienty a funkcí Azure s SignalR Service.

Vazby služby SignalR pro Azure Functions

Obousměrná komunikace v bez serveru

Nasazení Azure Functions přes VS Code

Rychlý start: Použití JavaScriptu k vytvoření aplikace GitHub počet hvězdiček s Azure Functions a SignalR Service

Ohodnoťte vaše zkušenosti

Požadavky

Přihlaste se k Azure.

Vytvoření instance služby Azure SignalR Service

Nastavení a místní spuštění funkce Azure

Vyčištění prostředků

Další kroky