Självstudie: Skapa en chattapp med Azure Web PubSub-tjänsten

I Självstudien Publicera och prenumerera på meddelanden får du lära dig grunderna för att publicera och prenumerera på meddelanden med Azure Web PubSub. I den här självstudien lär du dig händelsesystemet för Azure Web PubSub och använder det för att skapa ett komplett webbprogram med kommunikationsfunktioner i realtid.

I den här självstudien lär du dig att:

Skapa en Web PubSub-tjänstinstans
Konfigurera händelsehanterarinställningar för Azure Web PubSub
Hantera händelser på appservern och skapa en chattapp i realtid

Om du inte har något Azure-konto skapar du ett kostnadsfritt konto innan du börjar.

Förutsättningar

Använd Bash-miljön i Azure Cloud Shell. Mer information finns i Kom igång med Azure Cloud Shell.
Om du föredrar att köra CLI-referenskommandon lokalt installerar du Azure CLI. Om du kör i Windows eller macOS kan du köra Azure CLI i en Docker-container. Mer information finns i Så här kör du Azure CLI i en Docker-container.
- Om du använder en lokal installation loggar du in på Azure CLI med hjälp av kommandot az login. Slutför autentiseringsprocessen genom att följa stegen som visas i terminalen. Andra inloggningsalternativ finns i Autentisera till Azure med Azure CLI.
- När du uppmanas att installera Azure CLI-tillägget vid första användningen. Mer information om tillägg finns i Använda och hantera tillägg med Azure CLI.
- Kör az version om du vill hitta versionen och de beroende bibliotek som är installerade. Om du vill uppgradera till den senaste versionen kör du az upgrade.

Den här konfigurationen kräver version 2.22.0 eller senare av Azure CLI. Om du använder Azure Cloud Shell är den senaste versionen redan installerad.

Skapa en Azure Web PubSub-instans

Skapa en resursgrupp

En resursgrupp är en logisk container där Azure-resurser distribueras och hanteras. Använd kommandot az group create för att skapa en resursgrupp med namnet myResourceGroup på eastus platsen.

az group create --name myResourceGroup --location EastUS

Skapa en Web PubSub-instans

Kör az extension add för att installera eller uppgradera webpubsub-tillägget till den aktuella versionen.

az extension add --upgrade --name webpubsub

Använd kommandot Azure CLI az webpubsub create för att skapa en Web PubSub i resursgruppen som du har skapat. Följande kommando skapar en Free Web PubSub-resurs under resursgruppen myResourceGroup i EastUS:

Viktigt!

Varje Web PubSub-resurs måste ha ett unikt namn. Ersätt <ditt unika resursnamn> med namnet på din Web PubSub i följande exempel.

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

Utdata från det här kommandot visar egenskaperna för den nyligen skapade resursen. Anteckna de två egenskaperna som visas nedan:

Resursnamn: Det namn som du angav i parametern --name ovan.
hostName: I exemplet är <your-unique-resource-name>.webpubsub.azure.com/värdnamnet .

I det här läget är ditt Azure-konto det enda som har behörighet att utföra åtgärder på den nya resursen.

Hämta ConnectionString för framtida användning

Viktigt!

Råa anslutningssträng visas endast i den här artikeln i demonstrationssyfte.

En reťazec pripojenia inkluderar den auktoriseringsinformation som din applikation behöver för att få tillgång till Azure Web PubSub-tjänsten. Accessnyckeln i reťazec pripojenia fungerar som ett root-lösenord för din tjänst. Skydda alltid dina åtkomstnycklar i produktionsmiljöer. Använd Azure Key Vault för att hantera och rotera dina nycklar på ett säkert sätt och skydda anslutningen med WebPubSubServiceClient.

Undvik att distribuera åtkomstnycklar till andra användare, hårdkoda dem eller spara dem var som helst i oformaterad text som är tillgänglig för andra. Rotera dina nycklar om du tror att de har komprometterats.

Använd kommandot Azure CLI az webpubsub key för att hämta ConnectionString för tjänsten. <your-unique-resource-name> Ersätt platshållaren med namnet på din Azure Web PubSub-instans.

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

