Zelfstudie: Een chat-app maken met de Azure Web PubSub-service

In de zelfstudie Berichten publiceren en abonneren leert u de basisprincipes van het publiceren en abonneren van berichten met Azure Web PubSub. In deze zelfstudie leert u het gebeurtenissysteem van Azure Web PubSub en gebruikt u dit om een volledige webtoepassing te bouwen met realtime communicatiefunctionaliteit.

In deze zelfstudie leert u het volgende:

Een Web PubSub-service-exemplaar maken
Instellingen voor gebeurtenis-handler configureren voor Azure Web PubSub
Gebeurtenissen in de app-server afhandelen en een realtime chat-app bouwen

Als u geen Azure-account hebt, maak dan een gratis account aan voordat u begint.

Vereisten

Gebruik de Bash-omgeving in Azure Cloud Shell. Zie Aan de slag met Azure Cloud Shell voor meer informatie.
Installeer de Azure CLI, indien gewenst, om CLI-referentieopdrachten uit te voeren. Als u in Windows of macOS werkt, kunt u Azure CLI uitvoeren in een Docker-container. Zie De Azure CLI uitvoeren in een Docker-container voor meer informatie.
- Als u een lokale installatie gebruikt, meldt u zich aan bij Azure CLI met behulp van de opdracht az login. Volg de stappen die worden weergegeven in de terminal, om het verificatieproces te voltooien. Zie Verifiëren bij Azure met behulp van Azure CLI voor andere aanmeldingsopties.
- Installeer de Azure CLI-extensie bij het eerste gebruik, wanneer u hierom wordt gevraagd. Zie Extensies gebruiken en beheren met de Azure CLIvoor meer informatie over extensies.
- Voer az version uit om de geïnstalleerde versie en afhankelijke bibliotheken te vinden. Voer az upgrade uit om te upgraden naar de nieuwste versie.

Voor deze installatie is versie 2.22.0 of hoger van de Azure CLI vereist. Als u Azure Cloud Shell gebruikt, is de nieuwste versie al geïnstalleerd.

Een Azure Web PubSub-exemplaar maken

Een brongroep maken

Een resourcegroep is een logische container waarin Azure-resources worden geïmplementeerd en beheerd. Gebruik de opdracht az group create om een resourcegroep te maken met de naam myResourceGroup op de eastus locatie.

az group create --name myResourceGroup --location EastUS

Een Web PubSub-exemplaar maken

Voer az extension add uit om de webpubsub-extensie te installeren of bij te werken naar de huidige versie.

az extension add --upgrade --name webpubsub

Gebruik de Azure CLI-opdracht az webpubsub create om een Web PubSub te maken in de resourcegroep die u hebt gemaakt. Met de volgende opdracht maakt u een gratis Web PubSub-resource in de resourcegroep myResourceGroup in EastUS:

Belangrijk

Elke Web PubSub-resource moet een unieke naam hebben. Vervang <uw unieke resourcenaam> door de naam van uw Web PubSub in de volgende voorbeelden.

az webpubsub create --name "<your-unique-resource-name>" --resource-group "myResourceGroup" --location "EastUS" --sku Free_F1

In de uitvoer van deze opdracht ziet u eigenschappen van de zojuist gemaakte resource. Let op de onderstaande twee eigenschappen:

Resourcenaam: de naam die u hebt opgegeven voor de --name bovenstaande parameter.
hostName: In het voorbeeld is <your-unique-resource-name>.webpubsub.azure.com/de hostnaam .

Op dit moment is uw Azure-account de enige die gemachtigd is om bewerkingen uit te voeren op deze nieuwe resource.

ConnectionString ophalen voor toekomstig gebruik

Belangrijk

Ruwe verbindingsstrings worden in dit artikel alleen weergegeven voor demonstratiedoeleinden.

Een verbindingsreeks bevat de autorisatie-informatie die je applicatie nodig heeft om toegang te krijgen tot de Azure Web PubSub-service. De toegangssleutel in de verbindingsreeks fungeert als een rootwachtwoord voor je dienst. Beveilig uw toegangssleutels altijd in productieomgevingen. Gebruik Azure Key Vault om uw sleutels veilig te beheren en te roteren en uw verbinding te beveiligen.WebPubSubServiceClient

Vermijd het distribueren van toegangssleutels naar andere gebruikers, het coderen ervan of het opslaan van ze ergens in tekst zonder opmaak die toegankelijk is voor anderen. Draai uw sleutels als u denkt dat ze mogelijk zijn aangetast.

Gebruik de azure CLI az webpubsub key command om de ConnectionString van de service op te halen. Vervang de <your-unique-resource-name> plaatsaanduiding door de naam van uw Azure Web PubSub-instantie.

az webpubsub key show --resource-group myResourceGroup --name <your-unique-resource-name> --query primaryConnectionString --output tsv

Kopieer de verbindingsreeks om later te gebruiken.

Kopieer de opgehaalde ConnectionString en stel deze in als omgevingsvariabele WebPubSubConnectionString, die later in de tutorial wordt gebruikt. Vervang <connection-string> hieronder door de ConnectionString die u hebt opgehaald.

export WebPubSubConnectionString="<connection-string>"

SET WebPubSubConnectionString=<connection-string>

Het project instellen

Vereisten

ASP.NET Core 8

De toepassing maken

In Azure Web PubSub zijn er twee functies, server en client. Dit concept is vergelijkbaar met de server- en clientrollen in een webtoepassing. Server is verantwoordelijk voor het beheren van de clients, luisteren en reageren op clientberichten. De client is verantwoordelijk voor het verzenden en ontvangen van berichten van de gebruiker van de server en visualiseert deze voor de eindgebruiker.

In deze zelfstudie bouwen we een realtime-webtoepassing voor chats. In een echte webtoepassing omvat de verantwoordelijkheid van de server ook het verifiëren van clients en het leveren van statische webpagina's voor de gebruikersinterface van de toepassing.

