Zelfstudie: Berichten publiceren en abonneren tussen WebSocket-clients met behulp van subprotocol in de Azure Web PubSub-service

In de zelfstudie Een chat-app bouwen hebt u geleerd hoe u WebSocket-API's gebruikt om gegevens te verzenden en te ontvangen met Azure Web PubSub. U kunt zien dat er geen protocol nodig is wanneer de client communiceert met de service. U kunt bijvoorbeeld elk type gegevens verzenden met behulp WebSocket.send()van en de server ontvangt deze op dezelfde manier. WebSocket-API's zijn eenvoudig te gebruiken, maar de functionaliteit is beperkt. U kunt bijvoorbeeld niet de naam van de gebeurtenis opgeven bij het verzenden van de gebeurtenis naar uw server of het bericht publiceren naar andere clients in plaats van deze naar uw server te verzenden. In deze zelfstudie leert u hoe u subprotocol gebruikt om de functionaliteit van de client uit te breiden.

In deze zelfstudie leert u het volgende:

Een Web PubSub-service-exemplaar maken
Genereer de volledige URL om de WebSocket-verbinding tot stand te brengen
Berichten publiceren tussen WebSocket-clients met behulp van subprotocol

Als u geen Azure-account hebt, maak dan een gratis account aan voordat u begint.

Vereisten

Gebruik de Bash-omgeving in Azure Cloud Shell. Zie Aan de slag met Azure Cloud Shell voor meer informatie.
Installeer de Azure CLI, indien gewenst, om CLI-referentieopdrachten uit te voeren. Als u in Windows of macOS werkt, kunt u Azure CLI uitvoeren in een Docker-container. Zie De Azure CLI uitvoeren in een Docker-container voor meer informatie.
- Als u een lokale installatie gebruikt, meldt u zich aan bij Azure CLI met behulp van de opdracht az login. Volg de stappen die worden weergegeven in de terminal, om het verificatieproces te voltooien. Zie Verifiëren bij Azure met behulp van Azure CLI voor andere aanmeldingsopties.
- Installeer de Azure CLI-extensie bij het eerste gebruik, wanneer u hierom wordt gevraagd. Zie Extensies gebruiken en beheren met de Azure CLIvoor meer informatie over extensies.
- Voer az version uit om de geïnstalleerde versie en afhankelijke bibliotheken te vinden. Voer az upgrade uit om te upgraden naar de nieuwste versie.

Voor deze installatie is versie 2.22.0 of hoger van de Azure CLI vereist. Als u Azure Cloud Shell gebruikt, is de nieuwste versie al geïnstalleerd.

Belangrijk

Onbewerkte verbindingsreeks worden alleen in dit artikel weergegeven voor demonstratiedoeleinden.

Een verbindingsreeks bevat de autorisatiegegevens die nodig zijn voor uw toepassing voor toegang tot de Azure Web PubSub-service. De toegangssleutel in de verbindingsreeks is vergelijkbaar met een hoofdwachtwoord voor uw service. Beveilig uw toegangssleutels altijd in productieomgevingen. Gebruik Azure Key Vault om uw sleutels veilig te beheren en te roteren en uw verbinding te beveiligen.WebPubSubServiceClient

Vermijd het distribueren van toegangssleutels naar andere gebruikers, het coderen ervan of het opslaan van ze ergens in tekst zonder opmaak die toegankelijk is voor anderen. Draai uw sleutels als u denkt dat ze mogelijk zijn aangetast.

Een Azure Web PubSub-exemplaar maken

Een brongroep maken

Een resourcegroep is een logische container waarin Azure-resources worden geïmplementeerd en beheerd. Gebruik de opdracht az group create om een resourcegroep te maken met de naam myResourceGroup op de eastus locatie.

az group create --name myResourceGroup --location EastUS

Een Web PubSub-exemplaar maken

Voer az extension add uit om de webpubsub-extensie te installeren of bij te werken naar de huidige versie.

az extension add --upgrade --name webpubsub

Gebruik de azure CLI az webpubsub create command om een Web PubSub te maken in de resourcegroep die u hebt gemaakt. Met de volgende opdracht maakt u een gratis Web PubSub-resource onder resourcegroep myResourceGroup in EastUS:

