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

In build a chat app tutorial, you learn how to use WebSocket APIs to send and receive data with Azure Web PubSub. Sie sehen, dass kein Protokoll erforderlich ist, wenn der Client mit dem Dienst kommuniziert. Sie können z. B. einen beliebigen Datentyp senden WebSocket.send(), 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. den Ereignisnamen nicht angeben, wenn Sie das Ereignis an Ihren Server senden oder eine Nachricht an andere Clients veröffentlichen, anstatt sie an Ihren Server zu senden. In diesem Lernprogramm erfahren Sie, wie Sie unterprotocol 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 kein Azure-Abonnement haben, erstellen Sie ein kostenloses Azure-Konto, bevor Sie beginnen.

Voraussetzungen

• Verwenden Sie die Bash-Umgebung in Azure Cloud Shell. Weitere Informationen finden Sie unter Schnellstart für Bash in 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. Informationen zu anderen Anmeldeoptionen finden Sie unter Anmelden mit 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 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.

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 in den folgenden Beispielen <your-unique-resource-name> durch den Namen Ihrer Web PubSub-Instanz.

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.

Abrufen der Verbindungszeichenfolge zur späteren Verwendung

Wichtig

Eine Verbindungszeichenfolge enthält die Autorisierungsinformationen, die Ihre Anwendung für den Zugriff auf den Azure Web PubSub-Dienst benötigt. Der Zugriffsschlüssel in der Verbindungszeichenfolge ähnelt einem Stammkennwort für Ihren Dienst. Achten Sie in Produktionsumgebungen immer gut darauf, Ihre Zugriffsschlüssel zu schützen. Verwenden Sie Azure Key Vault zum sicheren Verwalten und Rotieren Ihrer Schlüssel. 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.

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 Verbinden ionString, und verwenden Sie später in diesem Lernprogramm als Wert von <connection_string>.

Einrichten des Projekts

Voraussetzungen

C#

• ASP.NET Core 3.1 oder höher

JavaScript

• Node.js 12.x oder höher

Python

• Python

Java

• Java Development Kit (JDK), Version 8 oder höher
• Apache Maven

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.

1. Installieren von Abhängigkeiten

   C#

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

   JavaScript

   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
   

   Python

   mkdir logstream
   cd logstream
   # Create venv
   python -m venv env
   # Active venv
   source ./env/bin/activate
   
   pip install azure-messaging-webpubsubservice
   

   Java

   Sie verwenden das Javalin-Webframework zum Hosten der Webseiten。

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

   2. Jetzt fügen Sie das Azure Web PubSub SDK und die Webframeworkabhängigkeit javalin dem Knoten dependencies in pom.xml hinzu:

      • javalin: einfaches Webframework für Java
      • slf4j-simple: Protokollierung 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>
      

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

   C#

   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 zum Generieren des Clientzugriffstokens mit /negotiate-Anforderungen.

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

   JavaScript

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

   Python

   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 Resquest(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), Resquest)
       print('server started')
       server.serve_forever()
   
   

   Java

   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 Sprachstufe möglicherweise explizit auf Java 8 im 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>
   

3. Erstellen der Webseite

   C#

   Erstellen Sie eine HTML-Seite mit folgendem Inhalt, und speichern Sie sie als wwwroot/index.html:

   JavaScript

   Erstellen Sie eine HTML-Seite mit folgendem Inhalt, und speichern Sie sie als public/index.html:

   Python

   Erstellen Sie eine HTML-Seite mit folgendem Inhalt, und speichern Sie sie als public/index.html:

   Java

   Erstellen Sie eine HTML-Seite mit folgendem Inhalt, und speichern Sie sie unter /src/main/resources/public/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.

4. Ausführen des Servers

   C#

   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
   

   JavaScript

   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
   

   Python

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

   Java

   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 auf ">-Inspect ->Developer Tools" klicken und die Registerkarte "Netzwerk " auswählen. Laden Sie die Webseite, und Sie können sehen, dass die WebSocket-Verbindung hergestellt wird. Wählen Sie diese Option aus, um die WebSocket-Verbindung zu überprüfen. Die folgende connected Ereignismeldung wird im Client empfangen. 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. Bei subprotocol verfügt der Client über mehr Funktionen, indem 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 eine große Datenmenge 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.

1. Erstellen des Streamingprogramms

   C#

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

   JavaScript

   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.

   Python

   Ö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
   
   

   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.

   Java

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

   2. Fügen Sie 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>
      

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

   4. 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 hier ein neues Konzept "Gruppe" vorhanden ist. 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. Details zu den Begriffen finden Sie in des grundlegenden Konzepten.

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

3. Aktualisieren Sie weiterhin die ws.onmessage-Rückruflogik geringfügig, um die JSON-Antwort zu analysieren und lediglich Nachrichten der stream-Gruppe auszugeben, sodass sie als Livestreamausgabe fungiert.

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

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

   C#

   Legen Sie ungefähr wie folgt roles in Startup.cs mit GenerateClientAccessUri fest:

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

   JavaScript

   Fügen Sie ungefähr wie folgt roles in server.js mit getClientAccessToken hinzu:

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

   Python

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

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

   Java

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

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

5. Wenden Sie schließlich eine Formatierung in index.html an, damit die Seite ansprechend angezeigt wird.

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

Führen Sie nun den folgenden Code aus, und geben Sie text ein, und sie werden im Browser in Echtzeit angezeigt:

C#

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.

JavaScript

node stream

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

Python

Jetzt können Sie einen beliebigen Text eingeben python stream.pyund in Echtzeit im Browser angezeigt werden.

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.

Java

Jetzt können Sie unter Code ausführen, beliebigen Text eingeben und im Browser in Echtzeit angezeigt werden.

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 Lernprogramm erhalten Sie eine grundlegende Vorstellung davon, wie Sie eine Verbindung mit dem Web PubSub-Dienst herstellen und wie Sie Nachrichten mithilfe von Unterprotocol für die verbundenen Clients veröffentlichen.

Bearbeiten Sie weitere Tutorials, um mehr über die Nutzung des Diensts zu erfahren.

Weitere Beispiele für Azure Web PubSub