We gebruiken ASP.NET Core 8 om de webpagina's te hosten en binnenkomende aanvragen te verwerken.

Laten we eerst een ASP.NET Core-web-app maken in een chatapp map.

Maak een nieuwe web-app.

mkdir chatapp
cd chatapp
dotnet new web

Voeg Program.cs toe app.UseStaticFiles() ter ondersteuning van het hosten van statische webpagina's.

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.UseStaticFiles();

app.Run();

Maak een HTML-bestand en sla het op als wwwroot/index.html, we gebruiken het voor de gebruikersinterface van de chat-app later.
```
<html>
  <body>
    <h1>Azure Web PubSub Chat</h1>
  </body>
</html>
```

U kunt de server testen door dotnet run --urls http://localhost:8080 uit te voeren en http://localhost:8080/index.html in de browser te openen.

We gebruiken express.js, een populair webframework voor Node.js om de webpagina's te hosten en binnenkomende aanvragen af te handelen.

Eerst gaan we een express-web-app maken in een chatapp map.

Express.js installeren

mkdir chatapp
cd chatapp
npm init -y
npm install --save express

Maak vervolgens een express-server en sla deze op als server.js

const express = require('express');

const app = express();
app.use(express.static('public'));
app.listen(8080, () => console.log('server started'));

Maak ook een HTML-bestand en sla het op als public/index.html, we gebruiken het voor de gebruikersinterface van de chat-app later.
```
<html>

<body>
  <h1>Azure Web PubSub Chat</h1>
</body>

</html>
```

U kunt de server testen door node server uit te voeren en http://localhost:8080 in de browser te openen.

We gebruiken het Javalin-webframework om de webpagina's te hosten en binnenkomende aanvragen af te handelen.

Gebruik Maven om een nieuwe app webpubsub-tutorial-chat te maken en ga vervolgens naar de map webpubsub-tutorial-chat:

mvn archetype:generate --define interactiveMode=n --define groupId=com.webpubsub.tutorial --define artifactId=webpubsub-tutorial-chat --define archetypeArtifactId=maven-archetype-quickstart --define archetypeVersion=1.4
cd webpubsub-tutorial-chat

Voeg de afhankelijkheid van het javalin webframework toe aan het dependencies knooppunt van pom.xml:

javalin: eenvoudig webframework voor Java
slf4j-simple: Logger voor Java

<!-- https://mvnrepository.com/artifact/io.javalin/javalin -->
<dependency>
    <groupId>io.javalin</groupId>
    <artifactId>javalin</artifactId>
    <version>6.1.3</version>
</dependency>

<!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-simple -->
<dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-simple</artifactId>
    <version>2.0.12</version>
</dependency>

Navigeer naar de map /src/main/java/com/webpubsub/tutorial. Open het bestand App.java in de editor. Gebruik Javalin.create om statische bestanden te serveren:

package com.webpubsub.tutorial;

import io.javalin.Javalin;

public class App {
    public static void main(String[] args) {
        // start a server
        Javalin app = Javalin.create(config -> {
            config.staticFiles.add("public");
        }).start(8080);
    }
}

Afhankelijk van uw installatie moet u mogelijk het taalniveau expliciet instellen op Java 8. Deze stap kan worden uitgevoerd in de pom.xml. Voeg het volgende codefragment toe:

<build>
    <plugins>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
          <configuration>
            <source>1.8</source>
            <target>1.8</target>
          </configuration>
        </plugin>
    </plugins>
</build>

Maak een HTML-bestand en sla het op in /src/main/resources/public/index.html. We gebruiken deze later voor de gebruikersinterface van de chat-app.
```
<html>
<body>
  <h1>Azure Web PubSub Chat</h1>
</body>

</html>
```

U kunt de server testen door de volgende opdracht uit te voeren in de map die het bestand pom.xml bevat, en vervolgens http://localhost:8080 in de browser te openen.

mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.tutorial.App" -Dexec.cleanupDaemonThreads=false

We gebruiken Flask, een populair webframework voor Python om deze taak te bereiken.

Maak eerst een projectmap chatapp met Flask gereed.

De omgeving maken en activeren

mkdir chatapp
cd chatapp
python3 -m venv .venv
. .venv/bin/activate

Installeer Flask in de geactiveerde omgeving
```
pip install Flask
```

Maak vervolgens een Flask-server en sla deze op als server.py

from flask import (
    Flask, 
    send_from_directory,
)

app = Flask(__name__)

@app.route('/<path:filename>')
def index(filename):
    return send_from_directory('public', filename)

if __name__ == '__main__':
    app.run(port=8080)

Maak ook een HTML-bestand en sla het op als public/index.html, we gebruiken het voor de gebruikersinterface van de chat-app later.
```
<html>

<body>
  <h1>Azure Web PubSub Chat</h1>
</body>

</html>
```

U kunt de server testen door python server.py uit te voeren en http://127.0.0.1:8080/index.html in de browser te openen.

Onderhandelingseindpunt toevoegen

In de zelfstudie Berichten publiceren en erop abonneren gebruikt de abonnee de verbindingsreeks rechtstreeks. In een echte toepassing is het niet veilig om de verbindingsreeks te delen met een client, omdat verbindingsreeks hoge bevoegdheden heeft om bewerkingen voor de service uit te voeren. Laten we nu uw server de verbindingsreeks laten gebruiken en een negotiate eindpunt beschikbaar maken voor de client om de volledige URL met toegangstoken op te halen. Op deze manier kan de server verificatie-middleware toevoegen vóór het negotiate eindpunt om onbevoegde toegang te voorkomen.

Installeer eerst de afhankelijkheden.

dotnet add package Microsoft.Azure.WebPubSub.AspNetCore

