Kurz – Publikování a přihlášení k odběru zpráv mezi klienty WebSocket pomocí subprotocolu ve službě Azure Web PubSub

Článek
01/03/2024

V kurzu k vytvoření chatovací aplikace jste zjistili, jak pomocí rozhraní WebSocket API odesílat a přijímat data pomocí azure Web PubSub. Když klient komunikuje se službou, uvidíte, že není potřeba žádný protokol. Můžete například odeslat libovolný typ dat pomocí WebSocket.send()a server je přijme stejně, jako je. Proces rozhraní API protokolu WebSocket se snadno používá, ale funkce jsou omezené. Například při odesílání události na server nemůžete zadat název události nebo publikovat zprávu jiným klientům místo odeslání na server. V tomto kurzu se naučíte používat subprotocol k rozšíření funkcí klienta.

V tomto kurzu se naučíte:

Vytvoření instance služby Web PubSub
Vygenerování úplné adresy URL pro navázání připojení WebSocket
Publikování zpráv mezi klienty Protokolu WebSocket pomocí subprotocolu

Pokud ještě nemáte předplatné Azure, vytvořte si bezplatný účet Azure před tím, než začnete.

Požadavky

Použijte prostředí Bash v Azure Cloud Shellu. Další informace najdete v tématu Rychlý start pro Bash v Azure Cloud Shellu.
Pokud dáváte přednost místnímu spouštění referenčních příkazů rozhraní příkazového řádku, nainstalujte Azure CLI. Pokud používáte Windows nebo macOS, zvažte spuštění Azure CLI v kontejneru Docker. Další informace najdete v tématu Jak spustit Azure CLI v kontejneru Dockeru.
- Pokud používáte místní instalaci, přihlaste se k Azure CLI pomocí příkazu az login. Pokud chcete dokončit proces ověřování, postupujte podle kroků zobrazených na terminálu. Další možnosti přihlášení najdete v tématu Přihlášení pomocí Azure CLI.
- Po zobrazení výzvy nainstalujte rozšíření Azure CLI při prvním použití. Další informace o rozšířeních najdete v tématu Využití rozšíření v Azure CLI.
- Spuštěním příkazu az version zjistěte verzi a závislé knihovny, které jsou nainstalované. Pokud chcete upgradovat na nejnovější verzi, spusťte az upgrade.

Tato instalace vyžaduje verzi 2.22.0 nebo vyšší rozhraní příkazového řádku Azure CLI. Pokud používáte Azure Cloud Shell, je už nainstalovaná nejnovější verze.

Vytvoření instance Azure Web PubSub

Vytvoření skupiny zdrojů

Skupina prostředků je logický kontejner, ve kterém se nasazují a spravují prostředky Azure. Pomocí příkazu az group create vytvořte skupinu prostředků s názvem myResourceGroup v eastus umístění.

az group create --name myResourceGroup --location EastUS

Vytvoření instance Web PubSub

Spuštěním příkazu az extension add nainstalujte nebo upgradujte rozšíření webpubsub na aktuální verzi.

az extension add --upgrade --name webpubsub

Pomocí příkazu az webpubsub az webpubsub vytvořte web pubSub ve skupině prostředků, kterou jste vytvořili. Následující příkaz vytvoří prostředek Free Web PubSub ve skupině prostředků myResourceGroup v eastUS:

Důležité

Každý prostředek Web PubSub musí mít jedinečný název. V následujících příkladech nahraďte <název_prostředku-unique-resource názvem> podsítě Web PubSub.

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

Výstup tohoto příkazu zobrazuje vlastnosti nově vytvořeného prostředku. Poznamenejte si hodnoty dvou vlastností uvedených níže:

Název prostředku: Název, který jste zadali výše uvedenému parametru --name .
hostName: V příkladu je <your-unique-resource-name>.webpubsub.azure.com/název hostitele .

V tuto chvíli je váš účet Azure jediným autorizovaným k provádění jakýchkoli operací s tímto novým prostředkem.

Získání Připojení ionString pro budoucí použití

