Rövid útmutató: Kiszolgáló nélküli alkalmazás létrehozása az Azure Functions és a SignalR Service használatával JavaScript használatával

  • Cikk

Ebben a cikkben az Azure SignalR Service, az Azure Functions és a JavaScript használatával hozhat létre kiszolgáló nélküli alkalmazást az üzenetek ügyfeleknek való közvetítéséhez.

Előfeltételek

Ez a rövid útmutató macOS, Windows vagy Linux rendszeren is futtatható.

Előfeltételek Leírás
Azure-előfizetés Ha nem rendelkezik előfizetéssel, hozzon létre ingyenes Azure-fiókot
Kódszerkesztő Szüksége van egy kódszerkesztőre, például a Visual Studio Code-ra.
Azure Functions Core Tools A 4.0.5611-es vagy újabb verzió szükséges Node.js 4-es verziójú programozási modell futtatásához.
Node.js LTS Tekintse meg a támogatott node.js-verziókat az Azure Functions JavaScript fejlesztői útmutatójában.
Azurite A SignalR-kötéshez Azure Storage szükséges. Helyi tárolóemulátort akkor használhat, ha egy függvény helyileg fut.
Azure CLI Az Azure CLI használatával is létrehozhat egy Azure SignalR-szolgáltatáspéldányt.

Azure SignalR Service-példány létrehozása

Ebben a szakaszban egy alapszintű Azure SignalR-példányt hoz létre az alkalmazáshoz. Az alábbi lépések az Azure Portal használatával hoznak létre új példányt, de használhatja az Azure CLI-t is. További információ: az signalr create command in the Azure SignalR Service CLI Reference.

  1. Jelentkezzen be az Azure Portalra.
  2. A lap bal felső részén válassza az + Erőforrás létrehozása lehetőséget.
  3. Az Erőforrás létrehozása lap Search szolgáltatás és piactér szövegmezőjében adja meg a signalr kifejezést, majd válassza ki a SignalR szolgáltatást a listából.
  4. A SignalR szolgáltatás oldalán válassza a Létrehozás lehetőséget.
  5. Az Alapok lapon adja meg az új SignalR-szolgáltatáspéldány alapvető adatait. Írja be a következő értékeket:
Mező Ajánlott érték Leírás
Előfizetés Válassza ki az előfizetését Válassza ki azt az előfizetést, amelyet egy új SignalR-szolgáltatáspéldány létrehozásához szeretne használni.
Erőforráscsoport SignalRTestResources nevű erőforráscsoport létrehozása Válasszon ki vagy hozzon létre egy erőforráscsoportot a SignalR-erőforráshoz. Hasznos, ha egy új erőforráscsoportot hoz létre ehhez az oktatóanyaghoz ahelyett, hogy meglévő erőforráscsoportot használ. Ha az oktatóanyag elvégzése után szeretné felszabadítani az erőforrásokat, törölje az erőforráscsoportot.

Az erőforráscsoport törlése a csoporthoz tartozó összes erőforrást is törli. Ez a művelet nem vonható vissza. Mielőtt töröl egy erőforráscsoportot, győződjön meg arról, hogy nem tartalmazza a megtartani kívánt erőforrásokat.

További információk: Erőforráscsoportok használata az Azure-erőforrások kezeléséhez.
Erőforrás neve testsignalr Írja be a SignalR-erőforráshoz használandó egyedi erőforrásnevet. Ha a testsignalr már szerepel a régióban, adjon hozzá egy számjegyet vagy karaktert, amíg a név egyedi nem lesz.

A névnek 1–63 karakter hosszúságú sztringnek kell lennie, és csak számokat, betűket és kötőjelet (-) tartalmazhat. A név nem kezdődhet és nem végződhet kötőjeljellel, és az egymást követő kötőjelkarakterek érvénytelenek.
Régió Régió kiválasztása Válassza ki az új SignalR-szolgáltatáspéldány megfelelő régióját.

Az Azure SignalR szolgáltatás jelenleg nem érhető el minden régióban. További információ: Azure SignalR Service-régió rendelkezésre állása
Tarifacsomag Válassza a Módosítás lehetőséget, majd válassza az Ingyenes (Csak dev/Test) lehetőséget. Válassza a Kiválasztás lehetőséget a tarifacsomag kiválasztásának megerősítéséhez. Az Azure SignalR szolgáltatás három tarifacsomagot tartalmaz: ingyenes, standard és prémium. Az oktatóanyagok az ingyenes szintet használják, hacsak az előfeltételek másként nem rendelkeznek.

A szintek és a díjszabás közötti funkcióbeli különbségekről további információt az Azure SignalR Service díjszabásában talál .
Szolgáltatás mód Válassza ki a megfelelő szolgáltatási módot Az Alapértelmezett beállítást akkor használja, ha a SignalR hub logikáját üzemelteti a webalkalmazásokban, és proxyként használja a SignalR szolgáltatást. Kiszolgáló nélküli technológiát, például az Azure Functionst használva üzemeltetheti a SignalR hub logikáját.

A klasszikus mód csak a visszamenőleges kompatibilitást szolgálja, ezért nem ajánlott használni.

További információ: Szolgáltatás mód az Azure SignalR Service-ben.

A SignalR-oktatóanyagok Hálózatkezelés és Címkék lapján nem kell módosítania a beállításokat.

  1. Válassza az Alapismeretek lap alján található Véleményezés + létrehozás gombot.
  2. A Véleményezés + létrehozás lapon tekintse át az értékeket, majd válassza a Létrehozás lehetőséget. Az üzembe helyezés végrehajtása néhány percet vesz igénybe.
  3. Amikor az üzembe helyezés befejeződött, válassza az Erőforrás megnyitása gombot.
  4. A SignalR erőforráslapján válassza a bal oldali menü kulcsait a Gépház alatt.
  5. Másolja ki az elsődleges kulcshoz tartozó Csatlakozás ion sztringet. Erre a kapcsolati sztring van szüksége az alkalmazás konfigurálásához az oktatóanyag későbbi részében.

