Öğretici - Azure Web PubSub hizmetinde altprotocol kullanarak WebSocket istemcileri arasında iletileri yayımlama ve abone olma

Makale
01/02/2024

Sohbet uygulaması oluşturma öğreticisinde, Azure Web PubSub ile veri göndermek ve almak için WebSocket API'lerini kullanmayı öğrendiniz. İstemci hizmetle iletişim kurarken gerekli bir protokol olmadığını görebilirsiniz. Örneğin, kullanarak WebSocket.send()herhangi bir veri türünü gönderebilirsiniz ve sunucu bu verileri olduğu gibi alır. WebSocket API'leri işleminin kullanımı kolaydır, ancak işlevsellik sınırlıdır. Örneğin, olayı sunucunuza gönderirken olay adını belirtemez veya iletiyi sunucunuza göndermek yerine diğer istemcilere yayımlayamazsınız. Bu öğreticide, istemcinin işlevselliğini genişletmek için alt protokol kullanmayı öğreneceksiniz.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

Web PubSub hizmet örneği oluşturma
WebSocket bağlantısını kurmak için tam URL'yi oluşturma
Altprotocol kullanarak WebSocket istemcileri arasında ileti yayımlama

Azure aboneliğiniz yoksa başlamadan önce birücretsiz Azure hesabı oluşturun.

Önkoşullar

Azure Cloud Shell'de Bash ortamını kullanın. Daha fazla bilgi için bkz . Azure Cloud Shell'de Bash için hızlı başlangıç.
CLI başvuru komutlarını yerel olarak çalıştırmayı tercih ediyorsanız Azure CLI'yı yükleyin . Windows veya macOS üzerinde çalışıyorsanız Azure CLI’yi bir Docker kapsayıcısında çalıştırmayı değerlendirin. Daha fazla bilgi için bkz . Docker kapsayıcısında Azure CLI'yi çalıştırma.
- Yerel yükleme kullanıyorsanız az login komutunu kullanarak Azure CLI ile oturum açın. Kimlik doğrulama işlemini tamamlamak için terminalinizde görüntülenen adımları izleyin. Diğer oturum açma seçenekleri için bkz . Azure CLI ile oturum açma.
- İstendiğinde, ilk kullanımda Azure CLI uzantısını yükleyin. Uzantılar hakkında daha fazla bilgi için bkz. Azure CLI ile uzantıları kullanma.
- Yüklü sürümü ve bağımlı kitaplıkları bulmak için az version komutunu çalıştırın. En son sürüme yükseltmek için az upgrade komutunu çalıştırın.

Bu kurulum, Azure CLI'nın 2.22.0 veya üzeri bir sürümünü gerektirir. Azure Cloud Shell kullanılıyorsa en son sürüm zaten yüklüdür.

Azure Web PubSub örneği oluşturma

Kaynak grubu oluşturma

Kaynak grubu, Azure kaynaklarının dağıtıldığı ve yönetildiği bir mantıksal kapsayıcıdır. konumunda adlı myResourceGroup eastus bir kaynak grubu oluşturmak için az group create komutunu kullanın.

az group create --name myResourceGroup --location EastUS

Web PubSub örneği oluşturma

Webpubsub uzantısını yüklemek veya geçerli sürüme yükseltmek için az extension add komutunu çalıştırın.

az extension add --upgrade --name webpubsub

Oluşturduğunuz kaynak grubunda bir Web PubSub oluşturmak için Azure CLI az webpubsub create komutunu kullanın. Aşağıdaki komut, EastUS'ta myResourceGroup kaynak grubu altında bir Ücretsiz Web PubSub kaynağı oluşturur:

Önemli

Her Web PubSub kaynağının benzersiz bir adı olmalıdır. Aşağıdaki örneklerde unique-resource-name> değerini Web PubSub'ınızın adıyla değiştirin<.

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

Bu komutun çıktısı yeni oluşturulan kaynağın özelliklerini gösterir. Aşağıda listelenen iki özelliği not edin:

Kaynak Adı: Yukarıdaki parametreye --name sağladığınız ad.
hostName: Örnekte ana bilgisayar adı şeklindedir <your-unique-resource-name>.webpubsub.azure.com/.

Bu noktada, azure hesabınız bu yeni kaynak üzerinde herhangi bir işlem gerçekleştirme yetkisi olan tek hesaptır.

Gelecekte kullanmak üzere Bağlan ionString'i edinin

Önemli

