Megosztás a következőn keresztül:


Oktatóanyag: Kiszolgáló nélküli értesítési alkalmazás létrehozása az Azure Functions és az Azure Web PubSub szolgáltatással

Az Azure Web PubSub szolgáltatással valós idejű üzenetkezelési webalkalmazásokat hozhat létre WebSockets használatával. Az Azure Functions egy kiszolgáló nélküli platform, amellyel infrastruktúra kezelése nélkül futtathat kódokat. Ebben az oktatóanyagban megtudhatja, hogyan hozhat létre kiszolgáló nélküli alkalmazást az Azure Web PubSub szolgáltatás és az Azure Functions használatával valós idejű üzenetkezeléssel értesítési forgatókönyvek esetén.

Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:

  • Kiszolgáló nélküli értesítési alkalmazás létrehozása
  • A Web PubSub függvény bemeneti és kimeneti kötéseinek használata
  • A mintafüggvények helyi futtatása
  • A függvény üzembe helyezése az Azure-függvényalkalmazásban

Előfeltételek

If you don't have an Azure subscription, create an Azure free account before you begin.

Bejelentkezés az Azure-ba

Jelentkezzen be Azure-fiókjával az Azure Portalba a https://portal.azure.com/ webhelyen.

Azure Web PubSub szolgáltatáspéldány létrehozása

Az alkalmazás egy Web PubSub szolgáltatáspéldányhoz fog csatlakozni az Azure-ban.

  1. Kattintson az Azure Portal bal felső sarkában található Új gombra. Az Új képernyőn írja be a Web PubSub kifejezést a keresőmezőbe, és nyomja le az Enter billentyűt. (Az Azure Web PubSubban is kereshet a Web kategóriából.)

    Screenshot of searching the Azure Web PubSub in portal.

  2. Válassza a Web PubSub lehetőséget a keresési eredmények közül, majd válassza a Létrehozás lehetőséget.

  3. Adja meg az alábbi beállításokat.

    Setting Ajánlott érték Leírás
    Erőforrás neve Globálisan egyedi név Az új Web PubSub szolgáltatáspéldányt azonosító globálisan egyedi név. Az érvényes karakterek a következőka-z: , A-Z0-9és -.
    Előfizetés Az Ön előfizetése Az Azure-előfizetés, amely alatt ez az új Web PubSub szolgáltatáspéldány létrejön.
    Erőforráscsoport myResourceGroup Annak az új erőforráscsoportnak a neve, amelyben létre kívánja hozni a Web PubSub szolgáltatáspéldányt.
    Helyen West US Egy Önhöz közeli régiót válasszon.
    Tarifacsomag Ingyenes Először ingyenesen kipróbálhatja az Azure Web PubSub szolgáltatást. További információ az Azure Web PubSub szolgáltatás tarifacsomagjairól
    Egységek száma - Az egységszám azt határozza meg, hogy a Web PubSub szolgáltatáspéldány hány kapcsolatot tud elfogadni. Minden egység legfeljebb 1000 egyidejű kapcsolatot támogat. Ez a beállítás csak a Standard szinten konfigurálható.

    Screenshot of creating the Azure Web PubSub instance in portal.

  4. Válassza a Létrehozás lehetőséget a Web PubSub szolgáltatáspéldány üzembe helyezésének megkezdéséhez.

A függvények helyi létrehozása és futtatása

  1. Győződjön meg arról, hogy telepítve vannak az Azure Functions Core Tools . Most hozzon létre egy üres könyvtárat a projekthez. Futtassa a parancsot ebben a munkakönyvtárban. Használja az alábbi lehetőségek egyikét.

    func init --worker-runtime javascript --model V4
    
  2. A telepítéshez Microsoft.Azure.WebJobs.Extensions.WebPubSubkövesse a lépéseket.

    A Web PubSub támogatásának beszerzéséhez erősítse meg vagy frissítse host.jsonaz extensionBundle bővítményt a 4.* vagy újabb verzióra. A frissítéshez host.jsonnyissa meg a fájlt a szerkesztőben, majd cserélje le a meglévő verzióbővítménytBundle 4.* vagy újabb verzióra.

    {
        "extensionBundle": {
            "id": "Microsoft.Azure.Functions.ExtensionBundle",
            "version": "[4.*, 5.0.0)"
        }
    }
    
  3. index Statikus weblap olvasására és üzemeltetésére szolgáló függvény létrehozása az ügyfelek számára.

    func new -n index -t HttpTrigger
    
    • Frissítse src/functions/index.js és másolja a következő kódokat.
      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. Hozzon létre egy függvényt negotiate , amely segít az ügyfeleknek a szolgáltatáskapcsolat URL-címének lekérésében a hozzáférési jogkivonattal.

    func new -n negotiate -t HttpTrigger
    
    • Frissítse src/functions/negotiate.js és másolja a következő kódokat.
      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. Hozzon létre egy függvénytnotification, amellyel értesítéseket hozhat létre.TimerTrigger

    func new -n notification -t TimerTrigger
    
    • Frissítse src/functions/notification.js és másolja a következő kódokat.
      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. Adja hozzá az ügyfél egyetlen oldalát index.html a projekt gyökérmappájába, és másolja a tartalmat.

    <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. Az Azure-függvényalkalmazás konfigurálása és futtatása

    • Nyissa meg az Azure Portalt a böngészőben, és győződjön meg arról, hogy a korábban üzembe helyezett Web PubSub Service-példány sikeresen létrejött. Lépjen a példányra.
    • Válassza a Kulcsok lehetőséget, és másolja ki a kapcsolati sztring.

    Screenshot of copying the Web PubSub connection string.

    Futtassa a parancsot a függvénymappában a szolgáltatás kapcsolati sztring beállításához. Szükség szerint cserélje le <connection-string> az értéket.

    func settings add WebPubSubConnectionString "<connection-string>"
    

    Megjegyzés:

    TimerTrigger A mintában használt függőség az Azure Storage-ra van hatással, de helyi tárolóemulátort is használhat, ha a függvény helyileg fut. Ha valamilyen hibaüzenetet There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid.kap, le kell töltenie és engedélyeznie kell a Storage Emulatort.

    Most már parancs alapján futtathatja a helyi függvényt.

    func start --port 7071
    

    A futó naplók ellenőrzésekor a helyi gazdagép statikus oldalát a következő látogatással érheti el: http://localhost:7071/api/index.

    Megjegyzés:

    Egyes browers automatikusan átirányítja https , hogy vezet rossz URL-címet. Javasoljuk, hogy használja Edge és ellenőrizze duplán az URL-címet, ha a renderelés nem sikerül.

