Samouczek — publikowanie i subskrybowanie komunikatów między klientami WebSocket przy użyciu podprotokołu w usłudze Azure Web PubSub

W samouczku Tworzenie aplikacji czatu dowiesz się, jak używać interfejsów API WebSocket do wysyłania i odbierania danych za pomocą usługi Azure Web PubSub. Jeśli klient komunikuje się z usługą, nie jest potrzebny żaden protokół. Na przykład można wysłać dowolny typ danych przy użyciu polecenia WebSocket.send(), a serwer odbiera je tak samo, jak jest. Korzystanie z interfejsów API WebSocket jest łatwe, ale ich możliwości są ograniczone. Na przykład nie można określić nazwy zdarzenia podczas wysyłania zdarzenia na serwer lub publikowania komunikatu do innych klientów zamiast wysyłania go na serwer. Z tego samouczka dowiesz się, jak za pomocą podprotocol rozszerzyć funkcjonalność klienta.

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

Utwórz wystąpienie usługi Web PubSub
Generowanie pełnego adresu URL w celu ustanowienia połączenia protokołu WebSocket
Publikowanie komunikatów między klientami WebSocket za pomocą podprotokołu

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.

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.

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

Nieprzetworzone parametry połączenia są wyświetlane tylko w tym artykule w celach demonstracyjnych. 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.

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 pobrany element ConnectionString i użyj go w dalszej części tego samouczka jako wartość <connection_string>.

Konfigurowanie projektu

Wymagania wstępne

ASP.NET Core 3.1 lub nowszy

Używanie podprotokolu

Klient może uruchomić połączenie protokołu WebSocket przy użyciu określonego podprotokolu. Usługa Azure Web PubSub obsługuje podprotokół o nazwie json.webpubsub.azure.v1, który umożliwia klientom publikowanie/subskrybowanie bezpośrednio za pośrednictwem usługi Web PubSub, bez konieczności komunikacji zwrotnej z serwerem nadrzędnym. Szczegółowe informacje na temat tego podprotokołu można znaleźć w artykule Obsługiwany przez usługę Azure Web PubSub podprotokół JSON WebSocket.

Jeśli używasz innych nazw protokołów, usługa je zignoruje i przekaże do serwera w procedurze obsługi zdarzenia connect, dzięki czemu możesz tworzyć własne protokoły.

Teraz utwórzmy aplikację internetową przy użyciu podprotokolu json.webpubsub.azure.v1 .

Instalowanie zależności

mkdir logstream
cd logstream
dotnet new web
dotnet add package Microsoft.Extensions.Azure
dotnet add package Azure.Messaging.WebPubSub

mkdir logstream
cd logstream
npm init -y
npm install --save express
npm install --save ws
npm install --save node-fetch
npm install --save @azure/web-pubsub

mkdir logstream
cd logstream
# Create venv
python -m venv env
# Active venv
source ./env/bin/activate

pip install azure-messaging-webpubsubservice

Platforma internetowa Javalin służy do hostowania stron internetowych。

Najpierw użyjemy narzędzia Maven, aby utworzyć nową aplikację logstream-webserver i przełączyć się do folderu logstream-webserver :

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

Dodajmy zestaw SDK usługi Azure Web PubSub oraz zależność od struktury internetowej javalin do węzła dependencies w pom.xml:

javalin: prosta struktura internetowa dla języka Java
slf4j-simple: Rejestrator dla języka Java
azure-messaging-webpubsub: zestaw SDK klienta usługi do korzystania z usługi Azure Web PubSub

<dependency>
    <groupId>com.azure</groupId>
    <artifactId>azure-messaging-webpubsub</artifactId>
    <version>1.0.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/io.javalin/javalin -->
<dependency>
    <groupId>io.javalin</groupId>
    <artifactId>javalin</artifactId>
    <version>3.13.6</version>
</dependency>

<dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-simple</artifactId>
    <version>1.7.30</version>
</dependency>

Utwórz stronę serwera do hostowania interfejsu /negotiate API i strony internetowej.

Zaktualizuj Program.cs za pomocą poniższego kodu.

