Rychlý start: Vytvoření bezserverové aplikace se službou Azure Functions a službou SignalR pomocí JavaScriptu

V tomto článku použijete službu Azure SignalR, Azure Functions a JavaScript k vytvoření bezserverové aplikace pro vysílání zpráv klientům.

Požadavky

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

Vytvoření instance služby Azure SignalR Service

V této části vytvoříte základní instanci Azure SignalR, která se použije pro vaši aplikaci. Následující kroky používají azure Portal k vytvoření nové instance, ale můžete také použít Azure CLI. Další informace najdete v tématu az signalr create command in the Azure SignalR Service CLI Reference.

1. Přihlaste se k portálu Azure.
2. V levém horním rohu stránky vyberte + Vytvořit prostředek.
3. Na stránce Vytvořit prostředek v textovém poli Search s a marketplace zadejte signalr a ze seznamu vyberte Službu SignalR.
4. Na stránce Služby SignalR vyberte Vytvořit.
5. Na kartě Základy zadáte základní informace pro novou instanci služby SignalR. Zadejte následující hodnoty:

V kurzech SignalR nemusíte měnit nastavení na kartách Sítě a značky .

6. Vyberte tlačítko Zkontrolovat a vytvořit v dolní části karty Základy.
7. Na kartě Zkontrolovat a vytvořit zkontrolujte hodnoty a pak vyberte Vytvořit. Dokončení nasazení chvíli trvá.
8. Po dokončení nasazení vyberte tlačítko Přejít k prostředku .
9. Na stránce prostředku SignalR vyberte v nabídce na levé straně v části Nastavení.
10. Zkopírujte řetězec Připojení ion pro primární klíč. Tuto připojovací řetězec budete potřebovat ke konfiguraci aplikace později v tomto kurzu.

Projekt funkce Nastavení

Ujistěte se, že máte nainstalované nástroje Azure Functions Core Tools.

1. Otevřete příkazový řádek.
2. Vytvořte adresář projektu a pak ho změňte.
3. Spuštěním příkazu Azure Functions func init inicializujete nový projekt.

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

Vytvoření funkcí projektu

Po inicializaci projektu je potřeba vytvořit funkce. Tento projekt vyžaduje tři funkce:

• index: Hostuje webovou stránku klienta.
• negotiate: Umožňuje klientovi získat přístupový token.
• broadcast: Používá aktivační událost času k pravidelnému vysílání zpráv všem klientům.

Když spustíte func new příkaz z kořenového adresáře projektu, nástroje Azure Functions Core Tools vytvoří zdrojové soubory funkcí, které jsou uloženy ve složce s názvem funkce. Soubory podle potřeby upravíte tak, že nahradíte výchozí kód kódem aplikace.

Vytvoření indexové funkce

1. Spuštěním následujícího příkazu vytvořte index funkci.

   func new -n index -t HttpTrigger
   

2. Upravte src/functions/httpTrigger.js a nahraďte obsah následujícím kódem JSON:

   const { app } = require('@azure/functions');
   const fs = require('fs').promises;
   const path = require('path');
   
   app.http('index', {
       methods: ['GET', 'POST'],
       authLevel: 'anonymous',
       handler: async (request, context) => {
   
           try {
   
               context.log(`Http function processed request for url "${request.url}"`);
   
               const filePath = path.join(__dirname,'../content/index.html');
               const html = await fs.readFile(filePath);
   
               return {
                   body: html,
                   headers: {
                       'Content-Type': 'text/html'
                   }
               };
   
           } catch (error) {
               context.log(error);
               return {
                   status: 500,
                   jsonBody: error
               }
           }
       }
   });
   

Vytvoření funkce negotiate

1. Spuštěním následujícího příkazu vytvořte negotiate funkci.

   func new -n negotiate -t HttpTrigger
   

2. Upravte src/functions/negotiate.js a nahraďte obsah následujícím kódem JSON:

   const { app, input } = require('@azure/functions');
   
   const inputSignalR = input.generic({
       type: 'signalRConnectionInfo',
       name: 'connectionInfo',
       hubName: 'serverless',
       connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
   });
   
   app.post('negotiate', {
       authLevel: 'anonymous',
       handler: (request, context) => {
           try {
               return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
           } catch (error) {
               context.log(error);
               return {
                   status: 500,
                   jsonBody: error
               }
           }
       },
       route: 'negotiate',
       extraInputs: [inputSignalR],
   });
   

