Tutorial: Veröffentlichen und Abonnieren von Nachrichten zwischen WebSocket-Clients mit einem Unterprotokoll im Azure Web PubSub-Dienst

Im Tutorial zum Erstellen einer Chat-App haben Sie gelernt, wie Sie WebSocket-APIs zum Senden und Empfangen von Daten mit Azure Web PubSub verwenden. Sie sehen, dass kein Protokoll erforderlich ist, wenn der Client mit dem Dienst kommuniziert. Sie können z. B. jede Art von Daten mithilfe von WebSocket.send() senden, und der Server empfängt ihn genauso wie er ist. Der WebSocket-APIs-Prozess ist einfach zu verwenden, die Funktionalität ist jedoch eingeschränkt. Sie können z. B. nicht den Ereignisnamen angeben, wenn Sie das Ereignis an Ihren Server senden, oder die Nachricht für andere Clients veröffentlichen, anstatt sie an Ihren Server zu senden. In diesem Tutorial erfahren Sie, wie Sie ein Unterprotokoll verwenden, um die Funktionalität des Clients zu erweitern.

In diesem Tutorial lernen Sie Folgendes:

Erstellen einer Web PubSub-Dienstinstanz
Generieren der vollständigen URL zum Herstellen der WebSocket-Verbindung
Veröffentlichen von Nachrichten zwischen WebSocket-Clients mit einem Unterprotokoll

Wenn Sie nicht über ein Azure-Konto verfügen, erstellen Sie ein kostenloses Konto , bevor Sie beginnen.

Voraussetzungen

Verwenden Sie die Bash-Umgebung in Azure Cloud Shell. Weitere Informationen finden Sie unter "Erste Schritte mit Azure Cloud Shell".
Wenn Sie CLI-Referenzbefehle lieber lokal ausführen, installieren Sie die Azure CLI. Wenn Sie Windows oder macOS ausführen, sollten Sie die Azure CLI in einem Docker-Container ausführen. Weitere Informationen finden Sie unter Ausführen der Azure CLI in einem Docker-Container.
- Wenn Sie eine lokale Installation verwenden, melden Sie sich mithilfe des Befehls az login bei der Azure CLI an. Führen Sie die in Ihrem Terminal angezeigten Schritte aus, um den Authentifizierungsprozess abzuschließen. Weitere Anmeldeoptionen finden Sie unter Authentifizieren bei Azure mithilfe der Azure CLI.
- Installieren Sie die Azure CLI-Erweiterung beim ersten Einsatz, wenn Sie dazu aufgefordert werden. Weitere Informationen zu Erweiterungen finden Sie unter Verwenden und Verwalten von Erweiterungen mit der Azure CLI.
- Führen Sie az version aus, um die installierte Version und die abhängigen Bibliotheken zu ermitteln. Führen Sie az upgrade aus, um das Upgrade auf die aktuelle Version durchzuführen.

Für dieses Setup ist mindestens Version 2.22.0 der Azure CLI erforderlich. Bei Verwendung von Azure Cloud Shell ist die aktuelle Version bereits installiert.

Wichtig

Unformatierte Verbindungszeichenfolgen werden in diesem Artikel nur zu Demonstrationszwecken angezeigt.

Eine Verbindungszeichenfolge enthält die Autorisierungsinformationen, die Ihre Anwendung benötigt, um auf den Azure Web PubSub-Dienst zuzugreifen. Der Zugangsschlüssel im Verbindungszeichenfolge fungiert wie ein Root-Passwort für deinen Dienst. Schützen Sie Ihre Zugriffsschlüssel in Produktionsumgebungen immer sorgfältig. Verwenden Sie Azure Key Vault zum sicheren Verwalten und Rotieren Ihrer Schlüssel und zum Schützen Ihrer Verbindung mit WebPubSubServiceClient.

Geben Sie Zugriffsschlüssel nicht an andere Benutzer weiter, vermeiden Sie das Hartcodieren, und speichern Sie die Schlüssel nicht als Klartext, auf den andere Benutzer Zugriff haben. Rotieren Sie die Schlüssel, wenn Sie glauben, dass sie möglicherweise gefährdet sind.