bağlantı dizesi, uygulamanızın Azure Web PubSub hizmetine erişmesi için gereken yetkilendirme bilgilerini içerir. bağlantı dizesi içindeki erişim anahtarı, hizmetinizin kök parolasına benzer. Üretim ortamlarında erişim anahtarlarınızı korumak için her zaman dikkatli olun. Anahtarlarınızı güvenli bir şekilde yönetmek ve döndürmek için Azure Key Vault'ı kullanın. Erişim anahtarlarını diğer kullanıcılara dağıtmaktan, sabit kodlamaktan veya başkalarının erişebileceği herhangi bir yerde düz metin olarak kaydetmekten kaçının. Ele geçirilmiş olabileceklerini düşünüyorsanız anahtarlarınızı döndürün.

Hizmetin Bağlan ionString'ini almak için Azure CLI az webpubsub key komutunu kullanın. Yer tutucuyu <your-unique-resource-name> Azure Web PubSub örneğinizin adıyla değiştirin.

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

Daha sonra kullanmak üzere bağlantı dizesi kopyalayın.

Getirilen Bağlan ionString değerini kopyalayın ve bu öğreticinin devamında değerini <connection_string>kullanın.

Projeyi ayarlama

Önkoşullar

ASP.NET Core 3.1 veya üzeri

Altprotocol kullanma

İstemci, belirli bir altprotocol kullanarak bir WebSocket bağlantısı başlatabilir. Azure Web PubSub hizmeti, istemcilerin yukarı akış sunucusuna gidiş dönüş yerine doğrudan Web PubSub hizmeti aracılığıyla yayımlama/abone olma yetkisi vermek için adlı json.webpubsub.azure.v1 bir alt projeyi destekler. Altprotocol hakkında ayrıntılı bilgi için Azure Web PubSub tarafından desteklenen JSON WebSocket altprotocol bölümüne bakın.

Başka protokol adları kullanırsanız, bunlar hizmet tarafından yoksayılır ve bağlantı olay işleyicisindeki sunucuya geçirilerek kendi protokollerinizi oluşturabilirsiniz.

Şimdi altprotokolü kullanarak json.webpubsub.azure.v1 bir web uygulaması oluşturalım.

Bağımlılıkları yükleme

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

Web sayfalarını barındırmak için Javalin web çerçevesini kullanırsınız。

İlk olarak maven kullanarak yeni bir uygulama logstream-webserver oluşturalım ve logstream-webserver klasörüne geçelim:

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

Şimdi Azure Web PubSub SDK'sını javalin ve web çerçevesi bağımlılığını düğümüne dependencies pom.xmlekleyelim:

javalin: Java için basit web çerçevesi
slf4j-simple: Java için Günlükçü
azure-messaging-webpubsub: Azure Web PubSub kullanmak için hizmet istemcisi SDK'sı

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

API'yi ve web sayfasını barındırmak /negotiate için sunucu tarafı oluşturun.

Aşağıdaki kodla güncelleştirin Program.cs .

Hizmet istemcisini eklemek ve yapılandırmadan bağlantı dizesi okumak için kullanınAddAzureClients.
Statik dosyaları desteklemek için daha önce app.Run(); ekleyinapp.UseStaticFiles();.
ve isteklerle /negotiate istemci erişim belirtecini oluşturacak şekilde güncelleştirinapp.MapGet.

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

server.js Oluşturun ve aşağıdaki kodu ekleyin:

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

API'yi ve web sayfasını barındırmak /negotiate için bir server.py oluşturun.

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

Şimdi /src/main/java/com/webpubsub/tutorial dizinine gidelim, düzenleyicinizde App.java dosyasını açalım ve statik dosyaları sunmak için kullanalımJavalin.create:

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

Kurulumunuza bağlı olarak, pom.xml dosyasında dil düzeyini açıkça Java 8 olarak ayarlamanız gerekebilir. Aşağıdaki kod parçacığını ekleyin:

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

Web sayfasını oluşturma

Aşağıdaki içeriğe sahip bir HTML sayfası oluşturun ve olarak wwwroot/index.htmlkaydedin:

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

Yukarıdaki kod hizmete bağlanır ve sayfaya alınan tüm iletileri yazdırır. Ana değişiklik, WebSocket bağlantısını oluştururken altprotokolü belirtmemizdir.