Důležité

Připojovací řetězec obsahuje informace o autorizaci vyžadované pro vaši aplikaci pro přístup ke službě Azure Web PubSub. Přístupový klíč uvnitř připojovací řetězec je podobný kořenovému heslu pro vaši službu. Vprodukčních Pomocí služby Azure Key Vault můžete klíče bezpečně spravovat a otáčet. Vyhněte se distribuci přístupových klíčů ostatním uživatelům, jejich pevnému kódování nebo jejich uložení kdekoli ve formátu prostého textu, který je přístupný ostatním uživatelům. Otočte klíče, pokud se domníváte, že mohly být ohroženy.

Pomocí příkazu azure CLI az webpubsub key získejte Připojení ionString služby. <your-unique-resource-name> Zástupný symbol nahraďte názvem vaší instance Azure Web PubSub.

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

Zkopírujte připojovací řetězec pro pozdější použití.

Zkopírujte načtenou Připojení ionString a použijte později v tomto kurzu jako hodnotu <connection_string>.

Nastavení projektu

Požadavky

ASP.NET Core 3.1 nebo novější

Použití dílčího souhrnu

Klient může spustit připojení WebSocket pomocí konkrétního dílčího protokolu. Služba Azure Web PubSub podporuje podprotokol, json.webpubsub.azure.v1 která umožňuje klientům provádět publikování a odběr přímo prostřednictvím služby Web PubSub místo doby odezvy na nadřazený server. Podrobnosti o subprotocolu pro podsoučet websocketu ve službě Azure Web PubSub podporuje JSON WebSocket.

Pokud používáte jiné názvy protokolů, služba je bude ignorovat a předat server v obslužné rutině události connect, takže můžete vytvořit vlastní protokoly.

Teď vytvoříme webovou aplikaci pomocí subprotocolu json.webpubsub.azure.v1 .

Instalace závislostí

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

K hostování webových stránek použijete webovou architekturu Javalin 。

Nejprve pomocí Mavenu vytvoříme novou aplikaci logstream-webserver a přepneme do složky 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

Pojďme do uzlu pom.xmlpřidat sadu Azure Web PubSub SDK a javalin závislost webové architektury:dependencies

javalin: jednoduchá webová architektura pro Javu
slf4j-simple: Logger pro Javu
azure-messaging-webpubsub: Klientská sada SDK služby pro použití služby 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>

Vytvořte serverovou stranu pro hostování /negotiate rozhraní API a webové stránky.

Aktualizujte Program.cs ho následujícím kódem.

Slouží AddAzureClients k přidání klienta služby a čtení připojovací řetězec z konfigurace.
Přidejte app.UseStaticFiles(); před app.Run(); podporu statických souborů.
Aktualizujte a vygenerujte app.MapGet přístupový token klienta s /negotiate požadavky.

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

Vytvořte server.js a přidejte následující kód:

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

Vytvořte pro server.py hostování /negotiate rozhraní API a webové stránky.

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

Pojďme přejít do adresáře /src/main/java/com/webpubsub/tutorial , otevřít soubor App.java v editoru, použít Javalin.create k poskytování statických souborů:

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

V závislosti na vašem nastavení možná budete muset explicitně nastavit jazykovou úroveň na Javu 8 v souboru pom.xml. Přidejte následující fragment kódu:

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

Vytvoření webové stránky

Vytvořte stránku HTML s následujícím obsahem a uložte ji jako wwwroot/index.html:

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

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

Výše uvedený kód se připojí ke službě a vytiskne všechny přijaté zprávy na stránku. Hlavní změnou je, že při vytváření připojení WebSocket určíme subprotocol.