Użyj AddAzureClients polecenia , aby dodać klienta usługi i odczytać parametry połączenia z konfiguracji.
Dodaj app.UseStaticFiles(); element przed app.Run(); , aby obsługiwać pliki statyczne.
I zaktualizuj app.MapGet, aby wygenerować token dostępu klienta za pomocą żądań /negotiate.

using Azure.Messaging.WebPubSub;
using Microsoft.Extensions.Azure;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddAzureClients(s =>
{
    s.AddWebPubSubServiceClient(builder.Configuration["Azure:WebPubSub:ConnectionString"], "stream");
});

var app = builder.Build();
app.UseStaticFiles();
app.MapGet("/negotiate", async context =>
{
    var service = context.RequestServices.GetRequiredService<WebPubSubServiceClient>();
    var response = new
    {
        url = service.GetClientAccessUri(roles: new string[] { "webpubsub.sendToGroup.stream", "webpubsub.joinLeaveGroup.stream" }).AbsoluteUri
    };
    await context.Response.WriteAsJsonAsync(response);
});

app.Run();

Utwórz poniższy server.js kod i dodaj go:

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

let service = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, 'stream');
const app = express();

app.get('/negotiate', async (req, res) => {
  let token = await service.getClientAccessToken({
    roles: ['webpubsub.sendToGroup.stream', 'webpubsub.joinLeaveGroup.stream']
  });
  res.send({
    url: token.url
  });
});

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

Utwórz server.py, aby obsługiwać interfejs API /negotiate i stronę internetową.

import json
import sys

from http.server import HTTPServer, SimpleHTTPRequestHandler

from azure.messaging.webpubsubservice import WebPubSubServiceClient

service = WebPubSubServiceClient.from_connection_string(sys.argv[1], hub='stream')

class Request(SimpleHTTPRequestHandler):
    def do_GET(self):
        if self.path == '/':
            self.path = 'public/index.html'
            return SimpleHTTPRequestHandler.do_GET(self)
        elif self.path == '/negotiate':
            roles = ['webpubsub.sendToGroup.stream',
                     'webpubsub.joinLeaveGroup.stream']
            token = service.get_client_access_token(roles=roles)
            self.send_response(200)
            self.send_header('Content-Type', 'application/json')
            self.end_headers()
            self.wfile.write(json.dumps({
                'url': token['url']
            }).encode())

if __name__ == '__main__':
    if len(sys.argv) != 2:
        print('Usage: python server.py <connection-string>')
        exit(1)

    server = HTTPServer(('localhost', 8080), Request)
    print('server started')
    server.serve_forever()

Przejdźmy do katalogu /src/main/java/com/webpubsub/tutorial , otwórz plik App.java w edytorze, użyj polecenia Javalin.create , aby obsłużyć pliki statyczne:

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 io.javalin.Javalin;

public class App {
    public static void main(String[] args) {

        if (args.length != 1) {
            System.out.println("Expecting 1 arguments: <connection-string>");
            return;
        }

        // create the service client
        WebPubSubServiceClient service = new WebPubSubServiceClientBuilder()
                .connectionString(args[0])
                .hub("chat")
                .buildClient();

        // start a server
        Javalin app = Javalin.create(config -> {
            config.addStaticFiles("public");
        }).start(8080);


        // Handle the negotiate request and return the token to the client
        app.get("/negotiate", ctx -> {
            GetClientAccessTokenOptions option = new GetClientAccessTokenOptions();
            option.addRole("webpubsub.sendToGroup.stream");
            option.addRole("webpubsub.joinLeaveGroup.stream");
            WebPubSubClientAccessToken token = service.getClientAccessToken(option);

            // return JSON string
            ctx.result("{\"url\":\"" + token.getUrl() + "\"}");
            return;
        });
    }
}

W zależności od konfiguracji może być konieczne jawne ustawienie poziomu języka java 8 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>

Tworzenie strony internetowej

Utwórz stronę HTML z poniższą zawartością i zapisz ją jako wwwroot/index.html:

<html>
  <body>
    <div id="output"></div>
    <script>
      (async function () {
        let res = await fetch('/negotiate')
        let data = await res.json();
        let ws = new WebSocket(data.url, 'json.webpubsub.azure.v1');
        ws.onopen = () => {
          console.log('connected');
        };

        let output = document.querySelector('#output');
        ws.onmessage = event => {
          let d = document.createElement('p');
          d.innerText = event.data;
          output.appendChild(d);
        };
      })();
    </script>
  </body>
</html>

Powyższy kod łączy się z usługą i wyświetla wszelkie komunikaty odebrane na stronie. Główną zmianą jest określenie podprotokolu podczas tworzenia połączenia protokołu WebSocket.

Uruchamianie serwera
- C#
- JavaScript
- Pyton
- Jawa
Do ustawienia parametry połączenia używamy narzędzia Secret Manager dla platformy .NET Core. Uruchom poniższe polecenie, zastępując <connection_string> element pobrany w poprzednim kroku i otwórz http://localhost:5000/index.html w przeglądarce:
```
dotnet user-secrets init
dotnet user-secrets set Azure:WebPubSub:ConnectionString "<connection-string>"
dotnet run
```
Teraz uruchom poniższe polecenie, zastępując <connection-string> parametrem ConnectionString pobranym w poprzednim kroku, i otwórz http://localhost:8080 w przeglądarce:
```
export WebPubSubConnectionString="<connection-string>"
node server
```
Teraz uruchom poniższe polecenie, zastępując element <connection-string> wartością ConnectionString pobraną w poprzednim kroku, a następnie otwórz http://localhost:8080 w przeglądarce:
```
python server.py "<connection-string>"
```
Teraz uruchom poniższe polecenie, zastępując <connection-string> elementem ConnectionString pobranym w poprzednim kroku, i otwórz http://localhost:8080 w przeglądarce:
```
mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.tutorial.App" -Dexec.cleanupDaemonThreads=false -Dexec.args="'<connection_string>'"
```
Jeśli używasz Chrome, możesz nacisnąć F12 lub kliknąć prawym przyciskiem myszy opcję ->Inspect ->Developer Tools i wybrać kartę Network. Załaduj stronę internetową, a zobaczysz, że połączenie WebSocket zostało nawiązane. Wybierz tę opcję, aby sprawdzić połączenie WebSocket. Poniżej widać, że klient odbiera komunikat zdarzenia connected. Zobaczysz, że możesz pobrać connectionId wygenerowany dla tego klienta.
```
{"type":"system","event":"connected","userId":null,"connectionId":"<the_connection_id>"}
```

Widać, że za pomocą podprotokołu można uzyskać pewne metadane połączenia, gdy połączenie ma stan connected.

Klient otrzymuje teraz komunikat JSON zamiast zwykłego tekstu. Komunikat JSON zawiera więcej informacji, takich jak typ i źródło komunikatu. Dzięki temu możesz użyć tych informacji, aby wykonać więcej przetwarzania komunikatu (na przykład wyświetlić komunikat w innym stylu, jeśli pochodzi z innego źródła), które można znaleźć w kolejnych sekcjach.

Publikowanie komunikatów z klienta

W samouczku Tworzenie aplikacji do czatu, gdy klient wysyła wiadomość przez połączenie WebSocket do usługi Web PubSub, usługa wywołuje zdarzenie użytkownika po stronie Twojego serwera. Dzięki podprotokołowi klient zyskuje więcej funkcji poprzez wysyłanie komunikatu JSON. Można na przykład publikować komunikaty bezpośrednio z klienta za pośrednictwem usługi Web PubSub do innych klientów.

Jest to przydatne, jeśli chcesz przesyłać strumieniowo dużą ilość danych do innych klientów w czasie rzeczywistym. Użyjmy tej funkcji, aby utworzyć aplikację do przesyłania strumieniowego dzienników, która może przesyłać strumieniowo dzienniki konsoli do przeglądarki w czasie rzeczywistym.

Tworzenie programu do strumieniowania

Utwórz stream program:

mkdir stream
cd stream
dotnet new console