Belangrijk

Elke Web PubSub-resource moet een unieke naam hebben. Vervang <uw unieke resourcenaam> door de naam van uw Web PubSub in de volgende voorbeelden.

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

In de uitvoer van deze opdracht ziet u eigenschappen van de zojuist gemaakte resource. Let op de onderstaande twee eigenschappen:

Resourcenaam: de naam die u hebt opgegeven voor de --name bovenstaande parameter.
hostName: In het voorbeeld is <your-unique-resource-name>.webpubsub.azure.com/de hostnaam .

Op dit moment is uw Azure-account de enige die gemachtigd is om bewerkingen uit te voeren op deze nieuwe resource.

ConnectionString ophalen voor toekomstig gebruik

Onbewerkte verbindingsreeks worden alleen in dit artikel weergegeven voor demonstratiedoeleinden. Beveilig uw toegangssleutels altijd in productieomgevingen. Gebruik Azure Key Vault om uw sleutels veilig te beheren en te roteren en uw verbinding te beveiligen.WebPubSubServiceClient

Gebruik de azure CLI az webpubsub key command om de ConnectionString van de service op te halen. Vervang de <your-unique-resource-name> tijdelijke aanduiding door de naam van uw Azure Web PubSub-exemplaar.

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

Kopieer de verbindingsreeks om later te gebruiken.

Kopieer de opgehaalde ConnectionString en gebruik later in deze zelfstudie als de waarde van <connection_string>.

Het project instellen

Vereisten

ASP.NET Core 3.1 of hoger

Een subprotocol gebruiken

De client kan een WebSocket-verbinding starten met behulp van een specifiek subprotocol. De Azure Web PubSub-service ondersteunt een subprotocol dat wordt aangeroepen json.webpubsub.azure.v1 om clients in staat te stellen rechtstreeks via de Web PubSub-service te publiceren/abonneren in plaats van een retour naar de upstream-server. Controleer het door Azure Web PubSub ondersteunde JSON WebSocket-subprotocol voor meer informatie over het subprotocol.

Als u andere protocolnamen gebruikt, worden deze genegeerd door de service en passthrough naar de server in de gebeurtenis-handler voor verbinding, zodat u uw eigen protocollen kunt bouwen.

We gaan nu een webtoepassing maken met behulp van het json.webpubsub.azure.v1 subprotocol.

Afhankelijkheden installeren

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

U gebruikt het Javalin-webframework om de webpagina's te hosten。

Laten we eerst Maven gebruiken om een nieuwe app logstream-webserver te maken en over te schakelen naar de map 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

Laten we de Azure Web PubSub SDK en de afhankelijkheid van het javalin webframework toevoegen aan het dependencies knooppunt van pom.xml:

javalin: eenvoudig webframework voor Java
slf4j-simple: Logger voor Java
azure-messaging-webpubsub: De serviceclient-SDK voor het gebruik van 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>

Maak de serverzijde om de /negotiate API en webpagina te hosten.

Werk Program.cs bij met de onderstaande code.

Gebruik AddAzureClients dit om de serviceclient toe te voegen en de verbindingsreeks uit de configuratie te lezen.
Voeg app.UseStaticFiles(); toe voordat app.Run(); u statische bestanden ondersteunt.
En werk app.MapGet bij om het clienttoegangstoken met /negotiate aanvragen te genereren.

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

Maak een server.js onderstaande code en voeg deze toe:

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

Maak een server.py om de /negotiate API en webpagina te hosten.

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

Laten we naar de map /src/main/java/com/webpubsub/tutorial navigeren, het App.java-bestand openen in uw editor, gebruiken Javalin.create om statische bestanden te verwerken:

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

Afhankelijk van uw installatie moet u mogelijk het taalniveau expliciet instellen op Java 8 in de pom.xml. Voeg het volgende codefragment toe:

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

De webpagina maken

Maak een HTML-pagina met onderstaande inhoud en sla deze op 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>

De bovenstaande code maakt verbinding met de service en drukt een bericht af dat op de pagina is ontvangen. De belangrijkste wijziging is dat we het subprotocol opgeven bij het maken van de WebSocket-verbinding.