Spuštění serveru
- C#
- JavaScript
- Python
- Java
K nastavení připojovací řetězec používáme nástroj Secret Manager pro .NET Core. Spusťte následující příkaz, nahraďte <connection_string> ho načítaným v předchozím kroku a otevřete http://localhost:5000/index.html ho v prohlížeči:
```
dotnet user-secrets init
dotnet user-secrets set Azure:WebPubSub:ConnectionString "<connection-string>"
dotnet run
```
Teď spusťte následující příkaz a nahraďte <connection-string> Připojení ionString načtený v předchozím kroku a otevřete http://localhost:8080 ho v prohlížeči:
```
export WebPubSubConnectionString="<connection-string>"
node server
```
Teď spusťte následující příkaz a nahraďte <connection-string> Připojení ionString načtený v předchozím kroku a otevřete http://localhost:8080 ho v prohlížeči:
```
python server.py "<connection-string>"
```
Teď spusťte následující příkaz a nahraďte <connection-string> Připojení ionString načtený v předchozím kroku a otevřete http://localhost:8080 ho v prohlížeči:
```
mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.tutorial.App" -Dexec.cleanupDaemonThreads=false -Dexec.args="'<connection_string>'"
```
Pokud používáte Chrome, můžete stisknout klávesu F12 nebo kliknout pravým tlačítkem na -Inspect ->>Developer Tools a vybrat kartu Síť. Načtěte webovou stránku a uvidíte, že je navázáno připojení WebSocket. Vyberte, pokud chcete zkontrolovat připojení WebSocket, v klientovi se zobrazí následující connected zpráva události. Vidíte, že pro tohoto klienta můžete získat vygenerované connectionId .
```
{"type":"system","event":"connected","userId":null,"connectionId":"<the_connection_id>"}
```

Můžete vidět, že pomocí subprotocol, můžete získat metadata připojení, když je connectedpřipojení .

Klient teď místo prostého textu obdrží zprávu JSON. Zpráva JSON obsahuje další informace, jako je typ a zdroj zprávy. Tyto informace tedy můžete použít k dalšímu zpracování zprávy (například zobrazení zprávy v jiném stylu, pokud pochází z jiného zdroje), které najdete v dalších částech.

Publikování zpráv z klienta

Když klient odešle zprávu prostřednictvím připojení WebSocket ke službě Web PubSub, spustí v kurzu k vytvoření chatovací aplikace událost uživatele na straně serveru. V případě subprotocolu má klient více funkcí odesláním zprávy JSON. Můžete například publikovat zprávy přímo z klienta prostřednictvím služby Web PubSub jiným klientům.

To je užitečné, pokud chcete streamovat velké množství dat jiným klientům v reálném čase. Pomocí této funkce vytvoříme aplikaci streamování protokolů, která může streamovat protokoly konzoly do prohlížeče v reálném čase.

Vytvoření streamovacího programu

Vytvoření stream programu:

mkdir stream
cd stream
dotnet new console

Aktualizujte Program.cs následujícím obsahem:

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

Vytvořte s následujícím obsahem stream.js .

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

Výše uvedený kód vytvoří připojení WebSocket ke službě a pokaždé, když obdrží nějaká data, která používá ws.send() k publikování dat. Pokud chcete publikovat ostatní, stačí nastavit type sendToGroup a zadat název skupiny ve zprávě.

Otevřete další okno Bash pro stream program a nainstalujte websockets závislost:

mkdir stream
cd stream

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

pip install websockets

Vytvořte s následujícím obsahem stream.py .

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

Pojďme použít jiný terminál a vraťme se do kořenové složky, abychom vytvořili aplikaci logstream-streaming konzoly streamování a přepněte do složky 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

Pojďme do uzlu pom.xmlpřidat závislosti HttpClient:dependencies

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

Teď se pomocí Protokolu WebSocket připojíme ke službě. Pojďme přejít do adresáře /src/main/java/com/webpubsub/quickstart , otevřít soubor App.java v editoru a nahradit kód následujícím kódem:

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

Přejděte do adresáře obsahujícího soubor pom.xml a spusťte projekt pomocí následujícího příkazu.

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

Tady vidíte nový koncept "group". Skupina je logický koncept v centru, kde můžete publikovat zprávu do skupiny připojení. V centru můžete mít více skupin a jeden klient se může přihlásit k odběru více skupin současně. Při použití subprotocolu můžete publikovat pouze do skupiny místo vysílání do celého centra. Podrobnosti o termínech najdete v základních konceptech.