Zaktualizuj Program.cs przy użyciu następującej zawartości:

using System;
using System.Net.Http;
using System.Net.WebSockets;
using System.Text;
using System.Text.Json;
using System.Threading.Tasks;

namespace stream
{
    class Program
    {
        private static readonly HttpClient http = new HttpClient();
        static async Task Main(string[] args)
        {
            // Get client url from remote
            var stream = await http.GetStreamAsync("http://localhost:5000/negotiate");
            var url = (await JsonSerializer.DeserializeAsync<ClientToken>(stream)).url;
            var client = new ClientWebSocket();
            client.Options.AddSubProtocol("json.webpubsub.azure.v1");

            await client.ConnectAsync(new Uri(url), default);

            Console.WriteLine("Connected.");
            var streaming = Console.ReadLine();
            while (streaming != null)
            {
                if (!string.IsNullOrEmpty(streaming))
                {
                    var message = JsonSerializer.Serialize(new
                    {
                        type = "sendToGroup",
                        group = "stream",
                        data = streaming + Environment.NewLine,
                    });
                    Console.WriteLine("Sending " + message);
                    await client.SendAsync(Encoding.UTF8.GetBytes(message), WebSocketMessageType.Text, true, default);
                }

                streaming = Console.ReadLine();
            }

            await client.CloseAsync(WebSocketCloseStatus.NormalClosure, null, default);
        }

        private sealed class ClientToken
        {
            public string url { get; set; }
        }
    }
}

Utwórz element stream.js z następującą zawartością.

const WebSocket = require('ws');
const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));

async function main() {
  let res = await fetch(`http://localhost:8080/negotiate`);
  let data = await res.json();
  let ws = new WebSocket(data.url, 'json.webpubsub.azure.v1');
  let ackId = 0;
  ws.on('open', () => {
    process.stdin.on('data', data => {
      ws.send(JSON.stringify({
        type: 'sendToGroup',
        group: 'stream',
        ackId: ++ackId,
        dataType: 'text',
        data: data.toString()
      }));
    });
  });
  ws.on('message', data => console.log("Received: %s", data));
  process.stdin.on('close', () => ws.close());
}

main();

Powyższy kod tworzy połączenie WebSocket z usługą, a następnie za każdym razem, gdy otrzyma dane, używa ws.send(), aby je opublikować. Aby publikować innym, wystarczy ustawić type na sendToGroup i określić nazwę grupy w wiadomości.

Otwórz inne okno powłoki bash dla programu stream i zainstaluj zależność websockets:

mkdir stream
cd stream

# Create venv
python -m venv env
# Active venv
source ./env/bin/activate

pip install websockets

Utwórz element stream.py z następującą zawartością.

import asyncio
import sys
import threading
import time
import websockets
import requests
import json

async def connect(url):
    async with websockets.connect(url, subprotocols=['json.webpubsub.azure.v1']) as ws:
        print('connected')
        id = 1
        while True:
            data = input()
            payload = {
                'type': 'sendToGroup',
                'group': 'stream',
                'dataType': 'text',
                'data': str(data + '\n'),
                'ackId': id
            }
            id = id + 1
            await ws.send(json.dumps(payload))
            await ws.recv()

if __name__ == '__main__':
    res = requests.get('http://localhost:8080/negotiate').json()

    try:
        asyncio.get_event_loop().run_until_complete(connect(res['url']))
    except KeyboardInterrupt:
        pass

Powyższy kod tworzy połączenie WebSocket z usługą, a następnie za każdym razem, gdy otrzyma dane, używa ws.send(), aby opublikować te dane. Aby publikować dla innych, wystarczy ustawić type na sendToGroup i podać nazwę grupy w komunikacie.

Użyjmy innego terminalu i wróćmy do folderu głównego, aby utworzyć aplikację logstream-streaming konsolową przesyłania strumieniowego i przełączyć się do folderu logstream-streaming :

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

Dodajmy zależności HttpClient do węzła dependencies w pom.xml:

<!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpclient -->
<dependency>
    <groupId>org.apache.httpcomponents</groupId>
    <artifactId>httpclient</artifactId>
    <version>4.5.13</version>