Sunucuyu çalıştırma
- C#
- JavaScript
- Python
- Java
bağlantı dizesi ayarlamak için .NET Core için Gizli Dizi Yöneticisi aracını kullanırız. Öğesini önceki adımda getirilen komutla değiştirerek <connection_string> aşağıdaki komutu çalıştırın ve tarayıcıda açınhttp://localhost:5000/index.html:
```
dotnet user-secrets init
dotnet user-secrets set Azure:WebPubSub:ConnectionString "<connection-string>"
dotnet run
```
Şimdi aşağıdaki komutu çalıştırın ve değerini <connection-string> önceki adımda getirilen Bağlan ionString ile değiştirin ve tarayıcıda açınhttp://localhost:8080:
```
export WebPubSubConnectionString="<connection-string>"
node server
```
Şimdi aşağıdaki komutu çalıştırın ve değerini <connection-string> önceki adımda getirilen Bağlan ionString ile değiştirin ve tarayıcıda açınhttp://localhost:8080:
```
python server.py "<connection-string>"
```
Şimdi aşağıdaki komutu çalıştırın ve değerini <connection-string> önceki adımda getirilen Bağlan ionString ile değiştirin ve tarayıcıda açınhttp://localhost:8080:
```
mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.tutorial.App" -Dexec.cleanupDaemonThreads=false -Dexec.args="'<connection_string>'"
```
Chrome kullanıyorsanız F12 tuşuna basabilir veya -Inspect ->>Developer Tools'a sağ tıklayıp Ağ sekmesini seçebilirsiniz. Web sayfasını yüklediğinizde WebSocket bağlantısının kurulduğunu görebilirsiniz. WebSocket bağlantısını incelemek için seçin, istemcide aşağıdaki connected olay iletisinin alındiğini görebilirsiniz. Bu istemci için oluşturulanı alabileceğinizi connectionId görebilirsiniz.
```
{"type":"system","event":"connected","userId":null,"connectionId":"<the_connection_id>"}
```

Altprotocol yardımıyla bağlantı olduğunda bağlantının bazı meta verilerini alabileceğinizi connectedgörebilirsiniz.

İstemci artık düz metin yerine bir JSON iletisi alır. JSON iletisi, iletinin türü ve kaynağı gibi daha fazla bilgi içerir. Bu nedenle, iletide daha fazla işlem yapmak için bu bilgileri kullanabilirsiniz (örneğin, ileti farklı bir kaynaktan geliyorsa farklı bir stilde görüntülenir), sonraki bölümlerde bulabilirsiniz.

İstemciden ileti yayımlama

Sohbet uygulaması oluşturma öğreticisinde, istemci Web PubSub hizmetine WebSocket bağlantısı üzerinden bir ileti gönderdiğinde, hizmet sunucu tarafınızda bir kullanıcı olayını tetikler. Altprotocol ile istemci, JSON iletisi göndererek daha fazla işleve sahiptir. Örneğin, iletileri doğrudan Web PubSub hizmeti aracılığıyla istemciden diğer istemcilere yayımlayabilirsiniz.

Bu, büyük miktarda veriyi diğer istemcilere gerçek zamanlı olarak akışla göndermek istiyorsanız kullanışlıdır. Şimdi bu özelliği kullanarak konsol günlüklerini gerçek zamanlı olarak tarayıcıya aktarabilen bir günlük akışı uygulaması oluşturalım.

Akış programı oluşturma

stream Program oluşturma:

mkdir stream
cd stream
dotnet new console

Aşağıdaki içerikle güncelleştirin Program.cs :

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

Aşağıdaki içeriğe sahip bir stream.js oluşturun.

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

Yukarıdaki kod, hizmete bir WebSocket bağlantısı oluşturur ve ardından verileri yayımlamak için kullandığı ws.send() bazı verileri aldığında. Diğer kullanıcılara yayımlamak için iletide bir grup adı ayarlamanız type sendToGroup ve belirtmeniz yeterlidir.

Program için stream başka bir bash penceresi açın ve bağımlılığı yükleyin websockets :

mkdir stream
cd stream

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

pip install websockets

Aşağıdaki içeriğe sahip bir stream.py oluşturun.

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

Başka bir terminal kullanalım ve bir akış konsolu uygulaması logstream-streaming oluşturmak ve logstream-streaming klasörüne geçmek için kök klasöre geri dönelim:

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

Şimdi düğümüne dependencies pom.xmlHttpClient bağımlılıkları ekleyelim:

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

Şimdi hizmete bağlanmak için WebSocket'i kullanalım. Şimdi /src/main/java/com/webpubsub/quickstart dizinine gidelim, düzenleyicinizde App.java dosyasını açalım ve kodu aşağıdakiyle değiştirelim:

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

pom.xml dosyasını içeren dizine gidin ve aşağıdaki komutu kullanarak projeyi çalıştırın

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

Burada yeni bir "grup" kavramı olduğunu görebilirsiniz. Grup, bir bağlantı grubuna ileti yayımlayabileceğiniz bir hub'daki mantıksal kavramdır. Bir hub'da birden çok gruba sahip olabilirsiniz ve bir istemci aynı anda birden çok gruba abone olabilir. Altprotocol kullanırken, hub'ın tamamına yayınlamak yerine yalnızca bir gruba yayımlayabilirsiniz. Terimler hakkında ayrıntılı bilgi için temel kavramları gözden geçirin.

