Gyakorlat – Automatikus frissítések engedélyezése webalkalmazásban a SignalR Service használatával

  • 12 perc

A SignalR prototípushoz való hozzáadásához létre kell hoznia a következőt:

  • Azure SignalR-erőforrás
  • Néhány új függvény a SignalR támogatásához
  • Az ügyfél frissítése a SignalR támogatásához

SignalR-erőforrás létrehozása

Létre kell hoznia egy Azure SignalR-erőforrást.

  1. Térjen vissza a terminálhoz a SignalR-erőforrás létrehozásához.

  2. Lépjen az setup-resources alkönyvtárra az erőforrás létrehozásához.

    cd stock-prototype/setup-resources && bash create-signalr-resources.sh & cd ..

  3. Másolja ki a SignalR-erőforrás kapcsolati sztring. Erre szüksége lesz a kiszolgáló kódjának frissítéséhez.

    Erőforrás típusa Környezeti változó
    Azure SignalR Más néven SIGNALR_CONNECTION_STRING

Kiszolgáló konfigurációs környezeti változóinak frissítése

A ./start/server/local.settings.json fájlban adjon hozzá egy változót a terminálban felsorolt értékkel elnevezett SIGNALR_CONNECTION_STRING Értékek objektumhoz, és mentse a fájlt.

A signalr-open-connection függvény létrehozása

A webes ügyfél a SignalR ügyfél-SDK használatával létesít kapcsolatot a kiszolgálóval. Az SDK egy signalr-open-connection nevű függvényen keresztül kéri le a kapcsolatot a szolgáltatáshoz való csatlakozáshoz.

  1. Az F1 gomb megnyomásával nyissa meg a Visual Studio Code parancskatalógusát.

  2. Keresse meg és válassza ki az Azure Functions: Create Function (Azure Functions: Függvény létrehozása) parancsot.

  3. Válassza az Alapértelmezett beállítás lehetőséget, majd válassza a start/kiszolgáló lehetőséget a függvényalkalmazás helyének beállításához.

  4. Válassza az Igen lehetőséget, amikor a projekt inicializálására van szükség a VS Code-tal való használathoz?

  5. Ha a rendszer kéri, adja meg az alábbi információkat.

    Név szerint Érték
    Sablon HTTP-eseményindító
    Név signalr-open-connection

    A signalr-open-connection.ts nevű fájl már elérhető a következő címen./start/server/src/functions: .

  6. Nyissa meg signalr-open-connection.ts , és cserélje le az összeset a következő kódra.

    import { app, input } from '@azure/functions';