Erstellen einer Azure Web PubSub-Instanz

Erstellen einer Ressourcengruppe

Eine Ressourcengruppe ist ein logischer Container, in dem Azure-Ressourcen bereitgestellt und verwaltet werden. Erstellen Sie mithilfe des Befehls az group create eine Ressourcengruppe namens myResourceGroup in der Region eastus.

az group create --name myResourceGroup --location EastUS

Erstellen einer Web PubSub-Instanz

Führen Sie az extension add aus, um die Erweiterung webpubsub zu installieren bzw. auf die aktuelle Version zu aktualisieren.

az extension add --upgrade --name webpubsub

Verwenden Sie den Azure CLI-Befehl az webpubsub create, um eine Web PubSub-Instanz in der erstellten Ressourcengruppe zu erstellen. Mit dem folgenden Befehl wird eine Kostenlose Web-PubSub-Ressource unter der Ressourcengruppe myResourceGroup in USA, Osten erstellt:

Wichtig

Jede Web PubSub-Ressource muss einen eindeutigen Namen haben. Ersetzen Sie <your-unique-resource-name> in den folgenden Beispielen durch den Namen Ihrer Web PubSub.

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

In der Ausgabe dieses Befehls werden die Eigenschaften der neu erstellten Ressource angezeigt. Beachten Sie die beiden folgenden Eigenschaften:

Resource Name: Der Name, den Sie oben für den Parameter --name angegeben haben.
hostName: Im Beispiel lautet der Hostname <your-unique-resource-name>.webpubsub.azure.com/.

An diesem Punkt ist nur Ihr Azure-Konto zum Ausführen von Vorgängen für die neue Ressource autorisiert.

Rufen Sie die Verbindungszeichenfolge zur späteren Verwendung ab.

Unformatierte Verbindungszeichenfolgen werden in diesem Artikel nur zu Demonstrationszwecken angezeigt. Schützen Sie Ihre Zugriffsschlüssel in Produktionsumgebungen immer sorgfältig. Verwenden Sie Azure Key Vault zum sicheren Verwalten und Rotieren Ihrer Schlüssel und zum Schützen Ihrer Verbindung mit WebPubSubServiceClient.

Verwenden Sie den Azure CLI-Befehl az webpubsub key, um die Verbindungszeichenfolge (ConnectionString) des Diensts abzurufen. Ersetzen Sie den Platzhalter <your-unique-resource-name> durch den Namen Ihrer Azure Web PubSub-Instanz.

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

Kopieren Sie die Verbindungszeichenfolge zur späteren Verwendung.

Kopieren Sie die abgerufene ConnectionString und verwenden Sie sie später in diesem Tutorial als Wert von <connection_string>.

Einrichten des Projekts

Voraussetzungen

ASP.NET Core 3.1 oder höher

Verwenden eines Unterprotokolls

Der Client kann mithilfe eines bestimmten Unterprotokolls eine WebSocket-Verbindung starten. Der Azure Web PubSub-Dienst unterstützt ein Unterprotokoll namens json.webpubsub.azure.v1, um es Clients zu ermöglichen, Nachrichten direkt über den Web PubSub-Dienst zu veröffentlichen bzw. zu abonnieren – ohne Roundtrip zum Upstreamserver. Details zum Unterprotokoll finden Sie im Artikel zur Unterstützung des JSON WebSocket-Unterprotokolls für Azure Web PubSub.

Wenn Sie andere Protokollnamen verwenden, werden diese vom Dienst ignoriert und im Connect-Ereignishandler an den Server durchgelassen, sodass Sie eigene Protokolle erstellen können.

Lassen Sie uns jetzt eine Webanwendung mit dem Unterprotokoll json.webpubsub.azure.v1 erstellen.

Abhängigkeiten installieren

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

Sie verwenden das Webframework Javalin, um die Webseiten zu hosten.

Verwenden Sie zunächst Maven, um die neue App logstream-webserver zu erstellen und zum Ordner logstream-webserver zu wechseln:

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

