Oktatóanyag: Kiszolgáló nélküli valós idejű csevegőalkalmazás létrehozása az Azure Functions és az Azure Web PubSub szolgáltatással

Cikk
12/12/2024

Az Azure Web PubSub szolgáltatással valós idejű üzenetküldési webalkalmazásokat hozhat létre WebSockets és a közzétételi-feliratkozási minta 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ással és az Azure Functions szolgáltatással valós idejű üzenetkezeléssel és közzétételi feliratkozási mintával.

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

Kiszolgáló nélküli valós idejű csevegőalkalmazás létrehozása
A Web PubSub függvény kötéseinek és kimeneti kötéseinek használata
A függvény üzembe helyezése az Azure-függvényalkalmazásban
Az Azure-hitelesítés konfigurálása
Web PubSub Event Handler konfigurálása események és üzenetek alkalmazáshoz való átirányításához

Fontos

A cikkben szereplő nyers kapcsolati sztring csak bemutató célokra jelennek meg.

A kapcsolati sztring tartalmazzák azokat az engedélyezési információkat, amelyekre az alkalmazásnak szüksége van az Azure Web PubSub szolgáltatás eléréséhez. A kapcsolati sztring belüli hozzáférési kulcs hasonló a szolgáltatás gyökérjelszójához. Éles környezetben mindig védje a hozzáférési kulcsokat. Az Azure Key Vault használatával biztonságosan kezelheti és elforgathatja a kulcsokat, és biztonságossá teheti a kapcsolatot.WebPubSubServiceClient

Kerülje a hozzáférési kulcsok más felhasználók számára való terjesztését, a szigorú kódolást, illetve a mások számára hozzáférhető egyszerű szövegek mentését. Ha úgy véli, hogy illetéktelenek lettek, forgassa el a kulcsokat.

Előfeltételek

Kódszerkesztő, például Visual Studio Code
Node.js, 18.x vagy újabb verzió.

Feljegyzés

A Node.js támogatott verzióival kapcsolatos további információkért tekintse meg az Azure Functions futtatókörnyezeti verzióinak dokumentációját.
Az Azure Functions Core Tools (v4 vagy magasabb előnyben részesített) az Azure-függvényalkalmazások helyi futtatásához és az Azure-ban való üzembe helyezéséhez.
Az Azure-erőforrások kezeléséhez szükséges Azure CLI .

Ha nem rendelkezik Azure-előfizetéssel, első lépésként hozzon létre egy ingyenes Azure-fiókot.

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.

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

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

