Samouczek: tworzenie aplikacji do czatu za pomocą usługi Azure Web PubSub

W samouczku Publikowanie i subskrybowanie komunikatów poznasz podstawy publikowania i subskrybowania komunikatów za pomocą usługi Azure Web PubSub. W tym samouczku poznasz system zdarzeń usługi Azure Web PubSub i użyjesz go do utworzenia kompletnej aplikacji internetowej z funkcją komunikacji w czasie rzeczywistym.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

Utwórz wystąpienie usługi Web PubSub
Konfigurowanie ustawień programu obsługi zdarzeń dla usługi Azure Web PubSub
Obsługa zdarzeń na serwerze aplikacji i tworzenie aplikacji do czatu w czasie rzeczywistym

Jeśli nie masz jeszcze konta platformy Azure, przed rozpoczęciem utwórz bezpłatne konto.

Wymagania wstępne

Użyj środowiska Bash w usłudze Azure Cloud Shell. Aby uzyskać więcej informacji, zobacz Get started with Azure Cloud Shell.
Jeśli wolisz uruchamiać polecenia referencyjne interfejsu wiersza polecenia lokalnie, zainstaluj interfejs wiersza polecenia platformy Azure. Jeśli korzystasz z systemu Windows lub macOS, rozważ uruchomienie interfejsu wiersza polecenia platformy Azure w kontenerze Docker. Aby uzyskać więcej informacji, zobacz Jak uruchomić interfejs wiersza polecenia platformy Azure w kontenerze platformy Docker.
- Jeśli korzystasz z instalacji lokalnej, zaloguj się do interfejsu wiersza polecenia platformy Azure za pomocą polecenia az login. Aby ukończyć proces uwierzytelniania, wykonaj kroki wyświetlane w terminalu. Aby uzyskać inne opcje logowania, zobacz Uwierzytelnianie na platformie Azure przy użyciu interfejsu wiersza polecenia platformy Azure.
- Gdy pojawi się monit, zainstaluj rozszerzenie Azure CLI przy pierwszym użyciu. Aby uzyskać więcej informacji na temat rozszerzeń, zobacz Używanie rozszerzeń i zarządzanie nimi za pomocą interfejsu wiersza polecenia platformy Azure.
- Uruchom polecenie az version, aby znaleźć zainstalowane wersje i biblioteki zależne. Aby uaktualnić do najnowszej wersji, uruchom polecenie az upgrade.

Ta konfiguracja wymaga wersji 2.22.0 lub nowszej interfejsu wiersza polecenia platformy Azure. W przypadku korzystania z usługi Azure Cloud Shell najnowsza wersja jest już zainstalowana.

Tworzenie wystąpienia usługi Azure Web PubSub

Tworzenie grupy zasobów

Grupa zasobów to logiczny kontener przeznaczony do wdrażania zasobów platformy Azure i zarządzania nimi. Użyj polecenia az group create, aby utworzyć grupę zasobów o nazwie myResourceGroup w eastus lokalizacji.

az group create --name myResourceGroup --location EastUS

Utwórz wystąpienie usługi Web PubSub

Uruchom az extension add, aby zainstalować rozszerzenie webpubsub lub uaktualnić je do bieżącej wersji.

az extension add --upgrade --name webpubsub

Użyj polecenia interfejsu wiersza polecenia platformy Azure az webpubsub create, aby utworzyć usługę Web PubSub w utworzonej wcześniej grupie zasobów. Poniższe polecenie tworzy zasób Web PubSub w warstwie Free w grupie zasobów myResourceGroup w regionie EastUS:

Ważne

Każdy zasób Web PubSub musi mieć unikatową nazwę. Zastąp <your-unique-resource-name> nazwą Twojego zasobu Web PubSub w poniższych przykładach.

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

Dane wyjściowe tego polecenia pokazują właściwości nowo utworzonego zasobu. Zanotuj dwie poniższe właściwości:

Nazwa zasobu: nazwa podana w parametrze --name powyżej.
hostName: w przykładzie nazwa hosta to <your-unique-resource-name>.webpubsub.azure.com/.

W tym momencie Twoje konto platformy Azure jest jedynym autoryzowanym do wykonywania jakichkolwiek operacji na tym nowym zasobie.

Pobierz ConnectionString do późniejszego użycia

Ważne