Vzhledem k tomu, že zde používáme skupinu, musíme také aktualizovat webovou stránku index.html , aby se připojila ke skupině při navázání připojení WebSocket uvnitř ws.onopen zpětného volání.
```
let ackId = 0;
ws.onopen = () => {
  console.log('connected');
  ws.send(JSON.stringify({
    type: 'joinGroup',
    group: 'stream',
    ackId: ++ackId
  }));
};
```
Klient se ke skupině připojí tak, že odešle zprávu typu joinGroup .

Také aktualizujte logiku zpětného ws.onmessage volání mírně tak, aby parsuje odpověď JSON a vytiskla zprávy pouze ze stream skupiny tak, aby funguje jako tiskárna živého datového proudu.

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

Z hlediska zabezpečení nemůže klient ve výchozím nastavení publikovat nebo přihlásit k odběru skupiny sám sebe. Všimli jste si tedy, že jsme při generování tokenu nastavili roles klienta:

Nastavte následující roles GenerateClientAccessUri Startup.cs :

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

roles getClientAccessToken server.js Přidejte následující příklad:

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

Nastavte správné role pro klienta server.py během procesu generování přístupového tokenu:

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

Nastavte správné role pro klienta App.java během procesu generování přístupového tokenu:

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

Nakonec použijte nějaký styl tak index.html , aby se zobrazoval pěkně.

<html>

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

Teď spusťte následující kód a zadejte libovolný text a zobrazí se v prohlížeči v reálném čase:

ls -R | dotnet run

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

Nebo to zvolníte, abyste viděli, že se data streamují do prohlížeče v reálném čase:

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

Kompletní vzorový kód tohoto kurzu najdete tady.

node stream

Nebo můžete tuto aplikaci použít také ke kanálu libovolného výstupu z jiné konzolové aplikace a streamovat ho do prohlížeče. Příklad:

ls -R | node stream

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

Nebo to zvolníte, abyste viděli, že se data streamují do prohlížeče v reálném čase:

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

Kompletní vzorový kód tohoto kurzu najdete tady.

Teď můžete spustit python stream.py, zadejte libovolný text a zobrazí se v prohlížeči v reálném čase.

Nebo můžete tuto aplikaci použít také ke kanálu libovolného výstupu z jiné konzolové aplikace a streamovat ho do prohlížeče. Příklad:

ls -R | python stream.py

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

Nebo to zvolníte, abyste viděli, že se data streamují do prohlížeče v reálném čase:

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

Kompletní vzorový kód tohoto kurzu najdete tady.

Teď můžete spustit následující kód, zadat libovolný text a zobrazí se v prohlížeči v reálném čase.

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

Kompletní vzorový kód tohoto kurzu najdete tady.

Další kroky

V tomto kurzu najdete základní představu o tom, jak se připojit ke službě Web PubSub a jak publikovat zprávy do připojených klientů pomocí subprotocolu.

Projděte si další kurzy, ve které se dozvíte, jak službu používat.

Prozkoumání dalších ukázek Azure Web PubSub

Sdílet prostřednictvím

Požadavky

Vytvoření instance Azure Web PubSub

Vytvoření skupiny zdrojů

Vytvoření instance Web PubSub

Získání Připojení ionString pro budoucí použití

Nastavení projektu

Požadavky

Použití dílčího souhrnu

Publikování zpráv z klienta

Další kroky

Váš názor

Další materiály

Sdílet prostřednictvím

Kurz: Publikování a přihlášení k odběru zpráv mezi klienty WebSocket pomocí subprotocolu

Požadavky

Vytvoření instance Azure Web PubSub

Vytvoření skupiny zdrojů

Vytvoření instance Web PubSub

Získání Připojení ionString pro budoucí použití

Nastavení projektu

Požadavky

Použití dílčího souhrnu

Publikování zpráv z klienta

Další kroky

Váš názor

Další materiály