Beállítás	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ők`a-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	USA nyugati régiója	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ó.

Képernyőkép az Azure Web PubSub-példány portálon való létrehozásáról.

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 létrehozása

Győződjön meg arról, hogy telepítve vannak az Azure Functions Core Tools . Ezután hozzon létre egy üres könyvtárat a projekthez. Futtassa a parancsot ebben a munkakönyvtárban.
```
func init --worker-runtime javascript --model V4
```
```
func init --worker-runtime javascript --model V3
```
```
func init --worker-runtime dotnet
```
```
func init --worker-runtime dotnet-isolated
```
```
func init --worker-runtime python --model V1
```

Telepítse a(z) Microsoft.Azure.WebJobs.Extensions.WebPubSub rendszert.

A Web PubSub támogatásának beszerzéséhez erősítse meg és frissítse host.jsonaz extensionBundle bővítményt a 4.* vagy újabb verzióra.

{
  "extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[4.*, 5.0.0)"
  }
}

A Web PubSub támogatásának beszerzéséhez erősítse meg és frissítse host.jsonaz extensionBundle bővítményt a 3.3.0-s vagy újabb verzióra.

{
  "extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[3.3.*, 4.0.0)"
  }
}

dotnet add package Microsoft.Azure.WebJobs.Extensions.WebPubSub

dotnet add package Microsoft.Azure.Functions.Worker.Extensions.WebPubSub --prerelease

{
  "extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[3.3.*, 4.0.0)"
}

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

Frissítse index/function.json és másolja a következő json-kódokat.

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

Frissítse index/index.js és másolja a következő kódokat.

var fs = require("fs");
var path = require("path");

module.exports = function (context, req) {
  var index =
    context.executionContext.functionDirectory + "/../index.html";
  context.log("index.html path: " + index);
  fs.readFile(index, "utf8", function (err, data) {
    if (err) {
      console.log(err);
      context.done(err);
    }
    context.res = {
      status: 200,
      headers: {
        "Content-Type": "text/html",
      },
      body: data,
    };
    context.done();
  });
};

Frissítse index.cs és cserélje le Run a függvényt a következő kódokkal.

[FunctionName("index")]
public static IActionResult Run([HttpTrigger(AuthorizationLevel.Anonymous)] HttpRequest req, ExecutionContext context, ILogger log)
{
    var indexFile = Path.Combine(context.FunctionAppDirectory, "index.html");
    log.LogInformation($"index.html path: {indexFile}.");
    return new ContentResult
    {
        Content = File.ReadAllText(indexFile),
        ContentType = "text/html",
    };
}

Frissítse index.cs és cserélje le Run a függvényt a következő kódokkal.

[Function("index")]
public HttpResponseData Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequestData req, FunctionContext context)
{
    var path = Path.Combine(context.FunctionDefinition.PathToAssembly, "../index.html");
    _logger.LogInformation($"index.html path: {path}.");

var response = req.CreateResponse();
response.WriteString(File.ReadAllText(path));
response.Headers.Add("Content-Type", "text/html");
return response;
}

Frissítse index/function.json és másolja a következő json-kódokat.

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

Frissítse __init__.py és cserélje le main a függvényt a következő kódokkal.

import os

import azure.functions as func


def main(req: func.HttpRequest) -> func.HttpResponse:
    f = open(os.path.dirname(os.path.realpath(__file__)) + "/../index.html")
    return func.HttpResponse(f.read(), mimetype="text/html")

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

Feljegyzés

Ebben a példában a Microsoft Entra ID felhasználói identitás fejlécét x-ms-client-principal-name használjuk a lekéréshezuserId. És ez nem fog működni egy helyi függvényben. Üressé teheti, vagy más módon is beszerezheti vagy létrehozhatja userId , amikor helyi környezetben játszik. Adjon meg például egy felhasználónevet az ügyfélnek, és adja át a lekérdezésben, például ?user={$username} amikor a hívási függvény lekéri negotiate a szolgáltatáskapcsolat URL-címét. És a negotiate függvényben állítsa be userId az értéket {query.user}.

Frissítse src/functions/negotiate és másolja a következő kódokat.

const { app, input } = require('@azure/functions');

const connection = input.generic({
    type: 'webPubSubConnection',
    name: 'connection',
    userId: '{headers.x-ms-client-principal-name}',
    hub: 'simplechat'
});

app.http('negotiate', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    extraInputs: [connection],
    handler: async (request, context) => {
        return { body: JSON.stringify(context.extraInputs.get('connection')) };
    },
});

Frissítse negotiate/function.json és másolja a következő json-kódokat.

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    },
    {
      "type": "webPubSubConnection",
      "name": "connection",
      "hub": "simplechat",
      "userId": "{headers.x-ms-client-principal-name}",
      "direction": "in"
    }
  ]
}

Frissítse negotiate/index.js és másolja a következő kódokat.

module.exports = function (context, req, connection) {
  context.res = { body: connection };
  context.done();
};

Frissítse negotiate.cs és cserélje le Run a függvényt a következő kódokkal.

[FunctionName("negotiate")]
public static WebPubSubConnection Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
    [WebPubSubConnection(Hub = "simplechat", UserId = "{headers.x-ms-client-principal-name}")] WebPubSubConnection connection,
    ILogger log)
{
    log.LogInformation("Connecting...");
    return connection;
}

Adjon hozzá using utasításokat a fejlécben a szükséges függőségek feloldásához.
```
using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
```

Frissítse negotiate.cs és cserélje le Run a függvényt a következő kódokkal.

[Function("negotiate")]
public HttpResponseData Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequestData req,
    [WebPubSubConnectionInput(Hub = "simplechat", UserId = "{headers.x-ms-client-principal-name}")] WebPubSubConnection connectionInfo)
{
    var response = req.CreateResponse(HttpStatusCode.OK);
    response.WriteAsJsonAsync(connectionInfo);
    return response;
}

Frissítse negotiate/function.json és másolja a következő json-kódokat.

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "$return"
    },
    {
      "type": "webPubSubConnection",
      "name": "connection",
      "hub": "simplechat",
      "userId": "{headers.x-ms-client-principal-name}",
      "direction": "in"
    }
  ]
}

Frissítse negotiate/__init__.py és másolja a következő kódokat.

import azure.functions as func


def main(req: func.HttpRequest, connection) -> func.HttpResponse:
    return func.HttpResponse(connection)

Hozzon létre egy függvényt message az ügyfélüzenetek szolgáltatáson keresztüli közvetítéséhez.

func new -n message -t HttpTrigger

Frissítse src/functions/message.js és másolja a következő kódokat.

const { app, output, trigger } = require('@azure/functions');

const wpsMsg = output.generic({
    type: 'webPubSub',
    name: 'actions',
    hub: 'simplechat',
});

const wpsTrigger = trigger.generic({
    type: 'webPubSubTrigger',
    name: 'request',
    hub: 'simplechat',
    eventName: 'message',
    eventType: 'user'
});

app.generic('message', {
    trigger: wpsTrigger,
    extraOutputs: [wpsMsg],
    handler: async (request, context) => {
        context.extraOutputs.set(wpsMsg, [{
            "actionName": "sendToAll",
            "data": `[${context.triggerMetadata.connectionContext.userId}] ${request.data}`,
            "dataType": request.dataType
        }]);

        return {
            data: "[SYSTEM] ack.",
            dataType: "text",
        };
    }
});

Frissítse message/function.json és másolja a következő json-kódokat.

{
  "bindings": [
    {
      "type": "webPubSubTrigger",
      "direction": "in",
      "name": "data",
      "hub": "simplechat",
      "eventName": "message",
      "eventType": "user"
    },
    {
      "type": "webPubSub",
      "name": "actions",
      "hub": "simplechat",
      "direction": "out"
    }
  ]
}

Frissítse message/index.js és másolja a következő kódokat.

module.exports = async function (context, data) {
  context.bindings.actions = {
    actionName: "sendToAll",
    data: `[${context.bindingData.request.connectionContext.userId}] ${data}`,
    dataType: context.bindingData.dataType,
  };
  // UserEventResponse directly return to caller
  var response = {
    data: "[SYSTEM] ack.",
    dataType: "text",
  };
  return response;
};

Frissítse message.cs és cserélje le Run a függvényt a következő kódokkal.

[FunctionName("message")]
public static async Task<UserEventResponse> Run(
    [WebPubSubTrigger("simplechat", WebPubSubEventType.User, "message")] UserEventRequest request,
    BinaryData data,
    WebPubSubDataType dataType,
    [WebPubSub(Hub = "simplechat")] IAsyncCollector<WebPubSubAction> actions)
{
    await actions.AddAsync(WebPubSubAction.CreateSendToAllAction(
        BinaryData.FromString($"[{request.ConnectionContext.UserId}] {data.ToString()}"),
        dataType));
    return new UserEventResponse
    {
        Data = BinaryData.FromString("[SYSTEM] ack"),
        DataType = WebPubSubDataType.Text
    };
}

Adjon hozzá using utasításokat a fejlécben a szükséges függőségek feloldásához.

using System.Threading.Tasks;
using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
using Microsoft.Azure.WebPubSub.Common;

Frissítse message.cs és cserélje le Run a függvényt a következő kódokkal.

[Function("message")]
[WebPubSubOutput(Hub = "simplechat")]
public SendToAllAction Run(
    [WebPubSubTrigger("simplechat", WebPubSubEventType.User, "message")] UserEventRequest request)
{
    return new SendToAllAction
    {
        Data = BinaryData.FromString($"[{request.ConnectionContext.UserId}] {request.Data.ToString()}"),
        DataType = request.DataType
    };
}

Frissítse message/function.json és másolja a következő json-kódokat.

{
  "bindings": [
    {
      "type": "webPubSubTrigger",
      "direction": "in",
      "name": "request",
      "hub": "simplechat",
      "eventName": "message",
      "eventType": "user"
    },
    {
      "type": "webPubSub",
      "name": "actions",
      "hub": "simplechat",
      "direction": "out"
    }
  ]
}

Frissítse message/__init__.py és másolja a következő kódokat.

import json

import azure.functions as func


def main(request, actions: func.Out[str]) -> None:
    req_json = json.loads(request)
    actions.set(
        json.dumps(
            {
                "actionName": "sendToAll",
                "data": f'[{req_json["connectionContext"]["userId"]}] {req_json["data"]}',
                "dataType": req_json["dataType"],
            }
        )
    )

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 Serverless Chat App</h1>
    <div id="login"></div>
    <p></p>
    <input id="message" placeholder="Type to chat..." />
    <div id="messages"></div>
    <script>
      (async function () {
        let authenticated = window.location.href.includes(
          "?authenticated=true"
        );
        if (!authenticated) {
          // auth
          let login = document.querySelector("#login");
          let link = document.createElement("a");
          link.href = `${window.location.origin}/.auth/login/aad?post_login_redirect_url=/api/index?authenticated=true`;
          link.text = "login";
          login.appendChild(link);
        } else {
          // negotiate
          let messages = document.querySelector("#messages");
          let res = await fetch(`${window.location.origin}/api/negotiate`, {
            credentials: "include",
          });
          let url = await res.json();
          // connect
          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);
          };
          let message = document.querySelector("#message");
          message.addEventListener("keypress", (e) => {
            if (e.charCode !== 13) return;
            ws.send(message.value);
            message.value = "";
          });
        }
      })();
    </script>
  </body>
</html>

Mivel a C#-projekt egy másik kimeneti mappába fordítja a fájlokat, frissítenie kell a *.csproj tartalmat, hogy a tartalomoldal vele legyen.

<ItemGroup>
    <None Update="index.html">
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </None>
</ItemGroup>

Mivel a C#-projekt egy másik kimeneti mappába fordítja a fájlokat, frissítenie kell a *.csproj tartalmat, hogy a tartalomoldal vele legyen.

<ItemGroup>
    <None Update="index.html">
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </None>
</ItemGroup>

Az Azure-függvényalkalmazás létrehozása és üzembe helyezése

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.

Ha még nem tette meg, jelentkezzen be az Azure-ba:
```
az login
```
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>
```
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
```

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>

Feljegyzé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.

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>

Feljegyzé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.

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime dotnet --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime dotnet-isolated --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime python --runtime-version 3.9 --functions-version 4 --name <FUNCIONAPP_NAME> --os-type linux --storage-account <STORAGE_NAME>

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

Miután sikeresen 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>
```
Konfigurálja a WebPubSubConnectionString függvényalkalmazást:

