Tutorial – Publicar e assinar mensagens entre clientes WebSocket usando o subprotocolo no serviço Azure Web PubSub

No tutorial Criar um aplicativo de chat, você aprendeu a usar APIs do WebSocket para enviar e receber dados com o Azure Web PubSub. Você pode ver que não há nenhum protocolo necessário quando o cliente está se comunicando com o serviço. Por exemplo, você pode enviar qualquer tipo de dados usando WebSocket.send() e o servidor os recebe exatamente como está. O processo de APIs do WebSocket é fácil de usar, mas a funcionalidade é limitada. Por exemplo, você não pode especificar o nome do evento ao enviar o evento para o servidor ou publicar mensagem para outros clientes em vez de enviá-lo para o servidor. Neste tutorial, você aprenderá a usar o subprotocolo para estender a funcionalidade do cliente.

Neste tutorial, você aprenderá a:

Criar uma instância do serviço Web PubSub
Gerar a URL completa para estabelecer a conexão WebSocket
Publicar mensagens entre clientes WebSocket usando um subprotocolo

Se você ainda não tiver uma conta do Azure, crie uma conta gratuita antes de começar.

Pré-requisitos

Use o ambiente Bash no Azure Cloud Shell. Para obter mais informações, confira Introdução ao Azure Cloud Shell.
Se preferir executar os comandos de referência da CLI localmente, instale a CLI do Azure. Para execuções no Windows ou no macOS, considere executar a CLI do Azure em um contêiner do Docker. Para obter mais informações, confira Como executar a CLI do Azure em um contêiner do Docker.
- Se estiver usando uma instalação local, entre com a CLI do Azure usando o comando az login. Para concluir o processo de autenticação, siga as etapas exibidas no terminal. Para obter outras opções de entrada, consulte Autenticar no Azure usando a CLI do Azure.
- Quando solicitado, instale a extensão da CLI do Azure no primeiro uso. Para obter mais informações sobre extensões, confira Usar e gerenciar extensões com a CLI do Azure.
- Execute az version para localizar a versão e as bibliotecas dependentes que estão instaladas. Para fazer a atualização para a versão mais recente, execute az upgrade.

Essa configuração requer a versão 2.22.0 ou superior da CLI do Azure. Se você está usando o Azure Cloud Shell, a versão mais recente já está instalada.

Importante

As cadeias de conexão brutas aparecem neste artigo somente para fins de demonstração.

Uma cadeia de conexão inclui as informações de autorização necessárias para que o seu aplicativo acesse o serviço Azure Web PubSub. A chave de acesso dentro da cadeia de conexão é semelhante a uma senha raiz para o serviço. Em ambientes de produção, sempre proteja suas chaves de acesso. Use o Azure Key Vault para gerenciar e girar suas chaves com segurança e proteger sua conexão com WebPubSubServiceClient.

Evite distribuir chaves de acesso para outros usuários, fazer hard-coding com elas ou salvá-las em qualquer lugar em texto sem formatação que seja acessível a outras pessoas. Gire suas chaves se você acredita que elas podem ter sido comprometidas.

Criar uma instância do Azure Web PubSub

Criar um grupo de recursos

Um grupo de recursos é um contêiner lógico no qual os recursos do Azure são implantados e gerenciados. Use o comando az group create para criar um grupo de recursos chamado myResourceGroup no local eastus.

az group create --name myResourceGroup --location EastUS

Criar uma instância do Web PubSub

Execute az extension add para instalar ou atualizar a extensão webpubsub para a versão atual.

az extension add --upgrade --name webpubsub

Use o comando az webpubsub create da CLI do Azure para criar um Web PubSub no grupo de recursos criado. O seguinte comando cria um recurso gratuito do Web PubSub no grupo de recursos myResourceGroup no EastUS:

Importante

Cada recurso Web PubSub precisa ter um nome exclusivo. Substitua <nome-de recurso-exclusivo> pelo nome do Web PubSub nos exemplos a seguir.

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