Laten we nu een /negotiate-eindpunt toevoegen dat de clienttoepassing kan aanroepen om het token te laten genereren.

using Azure.Core;
using Microsoft.Azure.WebPubSub.AspNetCore;
using Microsoft.Azure.WebPubSub.Common;
using Microsoft.Extensions.Primitives;

// Read connection string from environment
var connectionString = Environment.GetEnvironmentVariable("WebPubSubConnectionString");
if (connectionString == null)
{
    throw new ArgumentNullException(nameof(connectionString));
}

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddWebPubSub(o => o.ServiceEndpoint = new WebPubSubServiceEndpoint(connectionString))
    .AddWebPubSubServiceClient<Sample_ChatApp>();
var app = builder.Build();

app.UseStaticFiles();

// return the Client Access URL with negotiate endpoint
app.MapGet("/negotiate", (WebPubSubServiceClient<Sample_ChatApp> service, HttpContext context) =>
{
    var id = context.Request.Query["id"];
    if (StringValues.IsNullOrEmpty(id))
    {
        context.Response.StatusCode = 400;
        return null;
    }
    return new
    {
        url = service.GetClientAccessUri(userId: id).AbsoluteUri
    };
});
app.Run();

sealed class Sample_ChatApp : WebPubSubHub
{
}

AddWebPubSubServiceClient<THub>() wordt gebruikt om de serviceclient WebPubSubServiceClient<THub>te injecteren, waarmee we in de onderhandelingsstap een clientverbindingstoken en in hubmethoden kunnen genereren om service REST API's aan te roepen wanneer hubgebeurtenissen worden geactiveerd. Deze code voor het genereren van tokens is vergelijkbaar met de code die we hebben gebruikt in de zelfstudie voor het publiceren en abonneren van berichten, behalve dat we nog één argument (userId) doorgeven bij het genereren van het token. Gebruikers-id kan worden gebruikt om de identiteit van de client te identificeren, dus wanneer u een bericht ontvangt waarvan u weet waar het bericht vandaan komt.

De code leest verbindingsreeks uit de omgevingsvariabele WebPubSubConnectionString die we in de vorige stap hebben ingesteld.

Voer de server opnieuw uit met behulp van dotnet run --urls http://localhost:8080.

Installeer eerst de Azure Web PubSub SDK:

npm install --save @azure/web-pubsub

We gaan nu een /negotiate API toevoegen om het token te genereren.

const express = require('express');
const { WebPubSubServiceClient } = require('@azure/web-pubsub');

const app = express();
const hubName = 'Sample_ChatApp';

let serviceClient = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hubName);

app.get('/negotiate', async (req, res) => {
    let id = req.query.id;
    if (!id) {
    res.status(400).send('missing user id');
    return;
    }
    let token = await serviceClient.getClientAccessToken({ userId: id });
    res.json({
    url: token.url
    });
});

app.use(express.static('public'));
app.listen(8080, () => console.log('server started'));

Deze code voor het genereren van tokens is vergelijkbaar met de code die we hebben gebruikt in de zelfstudie voor het publiceren en abonneren van berichten, behalve dat we nog één argument (userId) doorgeven bij het genereren van het token. Gebruikers-id kan worden gebruikt om de identiteit van de client te identificeren, dus wanneer u een bericht ontvangt waarvan u weet waar het bericht vandaan komt.

De code leest verbindingsreeks uit de omgevingsvariabele WebPubSubConnectionString die we in de vorige stap hebben ingesteld.

Voer de server opnieuw uit door uit te voeren node server.

Voeg eerst de SDK-afhankelijkheid voor Azure Web PubSub en gson toe aan de dependencies-node van pom.xml:

<!-- https://mvnrepository.com/artifact/com.azure/azure-messaging-webpubsub -->
<dependency>
    <groupId>com.azure</groupId>
    <artifactId>azure-messaging-webpubsub</artifactId>
    <version>1.2.12</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.10.1</version>
</dependency>

We gaan nu een /negotiate API toevoegen aan het App.java bestand om het token te genereren:

package com.webpubsub.tutorial;
    
import com.azure.messaging.webpubsub.WebPubSubServiceClient;
import com.azure.messaging.webpubsub.WebPubSubServiceClientBuilder;
import com.azure.messaging.webpubsub.models.GetClientAccessTokenOptions;
import com.azure.messaging.webpubsub.models.WebPubSubClientAccessToken;
import com.azure.messaging.webpubsub.models.WebPubSubContentType;
import com.google.gson.Gson;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
import io.javalin.Javalin;

public class App {
    public static void main(String[] args) {
        String connectionString = System.getenv("WebPubSubConnectionString");

        if (connectionString == null) {
            System.out.println("Please set the environment variable WebPubSubConnectionString");
            return;
        }

        // create the service client
        WebPubSubServiceClient service = new WebPubSubServiceClientBuilder()
                .connectionString(connectionString)
                .hub("Sample_ChatApp")
                .buildClient();

        // start a server
        Javalin app = Javalin.create(config -> {
            config.staticFiles.add("public");
        }).start(8080);
        
        // Handle the negotiate request and return the token to the client
        app.get("/negotiate", ctx -> {
            String id = ctx.queryParam("id");
            if (id == null) {
                ctx.status(400);
                ctx.result("missing user id");
                return;
            }
            GetClientAccessTokenOptions option = new GetClientAccessTokenOptions();
            option.setUserId(id);
            WebPubSubClientAccessToken token = service.getClientAccessToken(option);
            ctx.contentType("application/json");
            Gson gson = new Gson();
            JsonObject jsonObject = new JsonObject();
            jsonObject.addProperty("url", token.getUrl());
            String response = gson.toJson(jsonObject);
            ctx.result(response);
            return;
        });
    }
}