</dependency>
<dependency>
  <groupId>com.google.code.gson</groupId>
  <artifactId>gson</artifactId>
  <version>2.8.9</version>
</dependency>

Teraz użyjemy protokołu WebSocket, aby nawiązać połączenie z usługą. Przejdźmy do katalogu /src/main/java/com/webpubsub/quickstart , otwórz plik App.java w edytorze i zastąp kod poniższym kodem:

package com.webpubsub.quickstart;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import java.net.http.WebSocket;
import java.util.concurrent.CompletionStage;

import com.google.gson.Gson;

public class App 
{
    public static void main( String[] args ) throws IOException, InterruptedException
    {
        HttpClient client = HttpClient.newHttpClient();
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("http://localhost:8080/negotiate"))
            .build();

        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());

        Gson gson = new Gson();

        String url = gson.fromJson(response.body(), Entity.class).url;

        WebSocket ws = HttpClient.newHttpClient().newWebSocketBuilder().subprotocols("json.webpubsub.azure.v1")
                .buildAsync(URI.create(url), new WebSocketClient()).join();
        int id = 0;
        BufferedReader reader = new BufferedReader(new InputStreamReader(System.in));
        String streaming = reader.readLine();
        App app = new App();
        while (streaming != null && !streaming.isEmpty()){
            String frame = gson.toJson(app.new GroupMessage(streaming + "\n", ++id));
            System.out.println("Sending: " + frame);
            ws.sendText(frame, true);
            streaming = reader.readLine();
        }
    }

    private class GroupMessage{
        public String data;
        public int ackId;
        public final String type = "sendToGroup";
        public final String group = "stream";

        GroupMessage(String data, int ackId){
            this.data = data;
            this.ackId = ackId;
        }
    }

    private static final class WebSocketClient implements WebSocket.Listener {
        private WebSocketClient() {
        }

        @Override
        public void onOpen(WebSocket webSocket) {
            System.out.println("onOpen using subprotocol " + webSocket.getSubprotocol());
            WebSocket.Listener.super.onOpen(webSocket);
        }

        @Override
        public CompletionStage<?> onText(WebSocket webSocket, CharSequence data, boolean last) {
            System.out.println("onText received " + data);
            return WebSocket.Listener.super.onText(webSocket, data, last);
        }

        @Override
        public void onError(WebSocket webSocket, Throwable error) {
            System.out.println("Bad day! " + webSocket.toString());
            WebSocket.Listener.super.onError(webSocket, error);
        }
    }

    private static final class Entity {
        public String url;
    }
}

Przejdź do katalogu zawierającego plik pom.xml i uruchom projekt przy użyciu poniższego polecenia

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

Tutaj możesz zobaczyć, że pojawiło się nowe pojęcie „group”. Grupa to logiczna koncepcja w hubie, w ramach której można opublikować wiadomość do grupy połączeń. W centrum można mieć wiele grup, a jeden klient może jednocześnie subskrybować wiele grup. W przypadku korzystania z podprotocol można publikować tylko w grupie zamiast emitować do całego centrum. Aby uzyskać szczegółowe informacje na temat terminów, zapoznaj się z podstawowymi pojęciami.

Ponieważ tutaj używamy grupy, musimy również zaktualizować stronę internetową index.html, aby dołączała do grupy po ustanowieniu połączenia WebSocket w funkcji wywołania zwrotnego ws.onopen.
```
let ackId = 0;
ws.onopen = () => {
  console.log('connected');
  ws.send(JSON.stringify({
    type: 'joinGroup',
    group: 'stream',
    ackId: ++ackId
  }));
};
```
Możesz zobaczyć, że klient dołącza do grupy, wysyłając wiadomość typu joinGroup.

Nieznacznie zaktualizuj również logikę funkcji zwrotnej ws.onmessage, aby parsowała odpowiedź JSON i wypisywała komunikaty tylko z grupy stream, tak aby działała jak mechanizm wypisywania strumienia na żywo.