A saída deste comando mostra as propriedades do recurso recém-criado. Anote as duas propriedades listadas abaixo:

Nome do Recurso: o nome que você forneceu ao parâmetro --name acima.
hostName: no exemplo, o nome do host é <your-unique-resource-name>.webpubsub.azure.com/.

Nesse ponto, sua conta do Azure é a única autorizada a executar qualquer operação nesse novo recurso.

Obter o ConnectionString para uso posterior

As cadeias de conexão brutas aparecem neste artigo somente para fins de demonstração. Em ambientes de produção, sempre proteja suas chaves de acesso. Use o Azure Key Vault para gerenciar e girar suas chaves com segurança e proteger sua conexão com WebPubSubServiceClient.

Use o comando az webpubsub key da CLI do Azure para obter a ConnectionString do serviço. Substitua o espaço reservado <your-unique-resource-name> pelo nome da instância do Azure Web PubSub.

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

Copie a cadeia de conexão para usar mais tarde.

Copie o ConnectionString buscado e use posteriormente neste tutorial como o valor de <connection_string>.

Configurar o projeto

Pré-requisitos

ASP.NET Core 3.1 ou superior

Usar um subprotocolo

O cliente pode iniciar uma conexão WebSocket usando um subprotocolo específico. O serviço Azure Web PubSub dá suporte a um subprotocolo chamado json.webpubsub.azure.v1 para permitir que os clientes publiquem ou assinem diretamente por meio desse serviço, em vez de usar uma viagem de ida e volta para o servidor upstream. Confira Protocolo WebSocket JSON com suporte do Azure Web PubSub para obter detalhes sobre o subprotocolo.

Se você usar outros nomes de protocolo, eles serão ignorados pelo serviço e serão passados para o servidor no manipulador de eventos de conexão, então você poderá criar os próprios protocolos.

Agora vamos criar um aplicativo Web usando o subprotocolo json.webpubsub.azure.v1.

Instalar dependências

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

Use a estrutura da Web Javalin para hospedar as páginas da Web。

Primeiro, vamos usar o Maven para criar um aplicativo logstream-webserver e alternar para a pasta 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

Vamos adicionar o SDK do Azure Web PubSub e a dependência da estrutura da Web javalin ao nó dependencies do pom.xml:

javalin: estrutura da Web simples para Java
slf4j-simple: agente para Java
azure-messaging-webpubsub: o SDK do cliente do serviço para usar o 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>

Crie o lado do servidor para hospedar a API /negotiate e a página da Web.

Atualize Program.cs com o código abaixo.

Use AddAzureClients para adicionar o cliente de serviço e leia a cadeia de conexão da configuração.
Adicione app.UseStaticFiles(); antes de app.Run(); para dar suporte a arquivos estáticos.
E atualize app.MapGet para gerar o token de acesso do cliente com solicitações /negotiate.

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

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

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

app.Run();

Crie um server.js e adicione o código abaixo:

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

Crie um server.py para hospedar a API /negotiate e a página da Web.

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

Vamos navegar até o diretório /src/main/java/com/webpubsub/tutorial, abrir o arquivo App.java no editor e usar Javalin.create para fornecer arquivos estáticos:

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

Dependendo da configuração, talvez seja necessário definir explicitamente o nível de idioma como Java 8 no pom.xml. Adicione o seguinte snippet:

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

Criar a página da Web

Crie uma página HTML com o conteúdo abaixo e salve-a como 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>

O código acima se conecta com o serviço e imprime qualquer mensagem recebida na página. A principal alteração é que especificamos o subprotocolo ao criar a conexão WebSocket.