Kopiera anslutningssträng som ska användas senare.

Kopiera den hämtade ConnectionString och ställ in den i miljövariabeln WebPubSubConnectionString, som självstudien senare läser. Ersätt <connection-string> nedan med den ConnectionString som du hämtade.

export WebPubSubConnectionString="<connection-string>"

SET WebPubSubConnectionString=<connection-string>

Konfigurera projektet

Förutsättningar

ASP.NET Core 8

Skapa programmet

I Azure Web PubSub finns det två roller, server och klient. Det här konceptet liknar server- och klientrollerna i ett webbprogram. Servern ansvarar för att hantera klienter, lyssna och svara på klientmeddelanden. Klienten ansvarar för att skicka och ta emot användarens meddelanden från servern och visualisera dem för slutanvändare.

I den här handledningen bygger vi en webbapplikation för realtidschatt. I ett riktigt webbprogram omfattar serverns ansvar även att autentisera klienter och hantera statiska webbsidor för programmets användargränssnitt.

Vi använder ASP.NET Core 8 som värd för webbsidorna och hanterar inkommande begäranden.

Först ska vi skapa en ASP.NET Core-webbapp i en chatapp mapp.

Skapa en ny webbapp.

mkdir chatapp
cd chatapp
dotnet new web

Lägg till app.UseStaticFiles() Program.cs för att stödja värdskap för statiska webbsidor.

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

app.UseStaticFiles();

app.Run();

Skapa en HTML-fil och spara den som wwwroot/index.html, vi använder den för chattappens användargränssnitt senare.
```
<html>
  <body>
    <h1>Azure Web PubSub Chat</h1>
  </body>
</html>
```

Du kan testa servern genom att köra dotnet run --urls http://localhost:8080 och komma åt http://localhost:8080/index.html den i webbläsaren.

Vi använder express.js, ett populärt webbramverk för Node.js som värd för webbsidorna och hanterar inkommande begäranden.

Först ska vi skapa en expresswebbapp i en chatapp mapp.

Installera express.js

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

Skapa sedan en expressserver och spara den som server.js

const express = require('express');

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

Skapa även en HTML-fil och spara den som public/index.html, vi använder den för användargränssnittet i chattappen senare.
```
<html>

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

</html>
```

Du kan testa servern genom att köra node server och komma åt http://localhost:8080 den i webbläsaren.

Vi använder Javalin-webbramverket för att vara värd för webbsidorna och hantera inkommande begäranden.

Använd Maven för att skapa en ny app webpubsub-tutorial-chat och växla till mappen 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

Lägg till beroendet för webbramverket javalin i noden dependencies i pom.xml:

javalin: enkelt webbramverk för Java
slf4j-simple: Loggare för 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>

Gå till katalogen /src/main/java/com/webpubsub/tutorial . Öppna filen App.java i redigeringsprogrammet. Används Javalin.create för att hantera statiska filer:

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

Beroende på konfigurationen kan du behöva ange språknivån till Java 8. Det här steget kan göras i pom.xml. Lägg till följande kodfragment:

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

Skapa en HTML-fil och spara den i /src/main/resources/public/index.html. Vi använder den för användargränssnittet för chattappen senare.
```
<html>
<body>
  <h1>Azure Web PubSub Chat</h1>
</body>

</html>
```

Du kan testa servern genom att köra följande kommando under katalogen som innehåller pom.xml-filen och åtkomst http://localhost:8080 i webbläsaren.

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

Vi använder Flask, ett populärt webbramverk för Python för att uppnå det här jobbet.

Skapa först en projektmapp chatapp med Flask klar.

Skapa och aktivera miljön

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

Installera Flask i den aktiverade miljön
```
pip install Flask
```

Skapa sedan en Flask-server och spara den som 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)

Skapa även en HTML-fil och spara den som public/index.html, vi använder den för användargränssnittet i chattappen senare.
```
<html>

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

</html>
```

Du kan testa servern genom att köra python server.py och komma åt http://127.0.0.1:8080/index.html den i webbläsaren.