Deze code voor het genereren van tokens is vergelijkbaar met de code die we hebben gebruikt in de zelfstudie voor het publiceren en abonneren van berichten, behalve dat we methode aanroepen setUserId om de gebruikers-id in te stellen bij het genereren van het token. Gebruikers-id kan worden gebruikt om de identiteit van de client te identificeren, dus wanneer u een bericht ontvangt waarvan u weet waar het bericht vandaan komt.

De code leest verbindingsreeks uit de omgevingsvariabele WebPubSubConnectionString die we in de vorige stap hebben ingesteld.

Voer de server opnieuw uit met behulp van de volgende opdrachten:

mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.tutorial.App" -Dexec.cleanupDaemonThreads=false

Installeer eerst de Azure Web PubSub SDK.

pip install azure-messaging-webpubsubservice

We gaan nu een /negotiate API toevoegen aan de server om het token te genereren.

import os

from flask import (
    Flask, 
    request, 
    send_from_directory,
)

from azure.messaging.webpubsubservice import (
    WebPubSubServiceClient
)

hub_name = 'Sample_ChatApp'
connection_string = os.environ.get('WebPubSubConnectionString')

app = Flask(__name__)
service = WebPubSubServiceClient.from_connection_string(connection_string, hub=hub_name)

@app.route('/<path:filename>')
def index(filename):
    return send_from_directory('public', filename)


@app.route('/negotiate')
def negotiate():
    id = request.args.get('id')
    if not id:
        return 'missing user id', 400

    token = service.get_client_access_token(user_id=id)
    return {
        'url': token['url']
    }, 200

if __name__ == '__main__':
    app.run(port=8080)

Deze code voor het genereren van tokens is vergelijkbaar met de code die we hebben gebruikt in de zelfstudie voor het publiceren en abonneren van berichten, behalve dat we nog één argument (user_id) doorgeven bij het genereren van het token. Gebruikers-id kan worden gebruikt om de identiteit van de client te identificeren, dus wanneer u een bericht ontvangt waarvan u weet waar het bericht vandaan komt.

De code leest verbindingsreeks uit de omgevingsvariabele WebPubSubConnectionString die we in de vorige stap hebben ingesteld.

Voer de server opnieuw uit met behulp van python server.py.

U kunt deze API testen door toegang te krijgen http://localhost:8080/negotiate?id=user1 en u krijgt de volledige URL van de Azure Web PubSub met een toegangstoken.

Gebeurtenissen afhandelen

Wanneer er in Azure Web PubSub bepaalde activiteiten plaatsvinden aan de clientzijde (bijvoorbeeld wanneer een client verbinding maakt, verbonden, verbroken of een client berichten verzendt), verzendt de service meldingen naar de server, zodat deze op deze gebeurtenissen kan reageren.

Gebeurtenissen worden geleverd aan de server in de vorm van Webhook. De webhook wordt gehost en beschikbaar gesteld door de applicatieserver en geregistreerd bij de Azure Web PubSub-service. De service roept de webhooks aan wanneer er een gebeurtenis plaatsvindt.

Azure Web PubSub volgt CloudEvents om de gebeurtenisgegevens te beschrijven.

Hieronder verwerken connected we systeem gebeurtenissen wanneer een client is verbonden en verwerken message gebruikers gebeurtenissen wanneer een client berichten verzendt om de chat-app te bouwen.

De Web PubSub SDK voor AspNetCore Microsoft.Azure.WebPubSub.AspNetCore die we in de vorige stap hebben geïnstalleerd, kan ook helpen bij het parseren en verwerken van de CloudEvents-aanvragen.

Voeg eerst gebeurtenisafhandelaars toe vóór app.Run(). Geef het eindpuntpad voor de gebeurtenissen op, laten we zeggen /eventhandler.

app.MapWebPubSubHub<Sample_ChatApp>("/eventhandler/{*path}");
app.Run();

Voeg nu in de klasse Sample_ChatApp die we in de vorige stap hebben gemaakt, een constructor toe om mee WebPubSubServiceClient<Sample_ChatApp> te werken dat we gebruiken om de Web PubSub-service aan te roepen. En OnConnectedAsync() om te reageren wanneer connected een gebeurtenis wordt geactiveerd, OnMessageReceivedAsync() om berichten van de client te verwerken.

sealed class Sample_ChatApp : WebPubSubHub
{
    private readonly WebPubSubServiceClient<Sample_ChatApp> _serviceClient;

    public Sample_ChatApp(WebPubSubServiceClient<Sample_ChatApp> serviceClient)
    {
        _serviceClient = serviceClient;
    }

    public override async Task OnConnectedAsync(ConnectedEventRequest request)
    {
        Console.WriteLine($"[SYSTEM] {request.ConnectionContext.UserId} joined.");
    }

    public override async ValueTask<UserEventResponse> OnMessageReceivedAsync(UserEventRequest request, CancellationToken cancellationToken)
    {
        await _serviceClient.SendToAllAsync(RequestContent.Create(
        new
        {
            from = request.ConnectionContext.UserId,
            message = request.Data.ToString()
        }),
        ContentType.ApplicationJson);

        return new UserEventResponse();
    }
}

In de bovenstaande code gebruiken we de serviceclient om een meldingsbericht in JSON-indeling te verzenden naar iedereen die zich heeft aangesloten met SendToAllAsync.

Web PubSub SDK voor express @azure/web-pubsub-express helpt bij het parseren en verwerken van de CloudEvents-aanvragen.

npm install --save @azure/web-pubsub-express

Werk server.js bij met de volgende code om een REST API beschikbaar te maken op /eventhandler (dat wordt gedaan door de express middleware van Web PubSub SDK) om de verbonden clientgebeurtenis af te handelen:

const express = require("express");
const { WebPubSubServiceClient } = require("@azure/web-pubsub");
const { WebPubSubEventHandler } = require("@azure/web-pubsub-express");

const app = express();
const hubName = "Sample_ChatApp";