Nieprzetworzone parametry połączenia są wyświetlane tylko w tym artykule w celach demonstracyjnych.

parametry połączenia zawiera informacje autoryzacyjne potrzebne Twojej aplikacji, aby uzyskać dostęp do usługi Azure Web PubSub. Klucz dostępu w parametry połączenia działa jak hasło root dla Twojej usługi. W środowiskach produkcyjnych zawsze chroń klucze dostępu. Użyj usługi Azure Key Vault, aby bezpiecznie zarządzać kluczami i obracać je oraz zabezpieczać połączenie za pomocą usługi WebPubSubServiceClient.

Unikaj dystrybuowania kluczy dostępu do innych użytkowników, kodowania ich lub zapisywania ich w dowolnym miejscu w postaci zwykłego tekstu, który jest dostępny dla innych użytkowników. Obracanie kluczy, jeśli uważasz, że mogły one zostać naruszone.

Użyj polecenia interfejsu wiersza polecenia platformy Azure az webpubsub key, aby pobrać parametr ConnectionString usługi. Zastąp symbol zastępczy <your-unique-resource-name> nazwą swojej instancji usługi Azure Web PubSub.

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

Skopiuj parametry połączenia do późniejszego użycia.

Skopiuj pobrane parametry połączenia i ustaw je w zmiennej środowiskowej WebPubSubConnectionString, którą samouczek później odczyta. Zastąp znajdujący się poniżej element <connection-string> pobranym elementem ConnectionString.

export WebPubSubConnectionString="<connection-string>"

SET WebPubSubConnectionString=<connection-string>

Konfigurowanie projektu

Wymagania wstępne

ASP.NET Core 8

Tworzenie aplikacji

W usłudze Azure Web PubSub istnieją dwie role, serwer i klient. Ta koncepcja jest podobna do ról serwera i klienta w aplikacji internetowej. Serwer jest odpowiedzialny za zarządzanie klientami, nasłuchiwanie i odpowiadanie na komunikaty klienta. Klient jest odpowiedzialny za wysyłanie i odbieranie komunikatów użytkownika z serwera i wizualizowanie ich dla użytkownika końcowego.

W tym samouczku utworzymy aplikację internetową do czatu w czasie rzeczywistym. W prawdziwej aplikacji internetowej odpowiedzialność serwera obejmuje również uwierzytelnianie klientów i obsługę statycznych stron internetowych dla interfejsu użytkownika aplikacji.

Używamy ASP.NET Core 8 do hostowania stron internetowych i obsługi żądań przychodzących.

Najpierw utwórzmy aplikację internetową ASP.NET Core w folderze chatapp .

Utwórz nową aplikację internetową.

mkdir chatapp
cd chatapp
dotnet new web

Dodaj app.UseStaticFiles() Program.cs do obsługi hostowania statycznych stron internetowych.

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

app.UseStaticFiles();

app.Run();

Utwórz plik HTML i zapisz go jako wwwroot/index.html, użyjemy go do interfejsu użytkownika aplikacji czatu później.
```
<html>
  <body>
    <h1>Azure Web PubSub Chat</h1>
  </body>
</html>
```

Serwer można przetestować, uruchamiając polecenie dotnet run --urls http://localhost:8080, a następnie otwierając http://localhost:8080/index.html w przeglądarce.

Używamy express.js, popularnej platformy internetowej dla Node.js do hostowania stron internetowych i obsługi żądań przychodzących.

Najpierw utwórzmy ekspresową aplikację internetową w folderze chatapp .

Instalowanie express.js

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

Następnie utwórz serwer ekspresowy i zapisz go jako server.js

const express = require('express');

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

Ponadto utwórz plik HTML i zapisz go jako public/index.html, użyjemy go do interfejsu użytkownika aplikacji do czatu później.
```
<html>

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

</html>
```

Serwer można przetestować, uruchamiając polecenie node server, a następnie otwierając http://localhost:8080 w przeglądarce.

Używamy platformy internetowej Javalin do hostowania stron internetowych i obsługi żądań przychodzących.

Użyj narzędzia Maven, aby utworzyć nową aplikację webpubsub-tutorial-chat i przełączyć się do folderu 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

Dodaj zależność frameworka internetowego javalin do węzła dependencies w pom.xml:

javalin: prosta struktura internetowa dla języka Java
slf4j-simple: Rejestrator dla języka 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>