Lägg till förhandlingsslutpunkt

I självstudien Publicera och prenumerera på meddelanden använder prenumeranten anslutningssträngen direkt. I ett verkligt program är det inte säkert att dela anslutningssträng med någon klient, eftersom anslutningssträng har hög behörighet att utföra alla åtgärder i tjänsten. Nu ska vi låta servern använda anslutningssträngen och exponera en negotiate-ändpunkt så att klienten kan hämta den fullständiga URL:en med åtkomsttoken. På så sätt kan servern lägga till autentiseringsmellanprogram före negotiate slutpunkten för att förhindra obehörig åtkomst.

Installera först beroendena.

dotnet add package Microsoft.Azure.WebPubSub.AspNetCore

Nu lägger vi till en /negotiate endpoint som klienten kan anropa för att generera tokenen.

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>() används för att mata in tjänstklienten WebPubSubServiceClient<THub>, med vilken vi kan använda i förhandlingssteget för att generera klientanslutningstoken och i hubbmetoder för att anropa tjänstens REST-API:er när hubbhändelser utlöses. Den här koden för att generera token liknar den vi använde i självstudien om att publicera och prenumerera på meddelanden, förutom att vi skickar med ett argument till (userId) när vi genererar token. Användar-ID kan användas för att identifiera klientens identitet, så när du får ett meddelande vet du var meddelandet kommer ifrån.

Koden läser anslutningssträng från miljövariabeln WebPubSubConnectionString som vi angav i föregående steg.

Kör servern igen med .dotnet run --urls http://localhost:8080

Installera först Azure Web PubSub SDK:

npm install --save @azure/web-pubsub

Nu ska vi lägga till ett /negotiate API för att generera token.

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

Den här koden för tokengenerering liknar den som vi använde i självstudien om att publicera och prenumerera på meddelanden, förutom att vi skickar ytterligare ett argument (userId) när vi genererar tokenen. Användar-ID kan användas för att identifiera klientens identitet, så när du får ett meddelande vet du var meddelandet kommer ifrån.

Koden läser anslutningssträng från miljövariabeln WebPubSubConnectionString som vi angav i föregående steg.

Kör servern igen genom att köra node server.

Lägg först till Azure Web PubSub SDK-beroendet och gson i noden dependencies i 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>

Nu ska vi lägga till ett /negotiate API i App.java filen för att generera token:

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

Den här tokengenereringskoden liknar den som vi använde i självstudien publicera och prenumerera på meddelandet, förutom att vi anropar setUserId metoden för att ange användar-ID när token genereras. Användar-ID kan användas för att identifiera klientens identitet, så när du får ett meddelande vet du var meddelandet kommer ifrån.

Koden läser anslutningssträng från miljövariabeln WebPubSubConnectionString som vi angav i föregående steg.

Kör servern igen med följande kommandon:

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

Installera först Azure Web PubSub SDK.

pip install azure-messaging-webpubsubservice

Nu ska vi lägga till ett /negotiate API på servern för att generera token.

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)

Den här koden för tokengenerering liknar den som vi använde i självstudien om att publicera och prenumerera på meddelanden, förutom att vi skickar med ett argument till (user_id) när vi genererar token. Användar-ID kan användas för att identifiera klientens identitet, så när du får ett meddelande vet du var meddelandet kommer ifrån.

Koden läser anslutningssträng från miljövariabeln WebPubSubConnectionString som vi angav i föregående steg.

Kör servern igen med .python server.py

Du kan testa det här API:et genom att http://localhost:8080/negotiate?id=user1 komma åt och det ger dig den fullständiga URL:en för Azure Web PubSub med en åtkomsttoken.

Hantera händelser

När det finns vissa aktiviteter på klientsidan i Azure Web PubSub (till exempel en klient ansluter, ansluter, kopplar från eller en klient skickar meddelanden) skickar tjänsten meddelanden till servern så att den kan reagera på dessa händelser.

Händelser levereras till servern i form av Webhook. Webhook hanteras och exponeras av programservern och registreras på Azure Web PubSub-tjänstsidan. Tjänsten utlöser webhooks när en händelse inträffar.