De server uitvoeren
- C#
- JavaScript
- Python
- Java
We gebruiken het hulpprogramma Secret Manager voor .NET Core om de verbindingsreeks in te stellen. Voer de onderstaande opdracht uit, vervang deze door <connection_string> de opdracht die u in de vorige stap hebt opgehaald en open http://localhost:5000/index.html deze in de browser:
```
dotnet user-secrets init
dotnet user-secrets set Azure:WebPubSub:ConnectionString "<connection-string>"
dotnet run
```
Voer nu de onderstaande opdracht uit, waarbij u <connection-string> de ConnectionString in de vorige stap vervangt en http://localhost:8080 opent in de browser:
```
export WebPubSubConnectionString="<connection-string>"
node server
```
Voer nu de onderstaande opdracht uit, waarbij u <connection-string> de ConnectionString in de vorige stap vervangt en http://localhost:8080 opent in de browser:
```
python server.py "<connection-string>"
```
Voer nu de onderstaande opdracht uit, waarbij u <connection-string> de ConnectionString in de vorige stap vervangt en http://localhost:8080 opent in de browser:
```
mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.tutorial.App" -Dexec.cleanupDaemonThreads=false -Dexec.args="'<connection_string>'"
```
Als u Chrome gebruikt, kunt u op F12 drukken of met de rechtermuisknop op ->Inspect ->Developer Tools klikken en het tabblad Netwerk selecteren. Laad de webpagina en u kunt zien dat de WebSocket-verbinding tot stand is gebracht. Selecteer deze optie om de WebSocket-verbinding te inspecteren. Hieronder ziet u het onderstaande connected gebeurtenisbericht wordt ontvangen in de client. U kunt zien dat u de connectionId gegenereerde client kunt ophalen.
```
{"type":"system","event":"connected","userId":null,"connectionId":"<the_connection_id>"}
```

U kunt zien dat u met behulp van subprotocol enkele metagegevens van de verbinding kunt ophalen wanneer de verbinding is connected.

De client ontvangt nu een JSON-bericht in plaats van een tekst zonder opmaak. JSON-bericht bevat meer informatie, zoals het type en de bron van het bericht. U kunt deze informatie dus gebruiken om meer verwerking voor het bericht uit te voeren (bijvoorbeeld het bericht weergeven in een andere stijl als het afkomstig is van een andere bron), die u in latere secties kunt vinden.

Berichten van client publiceren

Wanneer de client in de zelfstudie Een chat-app bouwen een bericht verzendt via een WebSocket-verbinding met de Web PubSub-service, activeert de service een gebruikersevenement aan de serverzijde. Met subprotocol heeft de client meer functionaliteiten door een JSON-bericht te verzenden. U kunt bijvoorbeeld berichten rechtstreeks vanuit de client publiceren via de Web PubSub-service naar andere clients.

Dit is handig als u in realtime een grote hoeveelheid gegevens naar andere clients wilt streamen. We gaan deze functie gebruiken om een logboekstreamingtoepassing te bouwen, waarmee consolelogboeken in realtime naar de browser kunnen worden gestreamd.

Het streamingprogramma maken

stream Een programma maken:

mkdir stream
cd stream
dotnet new console

Werk Program.cs bij met de volgende inhoud:

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

Maak een stream.js met de volgende inhoud.

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

Met de bovenstaande code wordt een WebSocket-verbinding met de service gemaakt en vervolgens wanneer er gegevens worden ontvangen die worden gebruikt ws.send() om de gegevens te publiceren. Als u naar anderen wilt publiceren, hoeft u alleen een groepsnaam in het bericht in te stellen typesendToGroup en op te geven.

Open een ander bash-venster voor het stream programma en installeer de websockets afhankelijkheid:

mkdir stream
cd stream

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

pip install websockets

Maak een stream.py met de volgende inhoud.

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

Laten we een andere terminal gebruiken en teruggaan naar de hoofdmap om een streamingconsole-app logstream-streaming te maken en over te schakelen naar de map 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

Laten we HttpClient-afhankelijkheden toevoegen aan het dependencies knooppunt van 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>

Nu gaan we WebSocket gebruiken om verbinding te maken met de service. Laten we naar de map /src/main/java/com/webpubsub/quickstart gaan, het App.java-bestand openen in uw editor en code vervangen door de onderstaande code:

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