Executar o servidor
- C#
- JavaScript
- Pitão
- Java
Usamos a ferramenta Gerenciador de Segredos para .NET Core para definir a cadeia de conexão. Execute o comando abaixo, substituindo <connection_string> pelo que foi buscado na etapa anterior e abra http://localhost:5000/index.html no navegador:
```
dotnet user-secrets init
dotnet user-secrets set Azure:WebPubSub:ConnectionString "<connection-string>"
dotnet run
```
Agora execute o comando abaixo, substituindo <connection-string> pelo ConnectionString buscado na etapa anterior, e abra http://localhost:8080 no navegador:
```
export WebPubSubConnectionString="<connection-string>"
node server
```
Agora execute o comando abaixo, substituindo <connection-string> pelo ConnectionString buscado na etapa anterior, e abra http://localhost:8080 no navegador:
```
python server.py "<connection-string>"
```
Agora execute o comando abaixo, substituindo <connection-string> pelo ConnectionString buscado na etapa anterior, e abra http://localhost:8080 no navegador:
```
mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.tutorial.App" -Dexec.cleanupDaemonThreads=false -Dexec.args="'<connection_string>'"
```
Se você estiver usando o Chrome, poderá pressionar F12 ou clicar com o botão direito do mouse em ->Inspecionar ->Ferramentas do desenvolvedor e selecionar a guia Rede. Carregue a página da Web e você pode ver que a conexão WebSocket está estabelecida. Selecione para inspecionar a conexão WebSocket. Você pode ver abaixo que a mensagem de evento connected é recebida no cliente. Você pode ver que o connectionId pode ser gerado para esse cliente.
```
{"type":"system","event":"connected","userId":null,"connectionId":"<the_connection_id>"}
```

Você pode ver que, com a ajuda do subprotocolo, você poderá obter alguns metadados da conexão quando a conexão for connected.

O cliente agora recebe uma mensagem JSON em vez de um texto sem formatação. A mensagem JSON contém mais informações, como tipo e origem da mensagem. Portanto, você pode usar essas informações para processamento adicional da mensagem (por exemplo, exibir a mensagem em um estilo diferente se for de uma fonte diferente), que você pode encontrar nas seções posteriores.

Publicar mensagens do cliente

No tutorial Criar um aplicativo de chat, quando o cliente envia uma mensagem por meio da conexão WebSocket para o serviço Web PubSub, o serviço dispara um evento de usuário no lado do servidor. Com o subprotocolo, o cliente tem mais funcionalidades enviando uma mensagem JSON. Por exemplo, você pode publicar mensagens diretamente do cliente por meio do serviço Web PubSub para outros clientes.

Isso é útil se você quiser transmitir uma grande quantidade de dados para outros clientes em tempo real. Vamos usar esse recurso para criar um aplicativo de streaming de log, que pode transmitir logs de console para o navegador em tempo real.

Criar o programa de streaming

Crie um programa stream:

mkdir stream
cd stream
dotnet new console

Atualize Program.cs com o seguinte conteúdo:

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

Crie um stream.js com o conteúdo a seguir.

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

O código acima cria uma conexão WebSocket com o serviço e, em seguida, sempre que ele receber alguns dados, usará ws.send() para publicá-los. Para fazer a publicação em outros, você só precisa definir type como sendToGroup e especificar um nome de grupo na mensagem.

Abra outra janela de bash para o programa stream e instale a dependência websockets:

mkdir stream
cd stream

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

pip install websockets

Crie um stream.py com o conteúdo a seguir.

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

Vamos usar outro terminal e voltar para a pasta raiz para criar um aplicativo de console de streaming logstream-streaming e alternar para a pasta 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

Vamos adicionar as dependências de HttpClient no nó dependencies de 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>

Agora, vamos usar o WebSocket para se conectar ao serviço. Vamos navegar até o diretório /src/main/java/com/webpubsub/quickstart, abrir o arquivo App.java no editor e substituir o código pelo código abaixo:

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

Navegue até o diretório que contém o arquivo pom.xml e execute o projeto usando o comando a seguir

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