Azure Web PubSub följer CloudEvents för att beskriva händelsedata.

Nedan hanterar connected vi systemhändelser när en klient är ansluten och hanterar message användarhändelser när en klient skickar meddelanden för att skapa chattappen.

Web PubSub SDK för AspNetCore Microsoft.Azure.WebPubSub.AspNetCore som vi installerade i föregående steg kan också hjälpa dig att parsa och bearbeta CloudEvents-begäranden.

Lägg först till händelsehanterare före app.Run(). Ange slutpunktssökvägen för händelserna, låt oss säga /eventhandler.

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

I den klass Sample_ChatApp som vi skapade i föregående steg lägger du nu till en konstruktor för att arbeta med WebPubSubServiceClient<Sample_ChatApp>, som vi använder för att anropa Web PubSub-tjänsten. Och OnConnectedAsync() för att svara när connected händelsen utlöses, OnMessageReceivedAsync() för att hantera meddelanden från klienten.

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

I koden ovan använder vi tjänstklienten för att sända ett meddelande i JSON-format till alla som är anslutna till SendToAllAsync.

Web PubSub SDK för express @azure/web-pubsub-express hjälper till att parsa och bearbeta CloudEvents-begäranden.

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

Uppdatera server.js med följande kod för att exponera ett REST API på /eventhandler (vilket görs av expressmellanprogrammet som tillhandahålls av Web PubSub SDK) för att hantera den klientanslutna händelsen:

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

I koden ovan onConnected skriver du helt enkelt ut ett meddelande till konsolen när en klient är ansluten. Du kan se att vi använder req.context.userId så att vi kan se identiteten för den anslutna klienten. Och handleUserEvent anropas när en klient skickar ett meddelande. Den använder WebPubSubServiceClient.sendToAll() för att sända meddelandet i ett JSON-objekt till alla klienter. Du kan se att handleUserEvent också har ett res-objekt där du kan skicka tillbaka ett meddelande till avsändaren av händelsen. Här anropar res.success() vi helt enkelt för att göra WebHook-returen 200 (observera att det här anropet krävs även om du inte vill returnera något tillbaka till klienten, annars returnerar WebHook aldrig och klientanslutningen stängs).

För tillfället måste du implementera händelsehanteraren på egen hand i Java. Stegen följer protokollspecifikationen och illustreras i listan nedan:

Lägg till HTTP-hanterare för händelsehanterarsökvägen, låt oss säga /eventhandler.
Först vill vi hantera begäranden om alternativ för missbruksskydd, vi kontrollerar om rubriken innehåller WebHook-Request-Origin huvudet och returnerar rubriken WebHook-Allowed-Origin. För enkelhetens skull, i demonstrationssyfte, returnerar vi * för att tillåta alla ursprung.
```
// validation: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#protection
app.options("/eventhandler", ctx -> {
    ctx.header("WebHook-Allowed-Origin", "*");
});
```
Sedan vill vi kontrollera om inkommande begäranden är de händelser vi förväntar oss. Anta att vi nu är intresserade av systemhändelsen connected, där headern ce-type ska anges som azure.webpubsub.sys.connected. Vi lägger till logiken efter skydd mot missbruk för att skicka anslutningshändelsen till alla klienter så att de kan se vem som har anslutit till chattrummet.
```
// 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);
});
```
I koden ovan skriver vi helt enkelt ut ett meddelande till konsolen när en klient är ansluten. Du kan se att vi använder ctx.header("ce-userId") så att vi kan se identiteten för den anslutna klienten.

ce-type för händelsen message är alltid azure.webpubsub.user.message. Information finns i Händelsemeddelande. Vi uppdaterar logiken för att hantera meddelanden som när ett meddelande kommer in sänder meddelandet i JSON-format till alla anslutna klienter.

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

För tillfället måste du implementera händelsehanteraren på egen hand i Python. Stegen följer protokollspecifikationen och visas i listan nedan:

Lägg till HTTP-hanterare för händelsehanterarsökvägen, låt oss säga /eventhandler.