ws.onmessage = event => {
  let message = JSON.parse(event.data);
  if (message.type === 'message' && message.group === 'stream') {
    let d = document.createElement('span');
    d.innerText = message.data;
    output.appendChild(d);
    window.scrollTo(0, document.body.scrollHeight);
  }
};

Ze względów bezpieczeństwa klient domyślnie nie może samodzielnie publikować w grupie ani subskrybować grupy. Jak więc zauważyliście, ustawiliśmy roles jako klienta podczas generowania tokenu:

Ustaw roles, gdy GenerateClientAccessUri w Startup.cs, jak poniżej:

service.GenerateClientAccessUri(roles: new string[] { "webpubsub.sendToGroup.stream", "webpubsub.joinLeaveGroup.stream" })

Dodaj element roles, gdy getClientAccessToken w server.js, jak poniżej:

app.get('/negotiate', async (req, res) => {
  let token = await service.getClientAccessToken({
    roles: ['webpubsub.sendToGroup.stream', 'webpubsub.joinLeaveGroup.stream']
  });
  ...
});

Ustaw poprawne role klienta w server.py procesie generowania tokenu dostępu:

roles = ['webpubsub.sendToGroup.stream',
          'webpubsub.joinLeaveGroup.stream']
token = service.get_client_access_token(roles=roles)

Ustaw poprawne role klienta w App.java procesie generowania tokenu dostępu:

GetClientAccessTokenOptions option = new GetClientAccessTokenOptions();
option.addRole("webpubsub.sendToGroup.stream");
option.addRole("webpubsub.joinLeaveGroup.stream");
WebPubSubClientAccessToken token = service.getClientAccessToken(option);

Na koniec zastosuj również jakiś styl, aby index.html dobrze się wyświetlał.

<html>

  <head>
    <style>
      #output {
        white-space: pre;
        font-family: monospace;
      }
    </style>
  </head>

Teraz uruchom poniższy kod i wpisz dowolny tekst i są one wyświetlane w przeglądarce w czasie rzeczywistym:

ls -R | dotnet run

# Or call `dir /s /b | dotnet run` when you are using CMD under Windows

Albo możesz spowolnić działanie, aby zobaczyć, że dane są przesyłane strumieniowo do przeglądarki w czasie rzeczywistym:

for i in $(ls -R); do echo $i; sleep 0.1; done | dotnet run

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

node stream

Możesz też użyć tej aplikacji do przekierowania dowolnych danych wyjściowych z innej aplikacji konsolowej i przesyłania ich strumieniowo do przeglądarki. Na przykład:

ls -R | node stream

# Or call `dir /s /b | node stream` when you are using CMD under Windows

Albo możesz to spowolnić, aby zobaczyć, że dane są przesyłane strumieniowo do przeglądarki w czasie rzeczywistym:

for i in $(ls -R); do echo $i; sleep 0.1; done | node stream

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

Teraz możesz uruchomić polecenie python stream.py, wpisz dowolny tekst i są one wyświetlane w przeglądarce w czasie rzeczywistym.

Możesz też użyć tej aplikacji, aby przekierować do niej dowolne dane wyjściowe z innej aplikacji konsolowej i przesyłać je strumieniowo do przeglądarki. Na przykład:

ls -R | python stream.py

# Or call `dir /s /b | python stream.py` when you are using CMD under Windows

Możesz też to spowolnić, aby zobaczyć, że dane są strumieniowo przesyłane do przeglądarki w czasie rzeczywistym:

for i in $(ls -R); do echo $i; sleep 0.1; done | python stream.py

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

Teraz możesz uruchomić poniższy kod, wpisać dowolny tekst i są one wyświetlane w przeglądarce w czasie rzeczywistym.

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

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

Następne kroki

Ten samouczek przedstawia podstawy łączenia się z usługą Web PubSub oraz publikowania komunikatów do połączonych klientów przy użyciu podprotokołu.

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: publikowanie i subskrybowanie wiadomości między klientami WebSocket przy użyciu podprotokołu

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

Używanie podprotokolu

Publikowanie komunikatów z klienta

Następne kroki

Opinia

Dodatkowe zasoby