Fügen wir das Azure Web PubSub SDK und die Abhängigkeit vom Webframework javalin in den Knoten dependencies von pom.xml hinzu:

javalin: einfaches Webframework für Java
slf4j-simple: Logger für Java
azure-messaging-webpubsub: Das Dienstclient-SDK für die Verwendung von 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>

Erstellen Sie die Serverseite zum Hosten der /negotiate-API und der Webseite.

Aktualisieren Sie Program.cs mit dem folgenden Code.

Verwenden Sie AddAzureClients, um den Dienstclient hinzuzufügen, und lesen Sie die Verbindungszeichenfolge aus der Konfiguration.
Fügen Sie app.UseStaticFiles(); vor app.Run(); ein, um statische Dateien zu unterstützen.
Aktualisieren Sie außerdem app.MapGet, um das Client-Zugriffstoken mit /negotiate-Anfragen zu generieren.

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

Erstellen Sie eine server.js, und fügen Sie den folgenden Code hinzu:

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

Erstellen Sie eine server.py zum Hosten der /negotiate-API und der Webseite.

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

Jetzt navigieren wir zum Verzeichnis /src/main/java/com/webpubsub/tutorial, öffnen die Datei App.java im Editor und verwenden Javalin.create zum Verarbeiten von statischen Dateien:

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

Je nach Setup müssen Sie die Sprachebene möglicherweise explizit auf Java 8 in pom.xml. festlegen. Fügen Sie den folgenden Codeausschnitt hinzu:

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

Erstellen der Webseite

Erstellen Sie eine HTML-Seite mit folgendem Inhalt, und speichern Sie sie als 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>

Der vorstehende Code stellt eine Verbindung mit dem Dienst her und gibt alle empfangenen Nachrichten auf der Seite aus. Die Hauptänderung besteht darin, dass wir das Unterprotokoll beim Erstellen der WebSocket-Verbindung angeben.

Starten Sie den Server
- C#
- JavaScript
- Python
- Java
Wir verwenden das Tool Secret Manager für .NET Core, um die Verbindungszeichenfolge festzulegen. Führen Sie den folgenden Befehl aus, ersetzen Sie <connection_string> darin durch den Wert, den Sie im vorherigen Schritt abgerufen haben, und öffnen Sie http://localhost:5000/index.html im Browser:
```
dotnet user-secrets init
dotnet user-secrets set Azure:WebPubSub:ConnectionString "<connection-string>"
dotnet run
```
Führen Sie den folgenden Befehl aus, ersetzen Sie <connection-string> darin durch den Wert von ConnectionString, den Sie im vorherigen Schritt abgerufen haben, und öffnen Sie http://localhost:8080 im Browser:
```
export WebPubSubConnectionString="<connection-string>"
node server
```
Führen Sie den folgenden Befehl aus, ersetzen Sie <connection-string> darin durch den Wert von ConnectionString, den Sie im vorherigen Schritt abgerufen haben, und öffnen Sie http://localhost:8080 im Browser:
```
python server.py "<connection-string>"
```
Führen Sie den folgenden Befehl aus, ersetzen Sie <connection-string> darin durch den Wert von ConnectionString, den Sie im vorherigen Schritt abgerufen haben, und öffnen Sie http://localhost:8080 im Browser:
```
mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.tutorial.App" -Dexec.cleanupDaemonThreads=false -Dexec.args="'<connection_string>'"
```
Wenn Sie Chrome verwenden, können Sie F12 drücken oder mit der rechten Maustaste –> Prüfen –>Entwicklertools klicken und die Registerkarte Netzwerk auswählen. Laden Sie die Website, und Sie können sehen, dass die WebSocket-Verbindung hergestellt wird. Wählen Sie diese Option aus, um die WebSocket-Verbindung zu überprüfen. Unten können Sie sehen, dass die folgende connected-Ereignismeldung beim Client empfangen wird. Sie sehen, dass Sie die für diesen Client generierte connectionId abrufen können.
```
{"type":"system","event":"connected","userId":null,"connectionId":"<the_connection_id>"}
```