Przejdź do katalogu /src/main/java/com/webpubsub/tutorial . Otwórz plik App.java w edytorze. Użyj Javalin.create do udostępniania plików statycznych:

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

W zależności od konfiguracji może być konieczne jawne ustawienie poziomu języka java 8. Ten krok można wykonać w pom.xml. Dodaj następujący fragment kodu:

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

Utwórz plik HTML i zapisz go w pliku /src/main/resources/public/index.html. Używamy go w interfejsie użytkownika aplikacji do czatu później.
```
<html>
<body>
  <h1>Azure Web PubSub Chat</h1>
</body>

</html>
```

Serwer można przetestować, uruchamiając następujące polecenie w katalogu zawierającym plik pom.xml, a następnie otworzyć http://localhost:8080 w przeglądarce.

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

Do osiągnięcia tego zadania używamy platformy Flask, popularnej platformy internetowej dla języka Python.

Najpierw utwórz folder projektu chatapp, przygotowany do pracy z Flask.

Tworzenie i aktywowanie środowiska

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

W aktywowanym środowisku zainstaluj platformę Flask
```
pip install Flask
```

Następnie utwórz serwer Platformy Flask i zapisz go jako 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)

Ponadto utwórz plik HTML i zapisz go jako public/index.html, użyjemy go do interfejsu użytkownika aplikacji do czatu później.
```
<html>

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

</html>
```

Serwer można przetestować, uruchamiając polecenie python server.py, a następnie otworzyć http://127.0.0.1:8080/index.html w przeglądarce.

Dodawanie negocjowanego punktu końcowego

W samouczku Publikowanie i subskrybowanie komunikatów subskrybent bezpośrednio używa ciągu połączenia. W rzeczywistej aplikacji udostępnianie parametrów połączenia jakiemukolwiek klientowi nie jest bezpieczne, ponieważ parametr połączenia zapewnia szerokie uprawnienia do wykonywania dowolnych operacji w usłudze. Teraz skonfiguruj serwer tak, aby korzystał z parametrów połączenia i udostępniał punkt końcowy negotiate, dzięki któremu klient może pobrać pełny adres URL z tokenem dostępu. W taki sposób serwer może dodać oprogramowanie pośredniczące uwierzytelniania przed negotiate punktem końcowym, aby zapobiec nieautoryzowanemu dostępowi.

Najpierw zainstaluj zależności.

dotnet add package Microsoft.Azure.WebPubSub.AspNetCore

Teraz dodajmy punkt końcowy /negotiate, który klient wywoła, aby wygenerować token.

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>() Służy do wstrzykiwania klienta WebPubSubServiceClient<THub>usługi , za pomocą którego możemy użyć w kroku negocjacji do generowania tokenu połączenia klienta i w metodach centrum do wywoływania interfejsów API REST usługi po wyzwoleniu zdarzeń centrum. Ten kod generowania tokenu jest podobny do kodu użytego w samouczku dotyczącym publikowania i subskrybowania komunikatów, z wyjątkiem przekazywania jeszcze jednego argumentu (userId) podczas generowania tokenu. Identyfikator użytkownika może służyć do identyfikowania tożsamości klienta, więc po otrzymaniu komunikatu wiadomo, skąd pochodzi komunikat.

Kod odczytuje parametry połączenia ze zmiennej środowiskowej WebPubSubConnectionString ustawionej w poprzednim kroku.

Uruchom ponownie serwer przy użyciu polecenia dotnet run --urls http://localhost:8080.

Najpierw zainstaluj zestaw Azure Web PubSub SDK:

npm install --save @azure/web-pubsub

Teraz dodajmy /negotiate API do generowania tokenu.

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

Ten kod generowania tokenu jest podobny do kodu użytego w samouczku dotyczącym publikowania i subskrybowania komunikatów, z wyjątkiem przekazywania jeszcze jednego argumentu (userId) podczas generowania tokenu. Identyfikator użytkownika może służyć do identyfikowania tożsamości klienta, więc po otrzymaniu komunikatu wiadomo, skąd pochodzi komunikat.

Kod odczytuje parametry połączenia ze zmiennej środowiskowej WebPubSubConnectionString ustawionej w poprzednim kroku.

Uruchom ponownie serwer, uruchamiając polecenie node server.

Najpierw dodaj zależność zestawu SDK usługi Azure Web PubSub oraz gson do węzła dependencies w 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>