A cikkben szereplő nyers kapcsolati sztring csak bemutató célokra jelennek meg. Éles környezetben mindig védje a hozzáférési kulcsokat. Az Azure Key Vault használatával biztonságosan kezelheti és elforgathatja a kulcsokat, és biztonságossá teheti a kapcsolatot.WebPubSubServiceClient

Először keresse meg a Web PubSub-erőforrást az Azure Portalon, és másolja ki a kapcsolati sztring a Kulcsok területen. Ezután lépjen a függvényalkalmazás beállításaihoz az Azure Portal -Settings ->>Environment változói között. Adjon hozzá egy új elemet az Alkalmazásbeállítások területen, a név egyenlőWebPubSubConnectionString, az érték pedig a Web PubSub erőforrás kapcsolati sztring.

A Web PubSub szolgáltatás konfigurálása `Event Handler`

Ebben a mintában a szolgáltatás-felsőbb rétegbeli kérések figyelésére szolgálunk WebPubSubTrigger . A Web PubSubnak tehát ismernie kell a függvény végpontadatait a célügyfél-kérelmek küldéséhez. Az Azure-függvényalkalmazáshoz pedig egy rendszerkulcsra van szükség a bővítményspecifikus webhook-metódusok biztonságához. Az előző lépésben, miután üzembe helyeztük a függvényalkalmazást a függvényekkel message , le tudjuk szerezni a rendszerkulcsot.