Você pode ver que há um novo conceito de "grupo" aqui. Grupo é um conceito lógico em um hub em que você pode publicar a mensagem em um grupo de conexões. Em um hub, você pode ter vários grupos e um cliente pode assinar vários grupos ao mesmo tempo. Ao usar um subprotocolo, você só pode publicar em um grupo em vez de fazer a transmissão para o hub inteiro. Para obter detalhes sobre os termos, confira os conceitos básicos.

Como usamos o grupo aqui, também precisamos atualizar a página da Web index.html para ingressar no grupo quando a conexão WebSocket for estabelecida dentro do retorno de chamada ws.onopen.
```
let ackId = 0;
ws.onopen = () => {
  console.log('connected');
  ws.send(JSON.stringify({
    type: 'joinGroup',
    group: 'stream',
    ackId: ++ackId
  }));
};
```
Você pode ver o cliente ingressar no grupo enviando uma mensagem no tipo joinGroup.

Atualize também a lógica de retorno de chamada ws.onmessage ligeiramente para analisar a resposta JSON e imprimir as mensagens somente do grupo stream para que ela atue como uma impressora de transmissão ao vivo.

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

Por questões de segurança, por padrão, um cliente não pode publicar ou assinar um grupo por conta própria. Então você notou que definimos roles para o cliente ao gerar o token:

Defina o roles quando GenerateClientAccessUri estiver em Startup.cs, conforme descrito abaixo:

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

Adicione o roles quando getClientAccessToken estiver em server.js, conforme descrito abaixo:

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

Defina as funções corretas para o cliente em server.py durante o processo de geração de token de acesso:

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

Defina as funções corretas para o cliente em App.java durante o processo de geração de token de acesso:

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

Por fim, aplique também algum estilo a index.html para que tenha uma boa aparência.

<html>

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

Agora execute o código abaixo e digite qualquer texto e eles serão exibidos no navegador em tempo real:

ls -R | dotnet run

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

Ou você o torna mais lento para que possa ver que os dados são transmitidos para o navegador em tempo real:

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

O exemplo de código completo deste tutorial pode ser encontrado aqui.

node stream

Ou você também pode usar esse aplicativo para redirecionar qualquer saída de outro aplicativo de console e transmiti-lo para o navegador. Por exemplo:

ls -R | node stream

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

Ou você o torna mais lento para que possa ver que os dados são transmitidos para o navegador em tempo real:

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

O exemplo de código completo deste tutorial pode ser encontrado aqui.

Agora você pode executar python stream.py, digitar qualquer texto e eles são exibidos no navegador em tempo real.

Ou você também pode usar esse aplicativo para redirecionar qualquer saída de outro aplicativo de console e transmiti-lo para o navegador. Por exemplo:

ls -R | python stream.py

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

Ou você o torna mais lento para que possa ver que os dados são transmitidos para o navegador em tempo real:

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

O exemplo de código completo deste tutorial pode ser encontrado aqui.

Agora você pode executar o código abaixo, digitar qualquer texto e eles são exibidos no navegador em tempo real.

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

O exemplo de código completo deste tutorial pode ser encontrado aqui.

Próximas etapas

Este tutorial fornece uma ideia básica de como se conectar ao serviço Web PubSub e como publicar mensagens nos clientes conectados usando o subprotocolo.

Confira outros tutoriais para saber mais sobre como usar o serviço.

Explorar mais exemplos do Azure Web PubSub

Comentários

Esta página foi útil?

Last updated on 2024-12-14

Compartilhar via

Tutorial: Publicar e assinar mensagens entre clientes WebSocket usando o subprotocolo

Pré-requisitos

Criar uma instância do Azure Web PubSub

Criar um grupo de recursos

Criar uma instância do Web PubSub

Obter o ConnectionString para uso posterior

Configurar o projeto

Pré-requisitos

Usar um subprotocolo

Publicar mensagens do cliente

Próximas etapas

Comentários

Recursos adicionais