Teraz dodajmy interfejs API /negotiate do pliku App.java, aby wygenerować 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;
        });
    }
}

Ten kod generowania tokenu jest podobny do kodu użytego w samouczku dotyczącym publikowania i subskrybowania komunikatów, z wyjątkiem wywoływania setUserId metody ustawiania identyfikatora użytkownika podczas generowania tokenu. Identyfikator użytkownika może służyć do identyfikowania tożsamości klienta, więc po otrzymaniu komunikatu wiadomo, skąd pochodzi komunikat.

Kod odczytuje parametry połączenia ze zmiennej środowiskowej WebPubSubConnectionString ustawionej w poprzednim kroku.

Uruchom ponownie serwer przy użyciu następujących poleceń:

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

Najpierw zainstaluj zestaw AZURE Web PubSub SDK.

pip install azure-messaging-webpubsubservice

Teraz dodajmy do serwera /negotiate API, aby wygenerować 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)

Ten kod generowania tokenu jest podobny do kodu użytego w samouczku dotyczącym publikowania i subskrybowania komunikatów, z wyjątkiem przekazywania jeszcze jednego argumentu (user_id) podczas generowania tokenu. Identyfikator użytkownika może służyć do identyfikowania tożsamości klienta, więc po otrzymaniu komunikatu wiadomo, skąd pochodzi komunikat.

Kod odczytuje parametry połączenia ze zmiennej środowiskowej WebPubSubConnectionString ustawionej w poprzednim kroku.

Uruchom ponownie serwer przy użyciu polecenia python server.py.

Możesz przetestować ten interfejs API, uzyskując dostęp do http://localhost:8080/negotiate?id=user1, który zwraca pełny adres URL usługi Azure Web PubSub wraz z tokenem dostępu.

Obsługa zdarzeń

W usłudze Azure Web PubSub, gdy po stronie klienta występują pewne działania (na przykład klient łączy się, łączy, rozłącza lub wysyła komunikaty), usługa wysyła powiadomienia do serwera, aby mogła reagować na te zdarzenia.

Zdarzenia są dostarczane do serwera w formie webhooka. Webhook jest obsługiwany i udostępniany przez serwer aplikacji oraz rejestrowany w usłudze Azure Web PubSub. Usługa wywołuje webhooki za każdym razem, gdy wystąpi zdarzenie.

Usługa Azure Web PubSub używa specyfikacji CloudEvents do opisywania danych zdarzeń.

Poniżej obsługujemy connected zdarzenia systemowe, gdy klient jest połączony i obsługuje message zdarzenia użytkownika, gdy klient wysyła komunikaty w celu skompilowania aplikacji do czatu.

Zestaw SDK Web PubSub dla AspNetCore, który zainstalowaliśmy w poprzednim kroku, może również pomóc w parsowaniu i przetwarzaniu żądań CloudEvents.

Najpierw dodaj procedury obsługi zdarzeń przed app.Run(). Określ ścieżkę punktu końcowego dla zdarzeń, powiedzmy /eventhandler.

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

Teraz, wewnątrz klasy Sample_ChatApp, utworzonej w poprzednim kroku, dodaj konstruktor współpracujący z WebPubSubServiceClient<Sample_ChatApp>, którego używamy do wywoływania usługi Web PubSub. Oraz OnConnectedAsync(), aby reagować po wywołaniu zdarzenia connected, OnMessageReceivedAsync() aby obsługiwać komunikaty od klienta.

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

W powyższym kodzie używamy klienta usługi do rozgłoszenia komunikatu powiadomienia w formacie JSON do wszystkich połączonych za pomocą SendToAllAsync.

Zestaw SDK Web PubSub dla Express @azure/web-pubsub-express ułatwia parsowanie i przetwarzanie żądań CloudEvents.

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

Zaktualizuj server.js przy użyciu następującego kodu, aby uwidocznić interfejs API REST pod adresem /eventhandler (co jest wykonywane przez oprogramowanie pośredniczące express dostarczone przez zestaw SDK usługi Web PubSub) w celu obsługi połączonego zdarzenia klienta:

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