Sie sehen, dass Sie mithilfe des Unterprotokolls einige Metadaten der Verbindung abrufen können, wenn der Verbindungsstatus connected ist.

Der Client empfängt jetzt eine JSON-Nachricht anstelle eines Nur-Texts. JSON-Nachricht enthält weitere Informationen, z. B. Typ und Quelle der Nachricht. Sie können diese Informationen verwenden, um die Nachricht weiter zu verarbeiten. Sie können die Nachricht z. B. in einem anderen Format anzeigen, wenn sie von einer anderen Quelle stammt. Dies wird in späteren Abschnitten behandelt.

Veröffentlichen von Nachrichten vom Client

Wenn der Client im Tutorial zum Erstellen einer Chat-App eine Nachricht über eine WebSocket-Verbindung an den Web PubSub-Dienst sendet, löst der Dienst ein serverseitiges Benutzerereignis aus. Beim Unterprotokoll ist die Funktionalität des Clients größer, da eine JSON-Nachricht gesendet wird. So können beispielsweise Nachrichten über den Web PubSub-Dienst direkt vom Client aus für andere Clients veröffentlicht werden.

Dies ist nützlich, wenn Sie umfangreiche Daten in Echtzeit an andere Clients streamen möchten. Wir verwenden dieses Feature, um eine Protokollstreaminganwendung zu erstellen, die Konsolenprotokolle in Echtzeit an den Browser streamen kann.

Erstellen des Streamingprogramms

Erstellen Sie ein stream-Programm:

mkdir stream
cd stream
dotnet new console

Aktualisieren Sie Program.cs mit dem folgenden Inhalt:

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

Erstellen Sie eine stream.js mit dem folgenden Inhalt.

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

Der obige Code stellt eine WebSocket-Verbindung zum Dienst her. Wenn er danach Daten empfängt, wird ws.send() verwendet, um die Daten zu veröffentlichen. Wenn die Veröffentlichung an andere erfolgen soll, müssen Sie lediglich type auf sendToGroup festlegen und einen Gruppennamen in der Nachricht angeben.

Öffnen Sie ein weiteres bash-Fenster für das stream-Programm, und installieren Sie die websockets-Abhängigkeit:

mkdir stream
cd stream

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

pip install websockets

Erstellen Sie eine stream.py mit dem folgenden Inhalt.

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

Verwenden Sie ein anderes Terminal, und wechseln Sie zurück zum Stammordner, um die Streaming-Konsolen-App logstream-streaming zu erstellen und zum Ordner logstream-streaming zu wechseln:

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

Fügen wir dem Knoten dependencies in pom.xml HttpClient-Abhängigkeiten hinzu:

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

Nun verwenden Sie WebSocket, um eine Verbindung mit dem Dienst herzustellen. Navigieren Sie zum Verzeichnis /src/main/java/com/webpubsub/quickstart, öffnen Sie die Datei App.java in Ihrem Editor, und ersetzen Sie den Code durch den folgenden:

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

Navigieren Sie zum Verzeichnis mit der Datei pom.xml, und führen Sie das Projekt mithilfe des folgenden Befehls aus:

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

Sie können sehen, dass es hier das neue Konzept einer „Gruppe“ gibt. Bei einer Gruppe handelt es sich um ein logisches Konzept in einem Hub, in dem Sie Nachrichten für eine Gruppe von Verbindungen veröffentlichen können. In einem Hub kann es mehrere Gruppen geben, und ein Client kann mehrere Gruppen gleichzeitig abonnieren. Bei Verwendung des Unterprotokolls können Sie die Veröffentlichung nur in einer Gruppe vornehmen, anstatt sie an den gesamten Hub zu übertragen. Weitere Informationen zu den Begriffen finden Sie in den Grundkonzepten.

Da wir hier die Gruppe verwenden, müssen wir auch die Webseite index.html aktualisieren, um der Gruppe beizutreten, wenn die WebSocket-Verbindung im ws.onopen-Rückruf hergestellt wird.
```
let ackId = 0;
ws.onopen = () => {
  console.log('connected');
  ws.send(JSON.stringify({
    type: 'joinGroup',
    group: 'stream',
    ackId: ++ackId
  }));
};
```
Sie können sehen, dass der Client der Gruppe beitritt, indem eine Nachricht mit dem joinGroup-Typ gesendet wird.