Vytvořte funkci všesměrového vysílání.

1. Spuštěním následujícího příkazu vytvořte broadcast funkci.

   func new -n broadcast -t TimerTrigger
   

2. Upravte src/functions/broadcast.js a nahraďte obsah následujícím kódem:

   const { app, output } = require('@azure/functions');
   const getStars = require('../getStars');
   
   var etag = '';
   var star = 0;
   
   const goingOutToSignalR = output.generic({
       type: 'signalR',
       name: 'signalR',
       hubName: 'serverless',
       connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
   });
   
   app.timer('sendMessasge', {
       schedule: '0 * * * * *',
       extraOutputs: [goingOutToSignalR],
       handler: async (myTimer, context) => {
   
           try {
               const response = await getStars(etag);
   
               if(response.etag === etag){
                   console.log(`Same etag: ${response.etag}, no need to broadcast message`);
                   return;
               }
           
               etag = response.etag;
               const message = `${response.stars}`;
   
               context.extraOutputs.set(goingOutToSignalR,
                   {
                       'target': 'newMessage',
                       'arguments': [message]
                   });
           } catch (error) {
               context.log(error);
           }
   
       }
   });
   

Vytvoření souboru index.html

Klientské rozhraní této aplikace je webová stránka. Funkce index čte obsah HTML ze souboru content/index.html .

1. Vytvořte složku s názvem content v kořenové složce projektu.

2. Vytvořte soubor content/index.html.

3. Zkopírujte následující obsah do souboru content/index.html a uložte ho:

   <html>
   
   <body>
     <h1>Azure SignalR Serverless Sample</h1>
     <div>Instructions: Goto <a href="https://github.com/Azure/azure-signalr">GitHub repo</a> and star the repository.</div>
     <hr>
     <div>Star count: <div id="messages"></div></div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>
     <script>
       let messages = document.querySelector('#messages');
       const apiBaseUrl = window.location.origin;
       console.log(`apiBaseUrl: ${apiBaseUrl}`);
       const connection = new signalR.HubConnectionBuilder()
           .withUrl(apiBaseUrl + '/api')
           .configureLogging(signalR.LogLevel.Information)
           .build();
         connection.on('newMessage', (message) => {
           console.log(`message: ${message}`);
           document.getElementById("messages").innerHTML = message;
         });
   
         connection.start()
           .catch(console.error);
     </script>
   </body>
   
   </html>
   

Nastavení služby Azure Storage

Azure Functions vyžaduje, aby fungoval účet úložiště. Zvolte jednu z těchto dvou možností:

• Spusťte bezplatný emulátor služby Azure Storage.
• Použijte službu Azure Storage. Pokud ho budete dál používat, můžou se vám za to účtují náklady.

func settings add AzureWebJobsStorage "<storage-connection-string>"

Přidání připojovací řetězec služby SignalR do nastavení aplikace funkcí

Už jste skoro hotovi. Posledním krokem je nastavení služby SignalR Service připojovací řetězec v nastavení aplikace funkcí Azure.

1. Na webu Azure Portal přejděte do instance SignalR, kterou jste nasadili dříve.

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 příkaz:

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

Místní spuštění aplikace Funkcí Azure

Spusťte aplikaci Funkcí Azure v místním prostředí:

func start

Po místním spuštění funkce Azure Functions přejděte na http://localhost:7071/api/index. Na stránce se zobrazí aktuální počet hvězdiček pro úložiště Azure/azure-signalr GitHubu. Když aktualizujete nebo zrušíte hvězdu úložiště na GitHubu, zobrazí se počet aktualizací každých několik sekund.

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:

1. Ú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.

2. V okně, které se otevře, vyberte příslušnou skupinu prostředků a pak klikněte na Odstranit skupinu prostředků.

3. V novém okně zadejte název skupiny prostředků, kterou chcete odstranit, a pak klikněte na Odstranit.

Ukázkový kód

Veškerý kód použitý v článku můžete získat z úložiště GitHub:

• aspnet/AzureSignalR-samples.

Další kroky

V tomto rychlém startu jste vytvořili a spustili bezserverovou aplikaci v reálném čase v místním hostiteli. Dále se dozvíte více o obousměrné komunikaci mezi klienty a službou Azure Functions se službou SignalR.