W powyższym kodzie onConnected po prostu wyświetla komunikat do konsoli, gdy klient jest połączony. Możesz zobaczyć, że używamy req.context.userId, aby zobaczyć tożsamość podłączonego klienta. A handleUserEvent jest wywoływany, gdy klient wysyła komunikat. Używa WebPubSubServiceClient.sendToAll(), aby rozesłać komunikat w postaci obiektu JSON do wszystkich klientów. Widać, że handleUserEvent ma również obiekt res, za pomocą którego można wysłać wiadomość z powrotem do nadawcy zdarzenia. Tutaj po prostu wywołujemy res.success(), aby WebHook zwrócił kod 200 (zwróć uwagę, że to wywołanie jest wymagane, nawet jeśli nie chcesz nic zwracać klientowi; w przeciwnym razie WebHook nigdy nie odpowie, a połączenie z klientem zostanie zamknięte).

Na razie należy zaimplementować program obsługi zdarzeń samodzielnie w języku Java. Kroki są proste po specyfikacji protokołu i zilustrowane na poniższej liście:

Dodaj procedurę obsługi HTTP dla ścieżki procedury obsługi zdarzeń. Załóżmy, że /eventhandler.
Najpierw chcemy obsłużyć żądania OPTIONS związane z ochroną przed nadużyciami; sprawdzamy, czy nagłówek zawiera nagłówek WebHook-Request-Origin, i zwracamy nagłówek WebHook-Allowed-Origin. Dla uproszczenia, na potrzeby demonstracji, zwracamy *, aby zezwolić na wszystkie źródła.
```
// validation: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#protection
app.options("/eventhandler", ctx -> {
    ctx.header("WebHook-Allowed-Origin", "*");
});
```
Następnie chcemy sprawdzić, czy żądania przychodzące są oczekiwanymi zdarzeniami. Załóżmy, że teraz zależy nam na zdarzeniu systemowym connected, które powinno zawierać nagłówek ce-type jako azure.webpubsub.sys.connected. Dodajemy logikę po mechanizmie ochrony przed nadużyciami, aby rozgłaszać wszystkim klientom zdarzenie połączenia, dzięki czemu mogą zobaczyć, kto dołączył do pokoju czatu.
```
// 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);
});
```
W powyższym kodzie po prostu drukujemy komunikat do konsoli, gdy klient jest połączony. Widać, że używamy ctx.header("ce-userId"), dzięki czemu możemy zobaczyć identyfikator połączonego klienta.

ce-type zdarzenia message jest zawsze azure.webpubsub.user.message. Szczegóły zawierają komunikat o zdarzeniu. Aktualizujemy logikę tak, aby po nadejściu komunikatu rozsyłała go w formacie JSON do wszystkich połączonych klientów.

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

Na razie należy zaimplementować program obsługi zdarzeń samodzielnie w języku Python. Kroki są proste po specyfikacji protokołu i przedstawiono je na poniższej liście:

Dodaj obsługę HTTP dla ścieżki programu obsługi zdarzeń, powiedzmy /eventhandler.

Najpierw chcemy obsłużyć żądania OPTIONS związane z ochroną przed nadużyciami. Sprawdzamy, czy nagłówek zawiera nagłówek WebHook-Request-Origin, i zwracamy nagłówek WebHook-Allowed-Origin. Dla uproszczenia, na potrzeby demonstracji, zwracamy *, aby zezwolić na wszystkie źródła.

# 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

Następnie chcemy sprawdzić, czy żądania przychodzące są oczekiwanymi zdarzeniami. Załóżmy, że teraz interesuje nas zdarzenie systemowe connected, które powinno zawierać nagłówek ce-type w postaci azure.webpubsub.sys.connected. Dodajemy logikę po zabezpieczeniu przed nadużyciami:

# 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

W powyższym kodzie po prostu drukujemy komunikat do konsoli, gdy klient jest połączony. Jak widać, używamy request.headers.get('ce-userid'), aby zobaczyć tożsamość podłączonego klienta.

ce-type zdarzenia message to zawsze azure.webpubsub.user.message. Szczegóły zawierają komunikat o zdarzeniu. Aktualizujemy logikę tak, aby po nadejściu komunikatu był on rozsyłany do wszystkich połączonych klientów.

@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

Aktualizowanie strony internetowej

Teraz zaktualizujmy index.html, aby dodać logikę nawiązywania połączenia, wysyłania wiadomości i wyświetlania na stronie odebranych wiadomości.

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

W powyższym kodzie widać, że używamy natywnego interfejsu WebSocket API w przeglądarce oraz WebSocket.send() do wysyłania wiadomości i WebSocket.onmessage do nasłuchiwania przychodzących wiadomości.