let serviceClient = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hubName);

let handler = new WebPubSubEventHandler(hubName, {
  path: "/eventhandler",
  onConnected: async (req) => {
    console.log(`${req.context.userId} connected`);
  },
  handleUserEvent: async (req, res) => {
    if (req.context.eventName === "message")
      await serviceClient.sendToAll({
        from: req.context.userId,
        message: req.data,
      });
    res.success();
  },
});
app.get("/negotiate", async (req, res) => {
  let id = req.query.id;
  if (!id) {
    res.status(400).send("missing user id");
    return;
  }
  let token = await serviceClient.getClientAccessToken({ userId: id });
  res.json({
    url: token.url,
  });
});

app.use(express.static("public"));
app.use(handler.getMiddleware());

app.listen(8080, () => console.log("server started"));

In de bovenstaande code onConnected drukt u eenvoudig een bericht af naar de console wanneer een client is verbonden. U kunt zien dat we gebruiken req.context.userId , zodat we de identiteit van de verbonden client kunnen zien. En handleUserEvent wordt aangeroepen wanneer een client een bericht verzendt. Het gebruikt WebPubSubServiceClient.sendToAll() om het bericht als JSON-object naar alle clients uit te zenden. U kunt ook een object zien handleUserEvent waarin u een res bericht kunt terugsturen naar de afzender van de gebeurtenis. Hier roepen res.success() we gewoon aan om de WebHook 200 terug te geven (let op: deze aanroep is vereist, zelfs als u niets terug wilt retourneren naar de client, anders retourneert de WebHook nooit en sluit de clientverbinding).

Voorlopig moet u de gebeurtenis-handler zelf implementeren in Java. De stappen volgen direct de protocolspecificatie en worden geïllustreerd in de onderstaande lijst:

Voeg een HTTP-handler toe voor het eventhandlerpad, bijvoorbeeld /eventhandler.
Eerst willen we de OPTIONS-verzoeken voor beveiliging tegen misbruik afhandelen, controleren we of de header WebHook-Request-Origin bevat en sturen we de header WebHook-Allowed-Origin terug. Om het voor demonstratiedoeleinden eenvoudig te houden, retourneren we * om alle origins toe te staan.
```
// validation: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#protection
app.options("/eventhandler", ctx -> {
    ctx.header("WebHook-Allowed-Origin", "*");
});
```
Vervolgens willen we controleren of de binnenkomende aanvragen de gebeurtenissen zijn die we verwachten. Stel dat we ons nu zorgen maken over de systeem connected gebeurtenis, die de header ce-type moet bevatten als azure.webpubsub.sys.connected. We voegen de logica toe na misbruikbeveiliging om de verbonden gebeurtenis uit te zenden naar alle clients, zodat ze kunnen zien wie lid is van de chatruimte.
```
// validation: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#protection
app.options("/eventhandler", ctx -> {
    ctx.header("WebHook-Allowed-Origin", "*");
});

// handle events: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#events
app.post("/eventhandler", ctx -> {
    String event = ctx.header("ce-type");
    if ("azure.webpubsub.sys.connected".equals(event)) {
        String id = ctx.header("ce-userId");
        System.out.println(id + " connected.");
    }
    ctx.status(200);
});
```
In de bovenstaande code drukken we gewoon een bericht af naar de console wanneer een client is verbonden. U kunt zien dat we gebruiken ctx.header("ce-userId") , zodat we de identiteit van de verbonden client kunnen zien.

De ce-type van gebeurtenis message is altijd azure.webpubsub.user.message. Details zien gebeurtenisbericht. We werken de logica bij om berichten te verwerken die wanneer een bericht binnenkomt, het bericht uitzenden in JSON-indeling naar alle verbonden clients.

// handle events: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#events
app.post("/eventhandler", ctx -> {
    String event = ctx.header("ce-type");
    if ("azure.webpubsub.sys.connected".equals(event)) {
        String id = ctx.header("ce-userId");
        System.out.println(id + " connected.");
    } else if ("azure.webpubsub.user.message".equals(event)) {
        String id = ctx.header("ce-userId");
        String message = ctx.body();
        Gson gson = new Gson();
        JsonObject jsonObject = new JsonObject();
        jsonObject.addProperty("from", id);
        jsonObject.addProperty("message", message);
        String messageToSend = gson.toJson(jsonObject);
        service.sendToAll(messageToSend, WebPubSubContentType.APPLICATION_JSON);
    }
    ctx.status(200);
});

Voorlopig moet u de gebeurtenis-handler zelf implementeren in Python. De stappen volgen direct de protocolspecificatie en worden geïllustreerd in de onderstaande lijst:

Voeg een HTTP-handler toe voor het pad van de gebeurtenishandler, bijvoorbeeld /eventhandler.

Eerst willen we de OPTIONS-verzoeken voor misbruikbeveiliging afhandelen. We controleren of de header WebHook-Request-Origin bevat en sturen de header WebHook-Allowed-Origin terug. Om het voor demonstratiedoeleinden eenvoudig te houden, retourneren we * om alle origins toe te staan.

# validation: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#protection
@app.route('/eventhandler', methods=['OPTIONS'])
def handle_event():
    if request.method == 'OPTIONS':
        if request.headers.get('WebHook-Request-Origin'):
            res = Response()
            res.headers['WebHook-Allowed-Origin'] = '*'
            res.status_code = 200
            return res

Vervolgens willen we controleren of de binnenkomende aanvragen de gebeurtenissen zijn die we verwachten. Stel dat we ons nu zorgen maken over de systeem connected gebeurtenis, die de header ce-type moet bevatten als azure.webpubsub.sys.connected. We voegen de logica toe na de beveiliging tegen misbruik:

# validation: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#protection
# handle events: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#events
@app.route('/eventhandler', methods=['POST', 'OPTIONS'])
def handle_event():
    if request.method == 'OPTIONS':
        if request.headers.get('WebHook-Request-Origin'):
            res = Response()
            res.headers['WebHook-Allowed-Origin'] = '*'
            res.status_code = 200
            return res
    elif request.method == 'POST':
        user_id = request.headers.get('ce-userid')
        if request.headers.get('ce-type') == 'azure.webpubsub.sys.connected':
            return user_id + ' connected', 200
        else:
            return 'Not found', 404

In de bovenstaande code drukken we gewoon een bericht af naar de console wanneer een client is verbonden. U kunt zien dat we gebruiken request.headers.get('ce-userid') , zodat we de identiteit van de verbonden client kunnen zien.

De ce-type van de gebeurtenis message is altijd azure.webpubsub.user.message. Details zien gebeurtenisbericht. We werken de logica bij om berichten te verwerken die wanneer een bericht binnenkomt, het bericht uitzenden naar alle verbonden clients.

@app.route('/eventhandler', methods=['POST', 'OPTIONS'])
def handle_event():
    if request.method == 'OPTIONS':
        if request.headers.get('WebHook-Request-Origin'):
            res = Response()
            res.headers['WebHook-Allowed-Origin'] = '*'
            res.status_code = 200
            return res
    elif request.method == 'POST':
        user_id = request.headers.get('ce-userid')
        type = request.headers.get('ce-type')
        if type == 'azure.webpubsub.sys.connected':
            print(f"{user_id} connected")
            return '', 204
        elif type == 'azure.webpubsub.user.message':
            # default uses JSON
            service.send_to_all(message={
                'from': user_id,
                'message': request.data.decode('UTF-8')
            })
            # returned message is also received by the client
            return {
                'from': "system",
                'message': "message handled by server"
            }, 200
        else:
            return 'Bad Request', 400

De webpagina bijwerken

Nu gaan we bijwerken index.html om de logica toe te voegen om verbinding te maken, bericht te verzenden en ontvangen berichten weer te geven op de pagina.