Först vill vi hantera OPTIONS-begäranden för skydd mot missbruk. Vi kontrollerar om headern innehåller headern WebHook-Request-Origin, och vi returnerar headern WebHook-Allowed-Origin. För enkelhetens skull och i demonstrationssyfte returnerar vi * för att tillåta alla ursprung.

# 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

Sedan vill vi kontrollera om inkommande begäranden är de händelser vi förväntar oss. Anta att vi nu är intresserade av systemhändelsen connected, som ska innehålla headern ce-type i form av azure.webpubsub.sys.connected. Vi lägger till logiken efter missbruksskydd:

# 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

I koden ovan skriver vi helt enkelt ut ett meddelande till konsolen när en klient är ansluten. Du kan se att vi använder request.headers.get('ce-userid') så att vi kan se identiteten för den anslutna klienten.

@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

Uppdatera webbsidan

Nu ska vi uppdatera index.html för att lägga till logiken för att ansluta, skicka meddelande och visa mottagna meddelanden på sidan.

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

Du kan se i koden ovan att vi ansluter använda det interna WebSocket-API:et i webbläsaren och använda WebSocket.send() för att skicka meddelanden och WebSocket.onmessage lyssna på mottagna meddelanden.

Du kan också använda klient-SDK:er för att ansluta till tjänsten, vilket ger dig automatisk återanslutning, felhantering med mera.

Det finns nu ett steg kvar för chatten att fungera. Nu ska vi konfigurera vilka händelser vi bryr oss om och var händelserna ska skickas till i tjänsten Web PubSub.

Konfigurera händelsehanteraren

Vi ställer in händelsehanteraren i Web PubSub-tjänsten för att tala om för tjänsten var händelserna ska skickas.

Hur anropar Web PubSub-tjänsten localhost om den inte har någon internettillgänglig slutpunkt när webbservern körs lokalt? Det finns vanligtvis två sätt. Det ena är att exponera localhost publikt med hjälp av ett allmänt tunnelverktyg, och det andra är att använda awps-tunnel för att tunnelera trafiken från Web PubSub-tjänsten genom verktyget till din lokala server.

I det här avsnittet använder vi Azure CLI för att ange händelsehanterare och använda awps-tunnel för att dirigera trafik till localhost.

Konfigurera hubbinställningar

Vi anger att URL-mallen ska använda tunnel schemat så att Web PubSub dirigerar meddelanden via tunnelanslutningen awps-tunnel. Händelsehanterare kan ställas in från antingen portalen eller CLI enligt beskrivningen i den här artikeln, här anger vi det via CLI. Eftersom vi lyssnar efter händelser i sökvägen /eventhandler, som anges i föregående steg, ställer vi in URL-mallen till tunnel:///eventhandler.

Använd azure CLI az webpubsub hub create-kommandot för att skapa händelsehanterarinställningarna för Sample_ChatApp hubben.

Viktigt!

Ersätt <ditt unika resursnamn> med namnet på din Web PubSub-resurs som skapades från föregående steg.

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"

Kör awps-tunnel lokalt

Ladda ned och installera awps-tunnel

Verktyget körs på Node.js version 16 eller senare.

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

Använd tjänstens anslutningssträng och kör

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

Kör webbservern

Nu är allt klart. Nu ska vi köra webbservern och leka med chattappen i praktiken.

Kör nu servern med .dotnet run --urls http://localhost:8080

Det fullständiga kodexemplet i den här självstudien finns här.

Kör nu servern med hjälp av kommandot nedan:

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

Det fullständiga kodexemplet i den här självstudien finns här.

Öppna http://localhost:8080/index.html. Du kan ange ditt användarnamn och börja chatta.

Lazy Auth med `connect`-händelsehanterare