Lépjen az Azure Portalra – A függvényalkalmazás erőforrásának megkeresése –>Alkalmazáskulcsok –>Rendszerkulcsok –.webpubsub_extension>> Másolja ki az értéket a következőként <APP_KEY>: .

Képernyőkép a függvényrendszerkulcsok lekéréséről.

Beállítás Event Handler az Azure Web PubSub szolgáltatásban. Nyissa meg az Azure Portalt –> Keresse meg a Web PubSub-erőforrást –> Beállítások. Adjon hozzá egy új hubbeállítás-megfeleltetést a használt függvényhez. Cserélje le a <FUNCTIONAPP_NAME> saját és <APP_KEY> a sajátjaira.

Központ neve: simplechat
URL-sablon: https://< FUNCTIONAPP_NAME.azurewebsites.net/runtime/webhooks/webpubsub?code>=<APP_KEY>
Felhasználói eseményminta: *
Rendszeresemények: –(Ebben a mintában nincs szükség konfigurálásra)

Képernyőkép az eseménykezelő beállításáról.

Ügyfél-hitelesítés engedélyezésének konfigurálása

Lépjen az Azure Portalra –> A függvényalkalmazás erőforrásának megkeresése –>Hitelesítés. Kattintson a Add identity provider parancsra. Állítsa be az App Service hitelesítési beállításait hitelesítés nélküli hozzáférés engedélyezésére, hogy az ügyfélindex-oldalt névtelen felhasználók megtekinthessék, mielőtt átirányítanák a hitelesítésre. Ezután mentse a fájlt.