const inputSignalR = input.generic({
    type: 'signalRConnectionInfo',
    name: 'connectionInfo',
    hubName: 'default',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

app.http('open-signalr-connection', {
    authLevel: 'anonymous',
    handler: (request, context) => {
        return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
    },
    route: 'negotiate',
    extraInputs: [inputSignalR]
});

    A SignalR kapcsolati adatait a függvény adja vissza.

A signalr-send-message függvény létrehozása

  1. Az F1 gomb megnyomásával nyissa meg a Visual Studio Code parancskatalógusát.

  2. Keresse meg és válassza ki az Azure Functions: Create Function (Azure Functions: Függvény létrehozása) parancsot.

  3. Válassza ki a függvényalkalmazás helyét kezdő/kiszolgálóként.

  4. Ha a rendszer kéri, adja meg az alábbi információkat.

    Név szerint Érték
    Sablon Azure Cosmos DB-eseményindító
    Név signalr-send-message
    Cosmos DB kapcsolati sztring COSMOSDB_CONNECTION_STRING
    Monitorozni kívánt adatbázis neve stocksdb
    Gyűjtemény neve stocks
    Ellenőrzi a létezést, és automatikusan létrehozza a bérletgyűjteményt true

    A frissítések megjelenítéséhez frissítse a Visual Studio Code Explorer ablakát. A signalr-open-connection nevű fájl már elérhető a következő címen./start/server/src/functions: .

  5. Nyissa meg signalr-send-message.ts , és cserélje le az összeset a következő kódra.

    import { app, output, CosmosDBv4FunctionOptions, InvocationContext } from "@azure/functions";

const goingOutToSignalR = output.generic({
    type: 'signalR',
    name: 'signalR',
    hubName: 'default',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

export async function dataToMessage(documents: unknown[], context: InvocationContext): Promise<void> {

    try {

        context.log(`Documents: ${JSON.stringify(documents)}`);

        documents.map(stock => {
            // @ts-ignore
            context.log(`Get price ${stock.symbol} ${stock.price}`);
            context.extraOutputs.set(goingOutToSignalR,
                {
                    'target': 'updated',
                    'arguments': [stock]
                });
        });
    } catch (error) {
        context.log(`Error: ${error}`);
    }
}

const options: CosmosDBv4FunctionOptions = {
    connection: 'COSMOSDB_CONNECTION_STRING',
    databaseName: 'stocksdb',
    containerName: 'stocks',
    createLeaseContainerIfNotExists: true,
    feedPollDelay: 500,
    handler: dataToMessage,
    extraOutputs: [goingOutToSignalR],
};

app.cosmosDB('send-signalr-messages', options);
  • Bejövő adatok definiálása: Az comingFromCosmosDB objektum meghatározza a Cosmos DB-eseményindítót a módosítások figyeléséhez.
  • Kimenő átvitel definiálása: Az goingOutToSignalR objektum ugyanazt a SignalR-kapcsolatot határozza meg. A hubName ugyanaz a hub default.
  • Csatlakozás adatok átvitele: A dataToMessage rendszer lekéri a stockstábla módosított elemeit, és az egyes módosított elemeket külön-külön küldi el a SignalR-ben ugyanazzal a extraOutputs központtaldefault.
  • Csatlakozás alkalmazáshoz: A app.CosmosDB kötéseket a függvény nevéhez send-signalr-messagesköti.

Módosítások véglegesítése és leküldés a GitHubra

  1. A terminálban véglegesítse a módosításokat az adattárban.

    git add .
git commit -m "Add SignalR functions"
git push

A signalr-send-message függvény létrehozása

Hozzon létre egy függvényalkalmazást és a kapcsolódó erőforrásokat az Azure-ban, amelyen közzéteheti az új függvénykódot.

  1. Új függvényalkalmazás létrehozásához nyissa meg az Azure Portalt .

  2. Az alábbi információk segítségével fejezze be az erőforrás-létrehozás alapjai lapot.

    Név szerint Érték
    Erőforráscsoport Hozzon létre egy új erőforráscsoportnevet stock-prototype.
    Függvényalkalmazás neve Írja fel a nevét a (z) gombra api. Például: api-jamie.
    Kód vagy tároló Válassza ki a kódot.
    Futtatókörnyezet verme Válassza a Node.js lehetőséget.
    Verzió Válassza ki a Node.js LTS-verzióját.
    Régió Válasszon ki egy Önhöz közeli régiót.
    Operációs rendszer Válassza a Linux lehetőséget.
    Üzemeltetés Válassza a Használati terv lehetőséget.

  3. Ne töltsön ki más lapokat, és válassza a Véleményezés + létrehozás lehetőséget, majd a Létrehozás lehetőséget. Folytatás előtt várja meg, amíg az üzembe helyezési folyamat befejeződik.

  4. Válassza az Ugrás az erőforrásra lehetőséget az új függvényalkalmazás megnyitásához.

A GitHub üzembe helyezésének konfigurálása

Csatlakozás az új függvényalkalmazást a GitHub-adattárba a folyamatos üzembe helyezés engedélyezéséhez. Éles környezetben ehelyett kódmódosításokat helyezne üzembe egy előkészítési ponton, mielőtt felcserélné őket az éles környezetbe.

  1. Az új függvényalkalmazás Azure Portal lapján válassza az Üzembe helyezési központ lehetőséget a bal oldali menüben.

  2. Válassza a GitHub forrását.

  3. Az üzembe helyezési konfiguráció befejezéséhez használja az alábbi információkat.

    Név szerint Érték
    Organization Válassza ki a GitHub-fiókját.
    Adattár Keresse meg és válassza ki a mslearn-advocates.azure-functions-and-signalr elemet.
    Ág Válassza ki a fő ágat.
    Munkafolyamat-beállítás Válassza a Munkafolyamat hozzáadása ...lehetőséget.
    Hitelesítés típusa Válassza ki a felhasználó által hozzárendelt identitást.
    Előfizetés Válassza ki a lap tetején látható előfizetést.
    Identitás Válassza az Új létrehozása lehetőséget.

  4. A beállítások mentéséhez válassza a szakasz tetején található Mentés lehetőséget. Ezzel létrehoz egy új munkafolyamat-fájlt az elágazott adattárban.

  5. Ez az üzembe helyezési konfiguráció létrehoz egy GitHub Actions-munkafolyamatfájlt az adattárban. Frissítenie kell a munkafolyamat-fájlt a függvényalkalmazás megfelelő csomagútvonalának használatához.

A GitHub üzembehelyezési munkafolyamatának szerkesztése

  1. A Visual Studio Code terminálban húzza le az új munkafolyamat-fájlt az elágazásból (forrásból).

    git pull origin main

    Ennek egy új mappát kell elhelyeznie a .githubon a munkafolyamat-fájl elérési útjával: ".github/workflows/main_RESOURCE_NAME.yml ahol RESOURCE_NAME az Azure Functions-alkalmazás neve.

  2. Nyissa meg a munkafolyamat-fájlt.

  3. Módosítsa a name fájl tetején lévő értéket a következőre Server: .

  4. Mivel a forrásadattár egy alkönyvtárban található az Azure Functions-alkalmazással, a műveletfájlnak ennek megfelelően módosítania kell. Az env szakaszban adjon hozzá egy új változót, amely PACKAGE_PATH a csomag elérési útját használja.

    env:
  PACKAGE_PATH: 'start/server'

  5. Keresse meg a Projektfüggőségek feloldása az Npm lépéssel, és cserélje le a tartalmat a következő YAML-re a csomag alkönyvtár-elérési útjának használatához. A kritikus változás a parancs azon pushd elérési útja, amely tartalmazza a változót env.PACKAGE_PATH .

    - name: 'Resolve Project Dependencies Using Npm'
  shell: bash
  run: |
    pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}'
    npm install
    npm run build --if-present
    npm run test --if-present
    popd

  6. Keresse meg a Zip összetevőt az üzembe helyezési lépéshez, és cserélje le a tartalmat a következő YAML-re a csomag alkönyvtár-elérési útjának használatához.

    - name: Upload artifact for deployment job
  uses: actions/upload-artifact@v3
  with:
    name: node-app
    path: release.zip

    A zip-fájl az adattár gyökerébe kerül, így az ../ érték szükséges ahhoz, hogy a zip-fájlt a gyökérre helyezze.

  7. Mentse a fájlt, és véglegesítse a módosításokat az adattárban.

    git add .
git commit -m "Update deployment workflow to use package path"
git push

    Ez a módosítás elindítja a munkafolyamat futtatását. A munkafolyamatot a GitHubon található elágazás Műveletek szakaszában tekintheti meg.

Az API-függvények környezeti változóinak konfigurálása

  1. Az Azure Portalon válassza a Gépház –> Konfiguráció, majd az Új alkalmazásbeállítás lehetőséget.

  2. Adja meg a Cosmos DB és a SignalR kapcsolati sztring beállításait. Az értékeket a local.settings.json mappában start/server találja.

    Név szerint Érték
    COSMOSDB_CONNECTION_STRING A Cosmos DB-fiók kapcsolati sztring.
    SIGNALR_CONNECTION_STRING A SignalR-fiók kapcsolati sztring.

  3. A beállítások mentéséhez válassza a Mentés lehetőséget.

Az API Functions üzembe helyezésének tesztelése

  1. Az Azure Portalon válassza az Áttekintés lehetőséget, és válassza az URL-címet az alkalmazás böngészőben való megnyitásához.
  2. Másolja ki az URL-címet, erre akkor lesz szüksége, amikor frissíti az ügyfélfájlt .env a BACKEND_URL 7. leckében végzett munka során.
  3. Nyissa meg az URL-címet egy böngészőben az API-függvények teszteléséhez.
  4. Fűzze hozzá /api/getStocks az URL-címet a böngészőben, és nyomja le az Enter billentyűt. Egy részvényadatokat tartalmazó JSON-tömbnek kell megjelennie.

Frissítette a kiszolgálókódot, hogy a SignalR-lel visszaadja a készleteket, és üzembe helyezte egy függvényalkalmazásban. Ezután frissítenie kell az ügyfelet, hogy a SignalR használatával fogadja a frissítéseket.