Burada grubu kullandığımızdan, WebSocket bağlantısı geri çağırma içinde ws.onopen kurulduğunda gruba katılmak için web sayfasını index.html da güncelleştirmemiz gerekir.
```
let ackId = 0;
ws.onopen = () => {
  console.log('connected');
  ws.send(JSON.stringify({
    type: 'joinGroup',
    group: 'stream',
    ackId: ++ackId
  }));
};
```
türünde bir ileti joinGroup göndererek istemcinin gruba katıldığını görebilirsiniz.

Ayrıca JSON yanıtını ws.onmessage ayrıştırmak için geri çağırma mantığını biraz güncelleştirin ve iletileri yalnızca gruptan stream yazdırarak canlı akış yazıcısı işlevi görebilmesini sağlayın.

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

Güvenlikle ilgili dikkat edilmesi gerekenler için, istemci varsayılan olarak bir grubu tek başına yayımlayamaz veya gruba abone olamaz. Bu nedenle belirteci oluştururken istemciye ayarlandığımızı roles fark ettiniz:

when GenerateClientAccessUri değerini roles Startup.cs aşağıdaki gibi ayarlayın:

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

when getClientAccessToken öğesini roles server.js aşağıdaki gibi ekleyin:

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

Erişim belirteci oluşturma işlemi sırasında içindeki istemciye server.py doğru rolleri ayarlayın:

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

Erişim belirteci oluşturma işlemi sırasında içindeki istemciye App.java doğru rolleri ayarlayın:

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

Son olarak, düzgün bir şekilde görüntülenebilmesi için bazı index.html stil de uygulayın.

<html>

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

Şimdi aşağıdaki kodu çalıştırın ve herhangi bir metin yazın; bunlar tarayıcıda gerçek zamanlı olarak görüntülenir:

ls -R | dotnet run

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

Alternatif olarak, verilerin gerçek zamanlı olarak tarayıcıya akışını görebilmek için verileri daha yavaş hale getirirsiniz:

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

Bu öğreticinin tam kod örneğini burada bulabilirsiniz.

node stream

Alternatif olarak, bu uygulamayı başka bir konsol uygulamasından gelen herhangi bir çıkışa yöneltebilir ve tarayıcıya akışla aktarabilirsiniz. Örneğin:

ls -R | node stream

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

Alternatif olarak, verilerin gerçek zamanlı olarak tarayıcıya akışını görebilmek için verileri daha yavaş hale getirirsiniz:

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

Bu öğreticinin tam kod örneğini burada bulabilirsiniz.

Artık komutunu çalıştırabilirsiniz python stream.py, istediğiniz metni yazın ve bunlar tarayıcıda gerçek zamanlı olarak görüntülenir.

Alternatif olarak, bu uygulamayı başka bir konsol uygulamasından gelen herhangi bir çıkışa yöneltebilir ve tarayıcıya akışla aktarabilirsiniz. Örneğin:

ls -R | python stream.py

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

Alternatif olarak, verilerin gerçek zamanlı olarak tarayıcıya akışını görebilmek için verileri daha yavaş hale getirirsiniz:

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

Bu öğreticinin tam kod örneğini burada bulabilirsiniz.

Artık aşağıdaki kodu çalıştırabilir, herhangi bir metin yazabilirsiniz ve bunlar tarayıcıda gerçek zamanlı olarak görüntülenir.

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

Bu öğreticinin tam kod örneğini burada bulabilirsiniz.

Sonraki adımlar

Bu öğretici, Web PubSub hizmetine bağlanma ve altprotocol kullanarak bağlı istemcilere ileti yayımlama hakkında temel bir fikir sağlar.

Hizmetin nasıl kullanılacağı hakkında daha fazla bilgi edinmek için diğer öğreticileri gözden geçirin.

Diğer Azure Web PubSub örneklerini keşfedin

Aracılığıyla paylaş

Önkoşullar

Azure Web PubSub örneği oluşturma

Kaynak grubu oluşturma

Web PubSub örneği oluşturma

Gelecekte kullanmak üzere Bağlan ionString'i edinin

Projeyi ayarlama

Önkoşullar

Altprotocol kullanma

İstemciden ileti yayımlama

Sonraki adımlar

Geri Bildirim

Ek kaynaklar

Aracılığıyla paylaş

Öğretici: Altprotocol kullanarak WebSocket istemcileri arasında ileti yayımlama ve abone olma

Önkoşullar

Azure Web PubSub örneği oluşturma

Kaynak grubu oluşturma

Web PubSub örneği oluşturma

Gelecekte kullanmak üzere Bağlan ionString'i edinin

Projeyi ayarlama

Önkoşullar

Altprotocol kullanma

İstemciden ileti yayımlama

Sonraki adımlar

Geri Bildirim

Ek kaynaklar