<html>
  <body>
    <h1>Azure Web PubSub Chat</h1>
    <input id="message" placeholder="Type to chat...">
    <div id="messages"></div>
    <script>
      (async function () {
        let id = prompt('Please input your user name');
        let res = await fetch(`/negotiate?id=${id}`);
        let data = await res.json();
        let ws = new WebSocket(data.url);
        ws.onopen = () => console.log('connected');

        let messages = document.querySelector('#messages');
        
        ws.onmessage = event => {
          let m = document.createElement('p');
          let data = JSON.parse(event.data);
          m.innerText = `[${data.type || ''}${data.from || ''}] ${data.message}`;
          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>

U kunt in de bovenstaande code zien dat we verbinding maken met behulp van de systeemeigen WebSocket-API in de browser en gebruiken WebSocket.send() om berichten te verzenden en WebSocket.onmessage te luisteren naar ontvangen berichten.

U kunt ook client-SDK's gebruiken om verbinding te maken met de service, zodat u automatisch opnieuw verbinding kunt maken, foutafhandeling en meer.

Er is nu nog één stap over om de chat te laten werken. Laten we configureren welke gebeurtenissen voor ons van belang zijn en waar de gebeurtenissen naartoe moeten worden verzonden in de Web PubSub-service.

De eventhandler instellen

We stellen de gebeurtenis-handler in de Web PubSub-service in om de service te laten weten waar de gebeurtenissen naartoe moeten worden verzonden.

Wanneer de webserver lokaal wordt uitgevoerd, hoe de Web PubSub-service de localhost aanroept als deze geen eindpunt heeft dat toegankelijk is voor internet? Er zijn meestal twee manieren. De ene is om localhost openbaar te maken met behulp van een algemeen tunnelhulpprogramma en de andere is om awps-tunnel te gebruiken om het verkeer van de Web PubSub-service via het hulpprogramma naar uw lokale server te tunnelen.

In deze sectie gebruiken we Azure CLI om de gebeurtenis-handlers in te stellen en awps-tunnel te gebruiken om verkeer naar localhost te routeren.

Hubinstellingen configureren

We stellen de URL-sjabloon zo in dat deze het schema tunnel gebruikt, zodat Web PubSub berichten via de tunnelverbinding van awps-tunnel routeert. Gebeurtenis-handlers kunnen worden ingesteld vanuit de portal of de CLI, zoals beschreven in dit artikel. Hier stellen we deze in via CLI. Omdat we gebeurtenissen opvangen op het pad /eventhandler, zoals ingesteld in de vorige stap, stellen we de URL-sjabloon in op tunnel:///eventhandler.

Gebruik de azure CLI az webpubsub hub create command om de instellingen voor de gebeurtenis-handler voor de Sample_ChatApp hub te maken.

Belangrijk

Vervang <uw unieke resourcenaam door de naam van uw Web PubSub-resource> die u in de vorige stappen hebt gemaakt.

az webpubsub hub create -n "<your-unique-resource-name>" -g "myResourceGroup" --hub-name "Sample_ChatApp" --event-handler url-template="tunnel:///eventhandler" user-event-pattern="*" system-event="connected"

Awps-tunnel lokaal uitvoeren

Awps-tunnel downloaden en installeren

Het hulpprogramma wordt uitgevoerd op Node.js versie 16 of hoger.

npm install -g @azure/web-pubsub-tunnel-tool

Gebruik de verbindingsreeks van de service en voer uit

export WebPubSubConnectionString="<your connection string>"
awps-tunnel run --hub Sample_ChatApp --upstream http://localhost:8080

De webserver uitvoeren

Nu is alles ingesteld. Laten we de webserver starten en de chat-app in werking zien.

Voer nu de server uit met behulp van dotnet run --urls http://localhost:8080.

Het volledige codevoorbeeld van deze tutorial vindt u hier.

Voer nu de server uit met behulp van de onderstaande opdracht:

mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.tutorial.App" -Dexec.cleanupDaemonThreads=false

Het volledige codevoorbeeld van deze tutorial is hier te vinden.

Open http://localhost:8080/index.html. U kunt uw gebruikersnaam invoeren en chatten.

Uitgestelde authenticatie met `connect` gebeurtenishandler

In de vorige secties laten we zien hoe u een onderhandelingseindpunt gebruikt om de URL van de Web PubSub-service en het JWT-toegangstoken te retourneren voor de clients om verbinding te maken met de Web PubSub-service. In sommige gevallen, bijvoorbeeld edge-apparaten met beperkte resources, kunnen clients de voorkeur geven aan directe verbinding met Web PubSub-resources. In dergelijke gevallen kunt u de connect-gebeurtenishandler configureren om uitgestelde authenticatie voor de clients uit te voeren, een gebruikers-ID aan de clients toe te wijzen, de groepen op te geven waar de clients zich bij aansluiten zodra ze verbinding maken, de machtigingen te configureren die de clients hebben, en het WebSocket-subprotocol op te geven in het WebSocket-antwoord aan de client, enzovoort. Raadpleeg de specificatie van de gebeurtenishandler voor verbinding maken voor meer informatie.

We gaan nu de gebeurtenis-handler gebruiken connect om hetzelfde te bereiken als wat de sectie onderhandelen doet.

Hubinstellingen bijwerken

Eerst gaan we hubinstellingen bijwerken om ook gebeurtenis-handler op te nemen connect . We moeten ook anonieme verbinding toestaan, zodat clients zonder JWT-toegangstoken verbinding kunnen maken met de service.

Gebruik de Azure CLI-opdracht az webpubsub hub update om de instellingen voor gebeurtenisafhandeling voor de hub Sample_ChatApp te maken.

Belangrijk

Vervang <uw unieke resourcenaam door de naam van uw Web PubSub-resource> die u in de vorige stappen hebt gemaakt.

az webpubsub hub update -n "<your-unique-resource-name>" -g "myResourceGroup" --hub-name "Sample_ChatApp" --allow-anonymous true --event-handler url-template="tunnel:///eventhandler" user-event-pattern="*" system-event="connected" system-event="connect"

Upstream-logica bijwerken om verbindingsgebeurtenissen te verwerken

Nu gaan we upstreamlogica bijwerken om verbindingsevenementen af te handelen. We kunnen nu ook het onderhandelingseindpunt verwijderen.

Net zoals we voor demonstratiedoeleinden in het onderhandelingsendpoint doen, lezen we ook de ID uit de queryparameters. In een verbindingsgebeurtenis blijft de oorspronkelijke clientquery behouden in de hoofdtekst van de aanvraag voor de verbindingsgebeurtenis.

Overschrijf binnen de klasse Sample_ChatAppOnConnectAsync() om de connect-gebeurtenis af te handelen:

sealed class Sample_ChatApp : WebPubSubHub
{
    private readonly WebPubSubServiceClient<Sample_ChatApp> _serviceClient;

    public Sample_ChatApp(WebPubSubServiceClient<Sample_ChatApp> serviceClient)
    {
        _serviceClient = serviceClient;
    }

    public override ValueTask<ConnectEventResponse> OnConnectAsync(ConnectEventRequest request, CancellationToken cancellationToken)
    {
        if (request.Query.TryGetValue("id", out var id))
        {
            return new ValueTask<ConnectEventResponse>(request.CreateResponse(userId: id.FirstOrDefault(), null, null, null));
        }

        // The SDK catches this exception and returns 401 to the caller
        throw new UnauthorizedAccessException("Request missing id");
    }

    public override async Task OnConnectedAsync(ConnectedEventRequest request)
    {
        Console.WriteLine($"[SYSTEM] {request.ConnectionContext.UserId} joined.");
    }

    public override async ValueTask<UserEventResponse> OnMessageReceivedAsync(UserEventRequest request, CancellationToken cancellationToken)
    {
        await _serviceClient.SendToAllAsync(RequestContent.Create(
        new
        {
            from = request.ConnectionContext.UserId,
            message = request.Data.ToString()
        }),
        ContentType.ApplicationJson);

        return new UserEventResponse();
    }
}

Werk server.js bij om de clientverbindings gebeurtenis af te handelen:

const express = require("express");
const { WebPubSubServiceClient } = require("@azure/web-pubsub");
const { WebPubSubEventHandler } = require("@azure/web-pubsub-express");

const app = express();
const hubName = "Sample_ChatApp";

let serviceClient = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hubName);

let handler = new WebPubSubEventHandler(hubName, {
  path: "/eventhandler",
  handleConnect: async (req, res) => {
    if (req.context.query.id){
      res.success({ userId: req.context.query.id });
    } else {
      res.fail(401, "missing user id");
    }
  },
  onConnected: async (req) => {
    console.log(`${req.context.userId} connected`);
  },
  handleUserEvent: async (req, res) => {
    if (req.context.eventName === "message")
      await serviceClient.sendToAll({
        from: req.context.userId,
        message: req.data,
      });
    res.success();
  },
});
app.use(express.static("public"));
app.use(handler.getMiddleware());

app.listen(8080, () => console.log("server started"));

Nu gaan we de logica toevoegen voor het afhandelen van de verbindings gebeurtenis azure.webpubsub.sys.connect:


// validation: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#protection
app.options("/eventhandler", ctx -> {
    ctx.header("WebHook-Allowed-Origin", "*");
});

// handle events: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#connect
app.post("/eventhandler", ctx -> {
    String event = ctx.header("ce-type");
    if ("azure.webpubsub.sys.connect".equals(event)) {
        String body = ctx.body();
        System.out.println("Reading from request body...");
        Gson gson = new Gson();
        JsonObject requestBody = gson.fromJson(body, JsonObject.class); // Parse JSON request body
        JsonObject query = requestBody.getAsJsonObject("query");
        if (query != null) {
            System.out.println("Reading from request body query:" + query.toString());
            JsonElement idElement = query.get("id");
            if (idElement != null) {
                JsonArray idInQuery = query.get("id").getAsJsonArray();
                if (idInQuery != null && idInQuery.size() > 0) {
                    String id = idInQuery.get(0).getAsString();
                    ctx.contentType("application/json");
                    Gson response = new Gson();
                    JsonObject jsonObject = new JsonObject();
                    jsonObject.addProperty("userId", id);
                    ctx.result(response.toJson(jsonObject));
                    return;
                }
            }
        } else {
            System.out.println("No query found from request body.");
        }
        ctx.status(401).result("missing user id");
    } else if ("azure.webpubsub.sys.connected".equals(event)) {
        String id = ctx.header("ce-userId");
        System.out.println(id + " connected.");
        ctx.status(200);
    } else if ("azure.webpubsub.user.message".equals(event)) {
        String id = ctx.header("ce-userId");
        String message = ctx.body();
        service.sendToAll(String.format("{\"from\":\"%s\",\"message\":\"%s\"}", id, message), WebPubSubContentType.APPLICATION_JSON);
        ctx.status(200);
    }
});

Laten we nu de systeemgebeurtenis connect verwerken, die de header ce-type moet bevatten met als waarde azure.webpubsub.sys.connect. We voegen de logica toe na de beveiliging tegen misbruik:

@app.route('/eventhandler', methods=['POST', 'OPTIONS'])
def handle_event():
    if request.method == 'OPTIONS' or request.method == 'GET':
        if request.headers.get('WebHook-Request-Origin'):
            res = Response()
            res.headers['WebHook-Allowed-Origin'] = '*'
            res.status_code = 200
            return res
    elif request.method == 'POST':
        user_id = request.headers.get('ce-userid')
        type = request.headers.get('ce-type')
        print("Received event of type:", type)
        # Sample connect logic if connect event handler is configured
        if type == 'azure.webpubsub.sys.connect':
            body = request.data.decode('utf-8')
            print("Reading from connect request body...")
            query = json.loads(body)['query']
            print("Reading from request body query:", query)
            id_element = query.get('id')
            user_id = id_element[0] if id_element else None
            if user_id:
                return {'userId': user_id}, 200
            return 'missing user id', 401
        elif type == 'azure.webpubsub.sys.connected':
            return user_id + ' connected', 200
        elif type == 'azure.webpubsub.user.message':
            service.send_to_all(content_type="application/json", message={
                'from': user_id,
                'message': request.data.decode('UTF-8')
            })
            return Response(status=204, content_type='text/plain')
        else:
            return 'Bad Request', 400

Index.html bijwerken om rechtstreeks verbinding te maken

Nu gaan we de webpagina bijwerken om rechtstreeks verbinding te maken met de Web PubSub-service. Belangrijk om te vermelden is dat het eindpunt van de Web PubSub-service nu voor demonstratiedoeleinden hardcoded in de clientcode is opgenomen. Werk in de onderstaande HTML de hostnaam van de service <the host name of your service> bij met de waarde van uw eigen service. Het kan nog steeds nuttig zijn om de waarde van het Web PubSub-service-eindpunt op te halen van uw server, waardoor u meer flexibiliteit en controle hebt over de locatie waar de client verbinding mee maakt.

<html>
  <body>
    <h1>Azure Web PubSub Chat</h1>
    <input id="message" placeholder="Type to chat...">
    <div id="messages"></div>
    <script>
      (async function () {
        // sample host: mock.webpubsub.azure.com
        let hostname = "<the host name of your service>";
        let id = prompt('Please input your user name');
        let ws = new WebSocket(`wss://${hostname}/client/hubs/Sample_ChatApp?id=${id}`);
        ws.onopen = () => console.log('connected');

        let messages = document.querySelector('#messages');
        
        ws.onmessage = event => {
          let m = document.createElement('p');
          let data = JSON.parse(event.data);
          m.innerText = `[${data.type || ''}${data.from || ''}] ${data.message}`;
          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>

De server opnieuw uitvoeren

Voer de server nu opnieuw uit en ga naar de webpagina volgens de instructies daarvoor. Als u bent gestopt awps-tunnel, voert u ook het tunnelhulpprogramma opnieuw uit.

Volgende stappen

Deze zelfstudie biedt een basisidee van de werking van het gebeurtenissysteem in de Azure Web PubSub-service.

Bekijk andere zelfstudies voor meer informatie over het gebruik van de service.

Meer Voorbeelden van Azure Web PubSub verkennen

Feedback

Is deze pagina nuttig?

Last updated on 2024-04-13

Zelfstudie: Een chat-app maken met de Azure Web PubSub-service

Vereisten

Een Azure Web PubSub-exemplaar maken

Een brongroep maken

Een Web PubSub-exemplaar maken

ConnectionString ophalen voor toekomstig gebruik

Het project instellen

Vereisten

De toepassing maken

Onderhandelingseindpunt toevoegen

Gebeurtenissen afhandelen

De webpagina bijwerken

De eventhandler instellen

Hubinstellingen configureren

Awps-tunnel lokaal uitvoeren

Awps-tunnel downloaden en installeren

Gebruik de verbindingsreeks van de service en voer uit

De webserver uitvoeren

Uitgestelde authenticatie met connect gebeurtenishandler

Hubinstellingen bijwerken

Upstream-logica bijwerken om verbindingsgebeurtenissen te verwerken

Index.html bijwerken om rechtstreeks verbinding te maken

De server opnieuw uitvoeren

Volgende stappen

Feedback

Aanvullende resources

Uitgestelde authenticatie met `connect` gebeurtenishandler