Możesz również użyć zestawów SDK klienta, aby nawiązać połączenie z usługą, co umożliwia automatyczne ponowne nawiązywanie połączenia, obsługę błędów i nie tylko.

Teraz pozostało jeszcze jeden krok, aby czat działał. Skonfigurujmy, które zdarzenia nas interesują i dokąd mają być wysyłane w usłudze Web PubSub.

Konfigurowanie programu obsługi zdarzeń

Ustawiamy procedurę obsługi zdarzeń w usłudze Web PubSub, aby wskazać usłudze, dokąd ma wysyłać zdarzenia.

Kiedy serwer internetowy działa lokalnie, jak usługa Web PubSub wywołuje hosta lokalnego, jeśli nie ma punktu końcowego dostępnego dla Internetu? Zwykle istnieją dwa sposoby. Jednym sposobem jest udostępnienie localhosta publicznie przy użyciu uniwersalnego narzędzia do tunelowania, a drugim — użycie awps-tunnel do tunelowania ruchu z usługi Web PubSub przez to narzędzie do lokalnego serwera.

W tej sekcji użyjemy interfejsu wiersza polecenia platformy Azure, aby ustawić programy obsługi zdarzeń i użyć narzędzia awps-tunnel do kierowania ruchu do hosta lokalnego.

Konfigurowanie ustawień centrum

Ustawiliśmy szablon adresu URL tak, aby używał schematu tunnel, dzięki czemu usługa Web PubSub kierowała komunikaty przez połączenie tunelowe elementu awps-tunnel. Procedury obsługi zdarzeń można ustawić z poziomu portalu lub interfejsu wiersza polecenia zgodnie z opisem w tym artykule. W tym miejscu ustawiliśmy je za pomocą interfejsu wiersza polecenia. Ponieważ nasłuchujemy zdarzeń w ścieżce /eventhandler, jak ustawiono w poprzednim kroku, ustawiamy szablon adresu URL na tunnel:///eventhandler.

Użyj polecenia interfejsu wiersza polecenia platformy Azure (Azure CLI) az webpubsub hub create, aby utworzyć ustawienia obsługi zdarzeń dla centrum Sample_ChatApp.

Ważne

Zastąp <your-unique-resource-name> nazwą zasobu Web PubSub utworzonego w poprzednich krokach.

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"

Uruchamianie aplikacji awps-tunnel lokalnie

Pobieranie i instalowanie aplikacji awps-tunnel

Narzędzie działa w Node.js w wersji 16 lub nowszej.

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

Użyj parametrów połączenia z usługą i uruchom

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

Uruchamianie serwera internetowego

Teraz wszystko jest ustawione. Uruchommy serwer WWW i pobawmy się działającą aplikacją czatu.

Teraz uruchom serwer przy użyciu polecenia dotnet run --urls http://localhost:8080.

Kompletny przykład kodu tego samouczka można znaleźć tutaj.

Teraz uruchom serwer przy użyciu poniższego polecenia:

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

Kompletny przykład kodu tego samouczka można znaleźć tutaj.

Otwórz http://localhost:8080/index.html. Możesz wprowadzić nazwę użytkownika i rozpocząć rozmowę.

Odroczone uwierzytelnianie z procedurą obsługi zdarzeń `connect`

W poprzednich sekcjach pokazano, jak używać punktu końcowego negocjowania w celu zwrócenia adresu URL usługi Web PubSub i tokenu dostępu JWT dla klientów w celu nawiązania połączenia z usługą Web PubSub. W niektórych przypadkach, na przykład urządzeń brzegowych dysponujących ograniczonymi zasobami, klienci mogą preferować bezpośrednie łączenie się z zasobami Web PubSub. W takich przypadkach można skonfigurować program obsługi zdarzenia connect, aby realizował opóźnione uwierzytelnianie klientów, przypisywał klientom identyfikator użytkownika, określał grupy, do których klienci dołączają po nawiązaniu połączenia, konfigurował uprawnienia klientów oraz podprotokół WebSocket jako odpowiedź WebSocket wysyłaną do klienta itd. Szczegółowe informacje można znaleźć w specyfikacji programu obsługi zdarzenia connect.

Teraz użyjemy connect obsługi zdarzenia, aby osiągnąć efekt podobny do tego, jaki daje sekcja negotiate.