Függvényalkalmazás üzembe helyezése az Azure-ban

Mielőtt üzembe helyezheti a függvénykódot az Azure-ban, három erőforrást kell létrehoznia:

  • Egy erőforráscsoport, amely a kapcsolódó erőforrások logikai tárolója.
  • Egy tárfiók, amely az állapot és a függvényekkel kapcsolatos egyéb információk fenntartására szolgál.
  • Egy függvényalkalmazás, amely a függvénykód végrehajtásához biztosítja a környezetet. A függvényalkalmazások leképezik a helyi függvényprojektet, és lehetővé teszi a függvények logikai egységként való csoportosítását az erőforrások egyszerűbb kezelése, üzembe helyezése és megosztása érdekében.

Ezeket az elemeket az alábbi parancsokkal hozhatja létre.

  1. Jelentkezzen be az Azure-ba:

    az login
    
  2. Hozzon létre egy erőforráscsoportot, vagy kihagyhatja az Azure Web PubSub szolgáltatás újbóli használatával:

    az group create -n WebPubSubFunction -l <REGION>
    
  3. Hozzon létre egy általános célú tárfiókot az erőforráscsoportban és a régióban:

    az storage account create -n <STORAGE_NAME> -l <REGION> -g WebPubSubFunction
    
  4. A függvényalkalmazás létrehozása az Azure-ban:

    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>
    

    Megjegyzés:

    Tekintse meg az Azure Functions futtatókörnyezeti verzióinak dokumentációját , és állítsa be --runtime-version a paramétert támogatott értékre.

  5. A függvényprojekt üzembe helyezése az Azure-ban:

    Miután létrehozta a függvényalkalmazást az Azure-ban, készen áll a helyi függvényprojekt üzembe helyezésére a func Azure functionapp publish paranccsal.

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

    Megjegyzés:

    Az alábbiakban helyi beállításokat local.settings.json helyezünk üzembe a parancsparaméterrel --publish-local-settingsegyütt. Ha a Microsoft Azure Storage Emulatort használja, a következő parancssori üzenetet követve beírhatjano, hogy kihagyja az érték felülírását az Azure-ban. App setting AzureWebJobsStorage is different between azure and local.settings.json, Would you like to overwrite value in azure? [yes/no/show] Emellett frissítheti a függvényalkalmazás beállításait az Azure Portal ->Gépház ->Configuration szolgáltatásban.

  6. Most már ellenőrizheti a webhelyét az Azure Függvényalkalmazásból az URL-címre navigálva. https://<FUNCIONAPP_NAME>.azurewebsites.net/api/index

Clean up resources

Ha nem fogja tovább használni ezt az alkalmazást, törölje a dokumentum által létrehozott összes erőforrást az alábbi lépésekkel, hogy ne járjon költségekkel:

  1. Az Azure Portalon válassza az Erőforráscsoportok lehetőséget a bal szélen, majd a létrehozott erőforráscsoport. A keresőmezővel megkeresheti az erőforráscsoportot a neve alapján.

  2. A megnyíló ablakban jelölje ki az erőforráscsoportot, majd válassza az Erőforráscsoport törlése lehetőséget.

  3. Az új ablakban írja be a törölni kívánt erőforráscsoport nevét, majd válassza a Törlés lehetőséget.

További lépések

Ebben a rövid útmutatóban megtanulta, hogyan futtathat kiszolgáló nélküli csevegőalkalmazásokat. Most már elkezdheti saját alkalmazásának összeállítását.