Függvényprojekt beállítása

Győződjön meg arról, hogy telepítve vannak az Azure Functions Core Tools.

  1. Nyisson meg egy parancssort.
  2. Hozzon létre projektkönyvtárat, majd váltson rá.
  3. Futtassa az Azure Functions func init parancsot egy új projekt inicializálásához.
func init --worker-runtime javascript --language javascript --model V4

A projektfüggvények létrehozása

A projekt inicializálása után függvényeket kell létrehoznia. Ehhez a projekthez három függvény szükséges:

  • index: Egy ügyfél webhelyét üzemelteti.
  • negotiate: Lehetővé teszi az ügyfél számára a hozzáférési jogkivonat lekérését.
  • broadcast: Idő eseményindítóval rendszeres időközönként küld üzeneteket az összes ügyfélnek.

Amikor a parancsot a func new projekt gyökérkönyvtárából futtatja, az Azure Functions Core Tools létrehozza azokat a függvényforrásfájlokat, amelyek egy függvénynévvel rendelkező mappában vannak tárolva. Szükség szerint szerkessze a fájlokat, és cserélje le az alapértelmezett kódot az alkalmazáskódra.

Az indexfüggvény létrehozása

  1. Futtassa a következő parancsot a index függvény létrehozásához.

    func new -n index -t HttpTrigger

  2. Szerkessze az src/functions/httpTrigger.js fájlt, és cserélje le a tartalmat a következő json-kódra:

    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
            }
        }
    }
});

A egyeztetési függvény létrehozása

  1. Futtassa a következő parancsot a negotiate függvény létrehozásához.

    func new -n negotiate -t HttpTrigger

  2. Szerkessze az src/functions/negotiate.js fájlt, és cserélje le a tartalmat a következő json-kódra:

    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],
});

Hozzon létre egy szórási függvényt.

  1. Futtassa a következő parancsot a broadcast függvény létrehozásához.

    func new -n broadcast -t TimerTrigger

  2. Szerkessze az src/functions/broadcast.js elemet, és cserélje le a tartalmat a következő kódra:

    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);
        }

    }
});

A index.html fájl létrehozása

Az alkalmazás ügyfélfelülete egy weblap. A index függvény HTML-tartalmat olvas be a content/index.html fájlból.

  1. Hozzon létre egy mappát content a projekt gyökérmappájában.

  2. Hozza létre a fájlt content/index.html.

  3. Másolja a következő tartalmat a content/index.html fájlba, és mentse:

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

Az Azure Storage beállítása

Az Azure Functions használatához egy tárfiók szükséges. Válasszon a következő két lehetőség közül:

  • Futtassa az ingyenes Azure Storage Emulatort.
  • Használja az Azure Storage szolgáltatást. Ez költségekkel járhat, ha továbbra is használja.

  1. Indítsa el az Azurite Storage emulátort:

    azurite -l azurite -d azurite\debug.log

  2. Győződjön meg arról, hogy a AzureWebJobsStorage local.settings.json be van állítvaUseDevelopmentStorage=true.

Adja hozzá a SignalR szolgáltatás kapcsolati sztring a függvényalkalmazás beállításaihoz

Már majdnem elkészült. Az utolsó lépés a SignalR szolgáltatás kapcsolati sztring beállítása az Azure-függvényalkalmazás beállításaiban.

  1. Az Azure Portalon lépjen a korábban üzembe helyezett SignalR-példányra.

  2. Válassza a Kulcsok elemet a SignalR-szolgáltatáspéldány kapcsolati sztringjeinek megtekintéséhez.

    Képernyőkép az Azure SignalR szolgáltatáskulcsok oldaláról.

  3. Másolja ki az elsődleges kapcsolati sztring, és hajtsa végre a következő parancsot:

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

Az Azure-függvényalkalmazás helyi futtatása

Futtassa az Azure-függvényalkalmazást a helyi környezetben:

func start

Miután az Azure-függvény helyileg fut, nyissa meg a következőt http://localhost:7071/api/index: . A lapon látható a GitHub Azure/azure-signalr-adattár aktuális csillagszáma. Amikor a GitHubon csillagozza vagy leválasztja az adattárat, néhány másodpercenként megjelenik a frissített szám.

Problémákat tapasztal? Próbálja ki a hibaelhárítási útmutatót , vagy tudassa velünk.

Az erőforrások eltávolítása

Ha nem használja tovább az alkalmazást, akkor a következő lépésekkel a mintaalkalmazás által létrehozott összes erőforrást törölheti a költségek elkerülése érdekében:

  1. Az Azure Portalon válassza az Erőforráscsoportok lehetőséget a bal szélen, majd a létrehozott erőforráscsoport. Másik lehetőségként a keresőmezőben, név alapján is rákereshet az erőforráscsoportra.

  2. Az ekkor megnyíló új ablakban válassza ki az erőforráscsoportot, és kattintson az Erőforráscsoport törlése elemre.

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

Mintakód

A cikkben használt összes kódot lekérheti a GitHub-adattárból:

Következő lépések

Ebben a rövid útmutatóban egy valós idejű kiszolgáló nélküli alkalmazást készített és futtatott a localhostban. A következő lépésben megtudhatja, hogyan kommunikálhat kétirányúan az ügyfelek és az Azure-függvények között a SignalR Szolgáltatással.

SignalR-szolgáltatáskötések az Azure Functionshez

Kétirányú kommunikáció kiszolgáló nélküli környezetben

Az Azure Functions üzembe helyezése VS Code-dal