Itt a függvényben negotiate használt x-ms-client-principal-nameuserId azonosító szolgáltatót választjukMicrosoft. Emellett konfigurálhat más identitásszolgáltatókat is a hivatkozások alapján, és ne felejtse el ennek megfelelően frissíteni az userId értéket a függvényben negotiate .

Az alkalmazás kipróbálása

Most már tesztelheti az oldalt a függvényalkalmazásból: https://<FUNCTIONAPP_NAME>.azurewebsites.net/api/index. Tekintse meg a pillanatképet.

Kattintson login a hitelesítéshez.
Írja be az üzenetet a beviteli mezőbe a csevegéshez.

Az üzenetfüggvényben a hívó üzenetét továbbítjuk az összes ügyfélnek, és üzenettel [SYSTEM] ackküldjük vissza a hívót. Így a csevegési mintaképből tudjuk, hogy az első négy üzenet az aktuális ügyféltől, az utolsó két üzenet pedig egy másik ügyféltől származik.

Képernyőkép a csevegési mintáról.

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

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:

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 ehelyett a neve alapján keresheti meg az erőforráscsoportot.
A megnyíló ablakban jelölje ki az erőforráscsoportot, majd válassza az Erőforráscsoport törlése lehetőséget.
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.

Következő 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.

Azure Web PubSub-kötések az Azure Functionshez

Rövid útmutató: Egyszerű csevegőszoba létrehozása az Azure Web PubSub használatával

További Azure Web PubSub-minták felfedezése

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

Oktatóanyag: Kiszolgáló nélküli valós idejű csevegőalkalmazás létrehozása az Azure Functions és az Azure Web PubSub szolgáltatással

Előfeltételek

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

A függvények létrehozása

Az Azure-függvényalkalmazás létrehozása és üzembe helyezése

A Web PubSub szolgáltatás konfigurálása `Event Handler`

Ügyfél-hitelesítés engedélyezésének konfigurálása

Az alkalmazás kipróbálása

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

Következő lépések

Visszajelzés

További források

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

Oktatóanyag: Kiszolgáló nélküli valós idejű csevegőalkalmazás létrehozása az Azure Functions és az Azure Web PubSub szolgáltatással

Előfeltételek

Bejelentkezés az Azure-ba

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

A függvények létrehozása

Az Azure-függvényalkalmazás létrehozása és üzembe helyezése

A Web PubSub szolgáltatás konfigurálása Event Handler

Ügyfél-hitelesítés engedélyezésének konfigurálása

Az alkalmazás kipróbálása

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

Következő lépések

Visszajelzés

További források

A Web PubSub szolgáltatás konfigurálása `Event Handler`