I föregående avsnitt visar vi hur du använder förhandlingsslutpunkten för att returnera url:en för Web PubSub-tjänsten och JWT-åtkomsttoken för klienterna för att ansluta till Web PubSub-tjänsten. I vissa fall, till exempel gränsenheter som har begränsade resurser, kan klienter föredra direktanslutning till Web PubSub-resurser. I sådana fall kan du konfigurera connect händelsehanteraren så att klienterna autentiseras vid behov, tilldela klienterna användar-ID:n, ange vilka grupper klienterna ska gå med i när de har anslutit, konfigurera vilka behörigheter klienterna ska ha samt ange WebSocket-delprotokoll som WebSocket-svar till klienten. Mer information finns i specifikationen för anslutningshändelsehanteraren.

Nu ska vi använda connect-händelsehanteraren för att uppnå något liknande det som avsnittet negotiate gör.

Uppdatera inställningar för hubben

Först ska vi uppdatera hubbinställningarna för att även inkludera connect händelsehanterare. Vi måste också tillåta anonym anslutning så att klienter utan JWT-åtkomsttoken kan ansluta till tjänsten.

Använd azure CLI az webpubsub hub update-kommandot för att skapa händelsehanterarinställningarna för Sample_ChatApp hubben.

Viktigt!

Ersätt <ditt unika resursnamn> med namnet på din Web PubSub-resurs som skapades från föregående steg.

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"

Uppdatera uppströmslogik för att hantera anslutningshändelse

Nu ska vi uppdatera den överordnade logiken för att hantera anslutningshändelsen. Vi kan också ta bort förhandlingsslutpunkten nu.

På samma sätt som vi gör i negotiate-endpointen läser vi också id från frågeparametrarna i demonstrationssyfte. I connect-händelsen bevaras den ursprungliga klientfrågan i brödtexten för anslutningshändelsebegäran.

I klassen Sample_ChatAppåsidosätter du OnConnectAsync() för att hantera connect händelsen:

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

Uppdatera server.js för att hantera klientanslutningshändelsen:

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 ska vi lägga till logiken för att hantera anslutningshändelsen 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);
    }
});

Nu ska vi hantera systemhändelsen connect, som ska innehålla headern ce-type som azure.webpubsub.sys.connect. Vi lägger till logiken efter missbruksskydd:

@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

Uppdatera index.html för direktanslutning

Nu ska vi uppdatera webbsidan för att direktansluta till Web PubSub-tjänsten. En sak att nämna är att slutpunkten för Web PubSub-tjänsten nu är hårdkodad i klientkoden för demonstrationssyfte. Uppdatera tjänstens värdnamn <the host name of your service> i HTML-koden nedan med värdet från din egen tjänst. Det kan fortfarande vara användbart att hämta slutpunktsvärdet för Web PubSub-tjänsten från servern. Det ger dig mer flexibilitet och kontrollbarhet till den punkt där klienten ansluter till.

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

Kör servern igen

Kör nu servern igen och besök webbsidan enligt anvisningarna innan. Om du har stoppat awps-tunnel, kör även tunnelverktyget igen.

Nästa steg

I den här självstudien får du en grundläggande uppfattning om hur händelsesystemet fungerar i Azure Web PubSub-tjänsten.

Se andra guider för att lära dig mer om hur tjänsten används.

Utforska fler Azure Web PubSub-exempel

Feedback

Var den här sidan till hjälp?

Last updated on 2026-08-31

Självstudie: Skapa en chattapp med Azure Web PubSub-tjänsten

Förutsättningar

Skapa en Azure Web PubSub-instans

Skapa en resursgrupp

Skapa en Web PubSub-instans

Hämta ConnectionString för framtida användning

Konfigurera projektet

Förutsättningar

Skapa programmet

Lägg till förhandlingsslutpunkt

Hantera händelser

Uppdatera webbsidan

Konfigurera händelsehanteraren

Konfigurera hubbinställningar

Kör awps-tunnel lokalt

Ladda ned och installera awps-tunnel

Använd tjänstens anslutningssträng och kör

Kör webbservern

Lazy Auth med connect-händelsehanterare

Uppdatera inställningar för hubben

Uppdatera uppströmslogik för att hantera anslutningshändelse

Uppdatera index.html för direktanslutning

Kör servern igen

Nästa steg

Feedback

Ytterligare resurser

Lazy Auth med `connect`-händelsehanterare