Aktualisieren Sie außerdem die ws.onmessage-Rückruflogik leicht, um die JSON-Antwort zu parsen und nur die Nachrichten aus der Gruppe stream auszugeben, sodass sie als Live-Stream-Ausgabe funktioniert.

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

Aus Sicherheitsgründen kann ein Client eine Gruppe standardmäßig nicht selbst veröffentlichen oder abonnieren. Sie haben also bemerkt, dass wir roles beim Generieren des Tokens für den Client festgelegt haben:

Legen Sie roles wie unten beschrieben fest, wenn GenerateClientAccessUri in Startup.cs:

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

Fügen Sie roles wie unten hinzu, wenn getClientAccessToken in server.js:

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

Legen Sie während des Erstellungsprozesses des Zugriffstokens die richtigen Rollen auf den Client in server.py fest:

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

Legen Sie während des Erstellungsprozesses des Zugriffstokens die richtigen Rollen auf den Client in App.java fest:

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

Wenden Sie schließlich auch etwas Stil auf index.html an, damit es ansprechend dargestellt wird.

<html>

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

Führen Sie nun den folgenden Code aus, und geben Sie beliebigen Text ein. Dieser wird im Browser in Echtzeit angezeigt:

ls -R | dotnet run

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

Sie können die Anzeige auch verlangsamen, damit Sie sehen können, wie die Daten in Echtzeit an den Browser gestreamt werden:

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

Das vollständige Codebeispiel für dieses Tutorial finden Sie hier.

node stream

Oder Sie können diese App auch verwenden, um die Ausgabe einer anderen Konsolenanwendung weiterzuleiten und an den Browser zu streamen. Zum Beispiel:

ls -R | node stream

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

Sie können die Anzeige auch verlangsamen, damit Sie sehen können, wie die Daten in Echtzeit an den Browser gestreamt werden:

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

Das vollständige Codebeispiel für dieses Tutorial finden Sie hier.

Jetzt können Sie python stream.py ausführen und beliebigen Text eingeben. Dieser wird im Browser in Echtzeit angezeigt.

Sie können diese App auch verwenden, um eine beliebige Ausgabe einer anderen Konsolen-App zu übernehmen und an den Browser zu streamen. Zum Beispiel:

ls -R | python stream.py

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

Sie können die Anzeige auch verlangsamen, damit Sie sehen können, wie die Daten in Echtzeit an den Browser gestreamt werden:

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

Das vollständige Codebeispiel für dieses Tutorial finden Sie hier.

Jetzt können Sie den folgenden Code ausführen und beliebigen Text eingeben. Dieser wird im Browser in Echtzeit angezeigt.

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

Das vollständige Codebeispiel für dieses Tutorial finden Sie hier.

Nächste Schritte

In diesem Tutorial haben Sie grundlegende Informationen dazu erhalten, wie Sie über das Unterprotokoll eine Verbindung mit dem Web PubSub-Dienst herstellen und Nachrichten auf den verbundenen Clients veröffentlichen.

Sehen Sie sich weitere Tutorials an, um tiefer in die Nutzung des Diensts einzutauchen.

Weitere Beispiele für Azure Web PubSub

Feedback

War diese Seite hilfreich?

Last updated on 2024-12-17

Tutorial: Veröffentlichen und Abonnieren von Nachrichten zwischen WebSocket-Clients mit einem Unterprotokoll

Voraussetzungen

Erstellen einer Azure Web PubSub-Instanz

Erstellen einer Ressourcengruppe

Erstellen einer Web PubSub-Instanz

Rufen Sie die Verbindungszeichenfolge zur späteren Verwendung ab.

Einrichten des Projekts

Voraussetzungen

Verwenden eines Unterprotokolls

Veröffentlichen von Nachrichten vom Client

Nächste Schritte

Feedback

Zusätzliche Ressourcen