Navigeer naar de map met het pom.xml-bestand en voer het project uit met behulp van de onderstaande opdracht

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

Hier ziet u een nieuwe conceptgroep. Groep is logisch concept in een hub waar u een bericht kunt publiceren naar een groep verbindingen. In een hub kunt u meerdere groepen hebben en één client zich tegelijkertijd op meerdere groepen abonneren. Wanneer u subprotocol gebruikt, kunt u alleen publiceren naar een groep in plaats van naar de hele hub te uitzenden. Raadpleeg de basisconcepten voor meer informatie over de voorwaarden.

Omdat we hier groep gebruiken, moeten we ook de webpagina index.html bijwerken om lid te worden van de groep wanneer de WebSocket-verbinding tot stand is gebracht binnen ws.onopen callback.
```
let ackId = 0;
ws.onopen = () => {
  console.log('connected');
  ws.send(JSON.stringify({
    type: 'joinGroup',
    group: 'stream',
    ackId: ++ackId
  }));
};
```
U kunt zien dat de client lid wordt van de groep door een bericht in joinGroup het type te verzenden.

Werk de ws.onmessage callbacklogica ook enigszins bij om het JSON-antwoord te parseren en de berichten alleen uit stream de groep af te drukken, zodat deze fungeert als livestreamprinter.

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

Voor beveiligingsoverweging kan een client standaard niet zelf een groep publiceren of erop abonneren. U hebt dus gemerkt dat we zijn ingesteld roles op de client bij het genereren van het token:

Stel de roles status in GenerateClientAccessUri zoals Startup.cs hieronder:

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

Voeg de roles invoeging getClientAccessToken toe zoals server.js hieronder:

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

Stel de juiste rollen in op de client tijdens server.py het genereren van het toegangstoken:

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

Stel de juiste rollen in op de client tijdens App.java het genereren van het toegangstoken:

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

Pas ten slotte ook wat stijl toe zodat index.html deze mooi wordt weergegeven.

<html>

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

Voer nu de onderstaande code uit en typ tekst en deze worden in realtime weergegeven in de browser:

ls -R | dotnet run

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

Of u maakt het langzamer, zodat u kunt zien dat de gegevens in realtime naar de browser worden gestreamd:

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

Hier vindt u het volledige codevoorbeeld van deze zelfstudie.

node stream

U kunt deze app ook gebruiken om uitvoer van een andere console-app door te sturen en naar de browser te streamen. Voorbeeld:

ls -R | node stream

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

Of u maakt het langzamer, zodat u kunt zien dat de gegevens in realtime naar de browser worden gestreamd:

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

Hier vindt u het volledige codevoorbeeld van deze zelfstudie.

U kunt nu elke tekst typen python stream.pyen deze worden in realtime weergegeven in de browser.

U kunt deze app ook gebruiken om uitvoer van een andere console-app door te sturen en naar de browser te streamen. Voorbeeld:

ls -R | python stream.py

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

Of u maakt het langzamer, zodat u kunt zien dat de gegevens in realtime naar de browser worden gestreamd:

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

Hier vindt u het volledige codevoorbeeld van deze zelfstudie.

U kunt nu onderstaande code uitvoeren, tekst typen en deze in realtime in de browser worden weergegeven.

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

Hier vindt u het volledige codevoorbeeld van deze zelfstudie.

Volgende stappen

Deze zelfstudie biedt een basisidee van hoe u verbinding maakt met de Web PubSub-service en hoe u berichten publiceert naar de verbonden clients met behulp van subprotocol.

Bekijk andere zelfstudies voor meer informatie over het gebruik van de service.

Meer Voorbeelden van Azure Web PubSub verkennen

Feedback

Is deze pagina nuttig?

Last updated on 2024-12-12

Delen via

Zelfstudie: Berichten publiceren en abonneren tussen WebSocket-clients met behulp van subprotocol

Vereisten

Een Azure Web PubSub-exemplaar maken

Een brongroep maken

Een Web PubSub-exemplaar maken

ConnectionString ophalen voor toekomstig gebruik

Het project instellen

Vereisten

Een subprotocol gebruiken

Berichten van client publiceren

Volgende stappen

Feedback

Aanvullende resources