Aktualizowanie ustawień centrum

Najpierw zaktualizujmy ustawienia centrum, aby uwzględnić connect również procedurę obsługi zdarzeń, musimy również zezwolić na anonimowe łączenie, aby klienci bez tokenu dostępu JWT mogli łączyć się z usługą.

Użyj polecenia interfejsu wiersza polecenia platformy Azure az webpubsub hub update, aby utworzyć ustawienia obsługi zdarzeń dla huba Sample_ChatApp.

Ważne

Zastąp <your-unique-resource-name> nazwą zasobu Web PubSub utworzonego w poprzednich krokach.

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"

Aktualizowanie logiki nadrzędnej w celu obsługi zdarzenia połączenia

Teraz zaktualizujmy logikę nadrzędną, aby obsłużyć zdarzenie połączenia. Możemy również usunąć teraz punkt końcowy negocjatowania.

Podobnie jak w przypadku negocjowania punktu końcowego jako celu demonstracyjnego, odczytamy również identyfikator z parametrów zapytania. W przypadku połączenia oryginalne zapytanie klienta jest zachowywane w treści żądania połączenia.

Wewnątrz klasy Sample_ChatApp nadpisz OnConnectAsync(), aby obsłużyć zdarzenie connect:

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

Zaktualizuj server.js w celu obsługi zdarzenia połączenia klienta:

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

Teraz dodajmy logikę obsługi zdarzenia connect 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);
    }
});

Teraz obsłużmy zdarzenie systemowe connect , które powinno zawierać nagłówek ce-type jako azure.webpubsub.sys.connect. Dodajemy logikę po zabezpieczeniu przed nadużyciami:

@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

Zaktualizuj plik index.html pod kątem połączenia bezpośredniego

Teraz zaktualizujmy stronę internetową, aby bezpośrednio nawiązać połączenie z usługą Web PubSub. Warto wspomnieć, że obecnie na potrzeby demonstracji punkt końcowy usługi Web PubSub jest na stałe zakodowany w kodzie klienta; zaktualizuj nazwę hosta usługi <the host name of your service> w poniższym kodzie HTML, używając wartości z własnej usługi. Nadal przydatne może być pobranie wartości punktu końcowego usługi Web PubSub z serwera, co zapewnia większą elastyczność i możliwość kontrolowania lokalizacji, z którą klient nawiązuje połączenie.

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

Ponowne uruchamianie serwera

Teraz ponownie uruchom serwer i odwiedź stronę internetową zgodnie z instrukcjami przed. Jeśli zatrzymano awps-tunnel, proszę również ponownie uruchomić narzędzie do tunelowania.

Następne kroki

Ten samouczek zawiera podstawowe informacje na temat działania systemu zdarzeń w usłudze Azure Web PubSub.

Zapoznaj się z innymi samouczkami, aby dowiedzieć się więcej na temat korzystania z usługi.

Zapoznaj się z więcej przykładów usługi Azure Web PubSub

Opinia

Czy ta strona była pomocna?

Last updated on 2026-08-31

Samouczek: tworzenie aplikacji do czatu za pomocą usługi Azure Web PubSub

Wymagania wstępne

Tworzenie wystąpienia usługi Azure Web PubSub

Tworzenie grupy zasobów

Utwórz wystąpienie usługi Web PubSub

Pobierz ConnectionString do późniejszego użycia

Konfigurowanie projektu

Wymagania wstępne

Tworzenie aplikacji

Dodawanie negocjowanego punktu końcowego

Obsługa zdarzeń

Aktualizowanie strony internetowej

Konfigurowanie programu obsługi zdarzeń

Konfigurowanie ustawień centrum

Uruchamianie aplikacji awps-tunnel lokalnie

Pobieranie i instalowanie aplikacji awps-tunnel

Użyj parametrów połączenia z usługą i uruchom

Uruchamianie serwera internetowego

Odroczone uwierzytelnianie z procedurą obsługi zdarzeń connect

Aktualizowanie ustawień centrum

Aktualizowanie logiki nadrzędnej w celu obsługi zdarzenia połączenia

Zaktualizuj plik index.html pod kątem połączenia bezpośredniego

Ponowne uruchamianie serwera

Następne kroki

Opinia

Dodatkowe zasoby

Odroczone uwierzytelnianie z procedurą obsługi zdarzeń `connect`