Öğretici: Azure Web PubSub hizmetiyle sohbet uygulaması oluşturma

Makale
04/13/2024

İleti yayımlama ve abone olma öğreticisinde, Azure Web PubSub ile iletileri yayımlama ve abone olma ile ilgili temel bilgileri öğrenirsiniz. Bu öğreticide Azure Web PubSub'un olay sistemini öğrenecek ve gerçek zamanlı iletişim işlevselliğine sahip eksiksiz bir web uygulaması oluşturmak için kullanacaksınız.

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

Web PubSub hizmet örneği oluşturma
Azure Web PubSub için olay işleyici ayarlarını yapılandırma
Uygulama sunucusundaki olayları işleme ve gerçek zamanlı sohbet uygulaması oluşturma

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ı myResourceGroupeastus 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 ConnectionString'i edinin

Önemli

Ham bağlantı dizesi yalnızca tanıtım amacıyla bu makalede görünür.

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ı her zaman koruyun. Anahtarlarınızı güvenli bir şekilde yönetmek ve döndürmek ve bağlantınızın WebPubSubServiceClientgüvenliğini sağlamak 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 ConnectionString'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 ConnectionString'i kopyalayın ve daha sonra öğreticinin okuyduğu ortam değişkenine WebPubSubConnectionStringayarlayın. aşağıdaki değerini, getirdiğiniz ConnectionString ile değiştirin<connection-string>.

export WebPubSubConnectionString="<connection-string>"

SET WebPubSubConnectionString=<connection-string>

Projeyi ayarlama

Önkoşullar

ASP.NET Core 8

Uygulamayı oluşturma

Azure Web PubSub'da sunucu ve istemci olarak iki rol vardır. Bu kavram, bir web uygulamasındaki sunucu ve istemci rollerine benzer. Sunucu, istemcileri yönetmek, dinlemek ve istemci iletilerini yanıtlamakla sorumludur. İstemci, kullanıcının iletilerini sunucudan gönderip almaktan ve son kullanıcı için görselleştirmekten sorumludur.

Bu öğreticide, gerçek zamanlı bir sohbet web uygulaması oluşturacağız. Gerçek bir web uygulamasında, sunucunun sorumluluğu istemcilerin kimliğini doğrulamayı ve uygulama kullanıcı arabirimi için statik web sayfaları sunmayı da içerir.

Web sayfalarını barındırmak ve gelen istekleri işlemek için ASP.NET Core 8 kullanıyoruz.

İlk olarak bir klasörde ASP.NET Core web uygulaması chatapp oluşturalım.

Yeni bir web uygulaması oluşturun.

mkdir chatapp
cd chatapp
dotnet new web

Statik web sayfalarını barındırmayı desteklemek için Program.cs ekleyin app.UseStaticFiles() .

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.UseStaticFiles();

app.Run();

Bir HTML dosyası oluşturun ve olarak wwwroot/index.htmlkaydedin. Bunu daha sonra sohbet uygulamasının kullanıcı arabirimi için kullanacağız.
```
<html>
  <body>
    <h1>Azure Web PubSub Chat</h1>
  </body>
</html>
```

Tarayıcıda çalıştırarak dotnet run --urls http://localhost:8080 ve bu sunucuya erişerek http://localhost:8080/index.html sunucuyu test edebilirsiniz.

Web sayfalarını barındırmak ve gelen istekleri işlemek için Node.js için popüler bir web çerçevesi olan express.js kullanıyoruz.

İlk olarak bir klasörde express web uygulaması chatapp oluşturalım.

express.js yükleme

mkdir chatapp
cd chatapp
npm init -y
npm install --save express

Ardından bir express sunucusu oluşturup farklı kaydedin server.js

const express = require('express');

const app = express();
app.use(express.static('public'));
app.listen(8080, () => console.log('server started'));

Ayrıca bir HTML dosyası oluşturun ve olarak public/index.htmlkaydedin. Bunu daha sonra sohbet uygulamasının kullanıcı arabirimi için kullanacağız.
```
<html>

<body>
  <h1>Azure Web PubSub Chat</h1>
</body>

</html>
```

Tarayıcıda çalıştırarak node server ve bu sunucuya erişerek http://localhost:8080 sunucuyu test edebilirsiniz.

Web sayfalarını barındırmak ve gelen istekleri işlemek için Javalin web çerçevesini kullanırız.

Maven'ı kullanarak yeni bir uygulama webpubsub-tutorial-chat oluşturun ve webpubsub-tutorial-chat klasörüne geçin:

mvn archetype:generate --define interactiveMode=n --define groupId=com.webpubsub.tutorial --define artifactId=webpubsub-tutorial-chat --define archetypeArtifactId=maven-archetype-quickstart --define archetypeVersion=1.4
cd webpubsub-tutorial-chat

javalin web çerçevesi bağımlılığını düğümüne dependenciespom.xmlekleyin:

javalin: Java için basit web çerçevesi
slf4j-simple: Java için Günlükçü

<!-- https://mvnrepository.com/artifact/io.javalin/javalin -->
<dependency>
    <groupId>io.javalin</groupId>
    <artifactId>javalin</artifactId>
    <version>6.1.3</version>
</dependency>

<!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-simple -->
<dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-simple</artifactId>
    <version>2.0.12</version>
</dependency>

/src/main/java/com/webpubsub/tutorial dizinine gidin. App.java dosyasını düzenleyicinizde açın. Statik dosyaları sunmak için kullanın Javalin.create :

package com.webpubsub.tutorial;

import io.javalin.Javalin;

public class App {
    public static void main(String[] args) {
        // start a server
        Javalin app = Javalin.create(config -> {
            config.staticFiles.add("public");
        }).start(8080);
    }
}

Kurulumunuza bağlı olarak dil düzeyini açıkça Java 8 olarak ayarlamanız gerekebilir. Bu adım pom.xml yapılabilir. 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>

Bir HTML dosyası oluşturun ve /src/main/resources/public/index.html dosyasına kaydedin. Bunu daha sonra sohbet uygulamasının kullanıcı arabirimi için kullanacağız.
```
<html>
<body>
  <h1>Azure Web PubSub Chat</h1>
</body>

</html>
```

pom.xml dosyasını içeren dizinin altında aşağıdaki komutu çalıştırarak sunucuyu test edebilir ve tarayıcıda erişim sağlayabilirsinizhttp://localhost:8080.

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

Bu işi başarmak için Python için popüler bir web çerçevesi olan Flask'i kullanıyoruz.

İlk olarak Flask hazır bir proje klasörü chatapp oluşturun.

Ortamı oluşturma ve etkinleştirme

mkdir chatapp
cd chatapp
python3 -m venv .venv
. .venv/bin/activate

Etkinleştirilmiş ortamda Flask'i yükleyin
```
pip install Flask
```

Ardından bir Flask sunucusu oluşturup farklı kaydedin server.py

from flask import (
    Flask, 
    send_from_directory,
)

app = Flask(__name__)

@app.route('/<path:filename>')
def index(filename):
    return send_from_directory('public', filename)

if __name__ == '__main__':
    app.run(port=8080)

Ayrıca bir HTML dosyası oluşturun ve olarak public/index.htmlkaydedin. Bunu daha sonra sohbet uygulamasının kullanıcı arabirimi için kullanacağız.
```
<html>

<body>
  <h1>Azure Web PubSub Chat</h1>
</body>

</html>
```

Tarayıcıda çalıştırarak python server.py ve bu sunucuya erişerek http://127.0.0.1:8080/index.html sunucuyu test edebilirsiniz.

Anlaşma uç noktası ekleme

Yayımlama ve abone olma iletisi öğreticisinde, abone bağlantı dizesi doğrudan tüketir. Bağlantı dizesi hizmete herhangi bir işlem yapmak için yüksek ayrıcalığı olduğundan, gerçek bir dünya uygulamasında bağlantı dizesi herhangi bir istemciyle paylaşmak güvenli değildir. Şimdi sunucunuzun bağlantı dizesi kullanmasını ve istemcinin erişim belirteci ile tam URL'yi alması için bir negotiate uç noktayı kullanıma sunun. Bu şekilde, sunucu yetkisiz erişimi önlemek için uç noktanın negotiate önüne kimlik doğrulama ara yazılımı ekleyebilir.

İlk olarak bağımlılıkları yükleyin.

dotnet add package Microsoft.Azure.WebPubSub.AspNetCore

Şimdi belirteci oluşturmak üzere istemcisinin çağıracağı bir /negotiate uç nokta ekleyelim.

using Azure.Core;
using Microsoft.Azure.WebPubSub.AspNetCore;
using Microsoft.Azure.WebPubSub.Common;
using Microsoft.Extensions.Primitives;

// Read connection string from environment
var connectionString = Environment.GetEnvironmentVariable("WebPubSubConnectionString");
if (connectionString == null)
{
    throw new ArgumentNullException(nameof(connectionString));
}

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddWebPubSub(o => o.ServiceEndpoint = new WebPubSubServiceEndpoint(connectionString))
    .AddWebPubSubServiceClient<Sample_ChatApp>();
var app = builder.Build();

app.UseStaticFiles();

// return the Client Access URL with negotiate endpoint
app.MapGet("/negotiate", (WebPubSubServiceClient<Sample_ChatApp> service, HttpContext context) =>
{
    var id = context.Request.Query["id"];
    if (StringValues.IsNullOrEmpty(id))
    {
        context.Response.StatusCode = 400;
        return null;
    }
    return new
    {
        url = service.GetClientAccessUri(userId: id).AbsoluteUri
    };
});
app.Run();

sealed class Sample_ChatApp : WebPubSubHub
{
}

AddWebPubSubServiceClient<THub>() , istemci bağlantı belirteci oluşturmak için anlaşma adımında ve hub olayları tetiklendiğinde hizmet REST API'lerini çağırmak için hub yöntemlerinde kullanabileceğimiz hizmet istemcisini WebPubSubServiceClient<THub>eklemek için kullanılır. Bu belirteç oluşturma kodu, yayımlama ve abone olma iletisi öğreticisinde kullandığımız koda benzer, ancak belirteci oluştururken bir bağımsız değişken daha (userId) geçiririz. kullanıcı kimliği istemci kimliğini tanımlamak için kullanılabilir, böylece bir ileti aldığınızda iletinin nereden geldiğini bilirsiniz.

Kod, önceki adımda ayarladığımız ortam değişkenindeki WebPubSubConnectionString bağlantı dizesi okur.

kullanarak dotnet run --urls http://localhost:8080sunucuyu yeniden çalıştırın.

İlk olarak Azure Web PubSub SDK'sını yükleyin:

npm install --save @azure/web-pubsub

Şimdi belirteci oluşturmak için bir /negotiate API ekleyelim.

const express = require('express');
const { WebPubSubServiceClient } = require('@azure/web-pubsub');

const app = express();
const hubName = 'Sample_ChatApp';

let serviceClient = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hubName);

app.get('/negotiate', async (req, res) => {
    let id = req.query.id;
    if (!id) {
    res.status(400).send('missing user id');
    return;
    }
    let token = await serviceClient.getClientAccessToken({ userId: id });
    res.json({
    url: token.url
    });
});

app.use(express.static('public'));
app.listen(8080, () => console.log('server started'));

Bu belirteç oluşturma kodu, yayımlama ve abone olma iletisi öğreticisinde kullandığımız koda benzer, ancak belirteci oluştururken bir bağımsız değişken daha (userId) geçiririz. kullanıcı kimliği istemci kimliğini tanımlamak için kullanılabilir, böylece bir ileti aldığınızda iletinin nereden geldiğini bilirsiniz.

Kod, önceki adımda ayarladığımız ortam değişkenindeki WebPubSubConnectionString bağlantı dizesi okur.

komutunu çalıştırarak sunucuyu yeniden çalıştırın node server.

İlk olarak düğümüne dependenciespom.xmlAzure Web PubSub SDK bağımlılığı ve gson ekleyin:

<!-- https://mvnrepository.com/artifact/com.azure/azure-messaging-webpubsub -->
<dependency>
    <groupId>com.azure</groupId>
    <artifactId>azure-messaging-webpubsub</artifactId>
    <version>1.2.12</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.10.1</version>
</dependency>

Şimdi belirteci oluşturmak için dosyaya App.java bir /negotiate API ekleyelim:

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 com.azure.messaging.webpubsub.models.WebPubSubContentType;
import com.google.gson.Gson;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
import io.javalin.Javalin;

public class App {
    public static void main(String[] args) {
        String connectionString = System.getenv("WebPubSubConnectionString");

        if (connectionString == null) {
            System.out.println("Please set the environment variable WebPubSubConnectionString");
            return;
        }

        // create the service client
        WebPubSubServiceClient service = new WebPubSubServiceClientBuilder()
                .connectionString(connectionString)
                .hub("Sample_ChatApp")
                .buildClient();

        // start a server
        Javalin app = Javalin.create(config -> {
            config.staticFiles.add("public");
        }).start(8080);
        
        // Handle the negotiate request and return the token to the client
        app.get("/negotiate", ctx -> {
            String id = ctx.queryParam("id");
            if (id == null) {
                ctx.status(400);
                ctx.result("missing user id");
                return;
            }
            GetClientAccessTokenOptions option = new GetClientAccessTokenOptions();
            option.setUserId(id);
            WebPubSubClientAccessToken token = service.getClientAccessToken(option);
            ctx.contentType("application/json");
            Gson gson = new Gson();
            JsonObject jsonObject = new JsonObject();
            jsonObject.addProperty("url", token.getUrl());
            String response = gson.toJson(jsonObject);
            ctx.result(response);
            return;
        });
    }
}

Bu belirteç oluşturma kodu, yayımlama ve abone olma iletisi öğreticisinde kullandığımız koda benzer, ancak belirteci oluştururken kullanıcı kimliğini ayarlamak için yöntemini çağırırızsetUserId. kullanıcı kimliği istemci kimliğini tanımlamak için kullanılabilir, böylece bir ileti aldığınızda iletinin nereden geldiğini bilirsiniz.

Kod, önceki adımda ayarladığımız ortam değişkenindeki WebPubSubConnectionString bağlantı dizesi okur.

Aşağıdaki komutları kullanarak sunucuyu yeniden çalıştırın:

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

İlk olarak Azure Web PubSub SDK'sını yükleyin.

pip install azure-messaging-webpubsubservice

Şimdi belirteci oluşturmak için sunucuya bir /negotiate API ekleyelim.

import os

from flask import (
    Flask, 
    request, 
    send_from_directory,
)

from azure.messaging.webpubsubservice import (
    WebPubSubServiceClient
)

hub_name = 'Sample_ChatApp'
connection_string = os.environ.get('WebPubSubConnectionString')

app = Flask(__name__)
service = WebPubSubServiceClient.from_connection_string(connection_string, hub=hub_name)

@app.route('/<path:filename>')
def index(filename):
    return send_from_directory('public', filename)


@app.route('/negotiate')
def negotiate():
    id = request.args.get('id')
    if not id:
        return 'missing user id', 400

    token = service.get_client_access_token(user_id=id)
    return {
        'url': token['url']
    }, 200

if __name__ == '__main__':
    app.run(port=8080)

Bu belirteç oluşturma kodu, yayımlama ve abone olma iletisi öğreticisinde kullandığımız koda benzer, ancak belirteci oluştururken bir bağımsız değişken daha (user_id) geçiririz. kullanıcı kimliği istemci kimliğini tanımlamak için kullanılabilir, böylece bir ileti aldığınızda iletinin nereden geldiğini bilirsiniz.

Kod, önceki adımda ayarladığımız ortam değişkenindeki WebPubSubConnectionString bağlantı dizesi okur.

kullanarak python server.pysunucuyu yeniden çalıştırın.

Bu API'ye erişerek http://localhost:8080/negotiate?id=user1 test edebilirsiniz ve size erişim belirteci ile Azure Web PubSub'un tam URL'sini verir.

Olayları işleme

Azure Web PubSub'da, istemci tarafında belirli etkinlikler gerçekleştiğinde (örneğin bir istemci bağlanıyor, bağlı, bağlantısı kesiliyor veya bir istemci ileti gönderiyorsa), hizmet bu olaylara tepki verebilmesi için sunucuya bildirimler gönderir.

Olaylar web kancası biçiminde sunucuya teslim edilir. Web kancası uygulama sunucusu tarafından sunulur ve kullanıma sunulur ve Azure Web PubSub hizmeti tarafında kaydedilir. Bir olay gerçekleştiğinde hizmet web kancalarını çağırır.

Azure Web PubSub, olay verilerini açıklamak için CloudEvents'i izler.

Aşağıda, bir istemci bağlandığında sistem olaylarını ve bir istemci sohbet uygulamasını derlemek için ileti gönderirken kullanıcı olaylarını ele message alıyoruzconnected.

Önceki adımda yüklediğimiz AspNetCore Microsoft.Azure.WebPubSub.AspNetCore için Web PubSub SDK'sı, CloudEvents isteklerini ayrıştırma ve işlemeye de yardımcı olabilir.

İlk olarak, önüne app.Run()olay işleyicileri ekleyin. Olaylar için uç nokta yolunu (diyelim ki /eventhandler) belirtin.

app.MapWebPubSubHub<Sample_ChatApp>("/eventhandler/{*path}");
app.Run();

Şimdi, önceki adımda oluşturduğumuz sınıfın Sample_ChatApp içinde, Web PubSub hizmetini çağırmak için kullandığımız bir WebPubSubServiceClient<Sample_ChatApp> oluşturucu ekleyin. Ve OnConnectedAsync() olay tetiklendiğinde connected yanıt vermek, OnMessageReceivedAsync() istemciden gelen iletileri işlemek için.

sealed class Sample_ChatApp : WebPubSubHub
{
    private readonly WebPubSubServiceClient<Sample_ChatApp> _serviceClient;

    public Sample_ChatApp(WebPubSubServiceClient<Sample_ChatApp> serviceClient)
    {
        _serviceClient = serviceClient;
    }

    public override async Task OnConnectedAsync(ConnectedEventRequest request)
    {
        Console.WriteLine($"[SYSTEM] {request.ConnectionContext.UserId} joined.");
    }

    public override async ValueTask<UserEventResponse> OnMessageReceivedAsync(UserEventRequest request, CancellationToken cancellationToken)
    {
        await _serviceClient.SendToAllAsync(RequestContent.Create(
        new
        {
            from = request.ConnectionContext.UserId,
            message = request.Data.ToString()
        }),
        ContentType.ApplicationJson);

        return new UserEventResponse();
    }
}

Yukarıdaki kodda, JSON biçiminde bir bildirim iletisi yayınlamak için hizmet istemcisini kullanırız ve bu iletinin tümü ile birleştirilir SendToAllAsync.

Express @azure/web-pubsub-express için Web PubSub SDK'sı CloudEvents isteklerini ayrıştırma ve işlemeye yardımcı olur.

npm install --save @azure/web-pubsub-express

İstemciye bağlı olayı işlemek üzere konumundaki bir REST API'yi /eventhandler kullanıma sunabilmek için (Web PubSub SDK tarafından sağlanan hızlı ara yazılım tarafından gerçekleştirilir) server.js aşağıdaki kodla güncelleştirin:

const express = require("express");
const { WebPubSubServiceClient } = require("@azure/web-pubsub");
const { WebPubSubEventHandler } = require("@azure/web-pubsub-express");

const app = express();
const hubName = "Sample_ChatApp";

let serviceClient = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hubName);

let handler = new WebPubSubEventHandler(hubName, {
  path: "/eventhandler",
  onConnected: async (req) => {
    console.log(`${req.context.userId} connected`);
  },
  handleUserEvent: async (req, res) => {
    if (req.context.eventName === "message")
      await serviceClient.sendToAll({
        from: req.context.userId,
        message: req.data,
      });
    res.success();
  },
});
app.get("/negotiate", async (req, res) => {
  let id = req.query.id;
  if (!id) {
    res.status(400).send("missing user id");
    return;
  }
  let token = await serviceClient.getClientAccessToken({ userId: id });
  res.json({
    url: token.url,
  });
});

app.use(express.static("public"));
app.use(handler.getMiddleware());

app.listen(8080, () => console.log("server started"));

Yukarıdaki kodda, onConnected bir istemci bağlandığında konsola bir ileti yazdırmanız yeterlidir. Bağlı istemcinin kimliğini görebilmek için kullandığımızı req.context.userId görebilirsiniz. Ve handleUserEvent bir istemci bir ileti gönderdiğinde çağrılır. JSON nesnesindeki iletiyi tüm istemcilere yayınlamak için kullanır WebPubSubServiceClient.sendToAll() . Ayrıca olay gönderene ileti gönderebileceğiniz bir res nesnesi olduğunu da görebilirsinizhandleUserEvent. Burada yalnızca Web Kancası'nın 200 döndürmesini sağlamak için çağrı res.success() yaparız (bu çağrının, istemciye hiçbir şey döndürmek istemeseniz bile gerekli olduğunu unutmayın; aksi takdirde Web Kancası hiçbir zaman dönmez ve istemci bağlantısı kapanır).

Şimdilik Java'da olay işleyicisini kendiniz uygulamanız gerekir. Adımlar, protokol belirtimini izleyerek ileriye doğru ilerler ve aşağıdaki listede gösterilmiştir:

Olay işleyici yolu /eventhandleriçin HTTP işleyicisi ekleyelim.
İlk olarak uygunsuz kullanım koruması SEÇENEKLERİ isteklerini işlemek istiyoruz, üst bilgide üst bilgi WebHook-Request-Origin bulunup bulunmadiğini denetleyeceğiz ve üst bilgisini WebHook-Allowed-Origindöndüreceğiz. Tanıtım amacıyla kolaylık sağlamak için tüm kaynaklara izin vermek için geri dönüyoruz * .
```
// validation: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#protection
app.options("/eventhandler", ctx -> {
    ctx.header("WebHook-Allowed-Origin", "*");
});
```
Ardından gelen isteklerin beklediğimiz olaylar olup olmadığını denetlemek istiyoruz. Şimdi üst bilgiyi ce-type olarak azure.webpubsub.sys.connectediçermesi gereken sistem connected olayını önemsediğimizi düşünelim. Sohbet odasına kimlerin katıldığını görebilmeleri için bağlı olayı tüm istemcilere yayınlamak için kötüye kullanım korumasından sonra mantığı ekleriz.
```
// validation: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#protection
app.options("/eventhandler", ctx -> {
    ctx.header("WebHook-Allowed-Origin", "*");
});

// handle events: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#events
app.post("/eventhandler", ctx -> {
    String event = ctx.header("ce-type");
    if ("azure.webpubsub.sys.connected".equals(event)) {
        String id = ctx.header("ce-userId");
        System.out.println(id + " connected.");
    }
    ctx.status(200);
});
```
Yukarıdaki kodda, bir istemci bağlandığında konsola bir ileti yazdıracağız. Bağlı istemcinin kimliğini görebilmek için kullandığımızı ctx.header("ce-userId") görebilirsiniz.

message Olay ce-type her zaman azure.webpubsub.user.messageşeklindedir. Ayrıntılar bkz. Olay iletisi. Bir ileti geldiğinde iletiyi tüm bağlı istemcilere JSON biçiminde yayınladığımız iletileri işlemek için mantığı güncelleştiririz.

// handle events: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#events
app.post("/eventhandler", ctx -> {
    String event = ctx.header("ce-type");
    if ("azure.webpubsub.sys.connected".equals(event)) {
        String id = ctx.header("ce-userId");
        System.out.println(id + " connected.");
    } else if ("azure.webpubsub.user.message".equals(event)) {
        String id = ctx.header("ce-userId");
        String message = ctx.body();
        Gson gson = new Gson();
        JsonObject jsonObject = new JsonObject();
        jsonObject.addProperty("from", id);
        jsonObject.addProperty("message", message);
        String messageToSend = gson.toJson(jsonObject);
        service.sendToAll(messageToSend, WebPubSubContentType.APPLICATION_JSON);
    }
    ctx.status(200);
});

Şimdilik Python'da olay işleyicisini kendiniz uygulamanız gerekir. Adımlar, protokol belirtiminin ardından doğrudan ilerler ve aşağıdaki listede gösterilmiştir:

Olay işleyici yolu /eventhandleriçin HTTP işleyicisi ekleyelim.

İlk olarak uygunsuz kullanım koruması SEÇENEKLERİ isteklerini işlemek istiyoruz, üst bilgide üst bilgi WebHook-Request-Origin bulunup bulunmadiğini denetleyeceğiz ve üst bilgisini WebHook-Allowed-Origindöndüreceğiz. Tanıtım amacıyla kolaylık sağlamak için tüm kaynaklara izin vermek için geri dönüyoruz * .

# validation: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#protection
@app.route('/eventhandler', methods=['OPTIONS'])
def handle_event():
    if request.method == 'OPTIONS':
        if request.headers.get('WebHook-Request-Origin'):
            res = Response()
            res.headers['WebHook-Allowed-Origin'] = '*'
            res.status_code = 200
            return res

Ardından gelen isteklerin beklediğimiz olaylar olup olmadığını denetlemek istiyoruz. Şimdi üst bilgiyi ce-type olarak azure.webpubsub.sys.connectediçermesi gereken sistem connected olayını önemsediğimizi düşünelim. Kötüye kullanım korumasından sonra mantığı ekleriz:

# validation: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#protection
# handle events: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#events
@app.route('/eventhandler', methods=['POST', 'OPTIONS'])
def handle_event():
    if request.method == 'OPTIONS':
        if request.headers.get('WebHook-Request-Origin'):
            res = Response()
            res.headers['WebHook-Allowed-Origin'] = '*'
            res.status_code = 200
            return res
    elif request.method == 'POST':
        user_id = request.headers.get('ce-userid')
        if request.headers.get('ce-type') == 'azure.webpubsub.sys.connected':
            return user_id + ' connected', 200
        else:
            return 'Not found', 404

Yukarıdaki kodda, bir istemci bağlandığında konsola bir ileti yazdıracağız. Bağlı istemcinin kimliğini görebilmek için kullandığımızı request.headers.get('ce-userid') görebilirsiniz.

message Olay ce-type her zaman azure.webpubsub.user.messageşeklindedir. Ayrıntılar bkz. Olay iletisi. Bir ileti geldiğinde iletiyi tüm bağlı istemcilere yayınladığımız iletileri işlemek için mantığı güncelleştiririz.

@app.route('/eventhandler', methods=['POST', 'OPTIONS'])
def handle_event():
    if request.method == 'OPTIONS':
        if request.headers.get('WebHook-Request-Origin'):
            res = Response()
            res.headers['WebHook-Allowed-Origin'] = '*'
            res.status_code = 200
            return res
    elif request.method == 'POST':
        user_id = request.headers.get('ce-userid')
        type = request.headers.get('ce-type')
        if type == 'azure.webpubsub.sys.connected':
            print(f"{user_id} connected")
            return '', 204
        elif type == 'azure.webpubsub.user.message':
            # default uses JSON
            service.send_to_all(message={
                'from': user_id,
                'message': request.data.decode('UTF-8')
            })
            # returned message is also received by the client
            return {
                'from': "system",
                'message': "message handled by server"
            }, 200
        else:
            return 'Bad Request', 400

Web sayfasını güncelleştirme

Şimdi bağlanacak, ileti gönderecek ve alınan iletileri sayfada görüntüleyecek mantığı ekleyecek şekilde güncelleştirelim index.html .

<html>
  <body>
    <h1>Azure Web PubSub Chat</h1>
    <input id="message" placeholder="Type to chat...">
    <div id="messages"></div>
    <script>
      (async function () {
        let id = prompt('Please input your user name');
        let res = await fetch(`/negotiate?id=${id}`);
        let data = await res.json();
        let ws = new WebSocket(data.url);
        ws.onopen = () => console.log('connected');

        let messages = document.querySelector('#messages');
        
        ws.onmessage = event => {
          let m = document.createElement('p');
          let data = JSON.parse(event.data);
          m.innerText = `[${data.type || ''}${data.from || ''}] ${data.message}`;
          messages.appendChild(m);
        };

        let message = document.querySelector('#message');
        message.addEventListener('keypress', e => {
          if (e.charCode !== 13) return;
          ws.send(message.value);
          message.value = '';
        });
      })();
    </script>
  </body>

</html>

Yukarıdaki kodda bağlandığımız kodun tarayıcıda yerel WebSocket API'sini, ileti göndermek ve WebSocket.onmessage alınan iletileri dinlemek için kullandığını WebSocket.send() görebilirsiniz.

Ayrıca hizmete bağlanmak için İstemci SDK'larını da kullanabilirsiniz. Bu da sizi otomatik yeniden bağlama, hata işleme ve daha fazlası ile güçlendirebilir.

Artık sohbetin çalışması için bir adım kaldı. Hangi olayları önemsediğimizi ve Web PubSub hizmetinde olayları nereye gönderebileceğimizi yapılandıralım.

Olay işleyicisini ayarlama

Web PubSub hizmetinde olay işleyicisini, hizmete olayların nereye gönderileceğine söyleyecek şekilde ayarladık.

Web sunucusu yerel olarak çalıştırıldığında, web PubSub hizmeti internetten erişilebilen uç noktası yoksa localhost'ı nasıl çağırır? Genellikle iki yol vardır. Bunlardan biri, bir genel tünel aracı kullanarak localhost'un genel kullanıma sunma, diğeri ise web PubSub hizmetinden gelen trafiği yerel sunucunuza tünel oluşturmak için awps-tunnel kullanmaktır.

Bu bölümde, olay işleyicilerini ayarlamak için Azure CLI'yi ve trafiği localhost'a yönlendirmek için awps-tunnel kullanacağız.

Hub ayarlarını yapılandırma

Web PubSub'un iletileri 'nin tünel bağlantısı üzerinden awps-tunnelyönlendirmesi için URL şablonunu düzen kullanacak tunnel şekilde ayarladık. Olay işleyicileri, bu makalede açıklandığı gibi portaldan veya CLI'dan ayarlanabilir. Burada CLI aracılığıyla ayarlayacağız. Önceki adım ayarlandığı gibi yoldaki /eventhandler olayları dinlediğimiz için URL şablonunu olarak tunnel:///eventhandlerayarlarız.

Hub için olay işleyici ayarlarını oluşturmak için Sample_ChatApp Azure CLI az webpubsub hub create komutunu kullanın.

Önemli

benzersiz-kaynak-adınızı> önceki adımlardan oluşturulan Web PubSub kaynağınızın adıyla değiştirin<.

az webpubsub hub create -n "<your-unique-resource-name>" -g "myResourceGroup" --hub-name "Sample_ChatApp" --event-handler url-template="tunnel:///eventhandler" user-event-pattern="*" system-event="connected"

awps-tunnel'ı yerel olarak çalıştırma

awps-tunnel indirme ve yükleme

Araç, Node.js sürüm 16 veya üzeri üzerinde çalışır.

npm install -g @azure/web-pubsub-tunnel-tool

Hizmet bağlantı dizesi kullanma ve çalıştırma

export WebPubSubConnectionString="<your connection string>"
awps-tunnel run --hub Sample_ChatApp --upstream http://localhost:8080

Web sunucusunu çalıştırma

Artık her şey ayarlandı. Şimdi web sunucusunu çalıştıralım ve sohbet uygulamasını çalışır durumda oynatalım.

Şimdi kullanarak sunucuyu dotnet run --urls http://localhost:8080çalıştırın.

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

Şimdi aşağıdaki komutu kullanarak sunucuyu çalıştırın:

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

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

http://localhost:8080/index.html'ı açın. Kullanıcı adınızı girip sohbet etmeye başlayabilirsiniz.

Olay işleyicisi ile Gecikmeli `connect` Kimlik Doğrulaması

Önceki bölümlerde, istemcilerin Web PubSub hizmetine bağlanması için Web PubSub hizmet URL'sini ve JWT erişim belirtecini döndürmek için anlaşma uç noktasının nasıl kullanılacağını gösteriyoruz. Bazı durumlarda, örneğin, kaynakları sınırlı olan uç cihazlar, istemciler Web PubSub kaynaklarına doğrudan bağlanmayı tercih edebilir. Bu gibi durumlarda, istemcilere yavaş kimlik doğrulaması yapmak, istemcilere kullanıcı kimliği atamak, istemcilerin bağlandıktan sonra katıldığı grupları belirtmek, istemcilerin sahip olduğu izinleri ve WebSocket altprotocol'u istemciye WebSocket yanıtı olarak yapılandırmak için olay işleyicisini yapılandırabilirsinizconnect. Ayrıntılar lütfen olay işleyicisi belirtimini bağlama konusuna bakın.

Şimdi olay işleyicisini kullanarak connect anlaşma bölümünün yaptığı gibi benzer bir sonuç elde edelim.

Hub ayarlarını güncelleştirme

İlk olarak hub ayarlarını olay işleyicisini de içerecek connect şekilde güncelleştirelim. JWT erişim belirteci olmayan istemcilerin hizmete bağlanabilmesi için anonim bağlantıya da izin vermemiz gerekiyor.

Hub için olay işleyici ayarlarını oluşturmak için Sample_ChatApp Azure CLI az webpubsub hub update komutunu kullanın.

Önemli

benzersiz-kaynak-adınızı> önceki adımlardan oluşturulan Web PubSub kaynağınızın adıyla değiştirin<.

az webpubsub hub update -n "<your-unique-resource-name>" -g "myResourceGroup" --hub-name "Sample_ChatApp" --allow-anonymous true --event-handler url-template="tunnel:///eventhandler" user-event-pattern="*" system-event="connected" system-event="connect"

Bağlantı olayını işlemek için yukarı akış mantığını güncelleştirme

Şimdi bağlantı olayını işlemek için yukarı akış mantığını güncelleştirelim. Şimdi anlaşma uç noktasını da kaldırabiliriz.

Tanıtım amaçlı olarak anlaşma uç noktasında yaptıklarımıza benzer şekilde sorgu parametrelerinden kimlik de okuruz. Connect olayında, özgün istemci sorgusu bağlanma olayı istek gövdesinde korunur.

sınıfının Sample_ChatAppiçinde, olayı işlemek connect için öğesini geçersiz kılınOnConnectAsync():

sealed class Sample_ChatApp : WebPubSubHub
{
    private readonly WebPubSubServiceClient<Sample_ChatApp> _serviceClient;

    public Sample_ChatApp(WebPubSubServiceClient<Sample_ChatApp> serviceClient)
    {
        _serviceClient = serviceClient;
    }

    public override ValueTask<ConnectEventResponse> OnConnectAsync(ConnectEventRequest request, CancellationToken cancellationToken)
    {
        if (request.Query.TryGetValue("id", out var id))
        {
            return new ValueTask<ConnectEventResponse>(request.CreateResponse(userId: id.FirstOrDefault(), null, null, null));
        }

        // The SDK catches this exception and returns 401 to the caller
        throw new UnauthorizedAccessException("Request missing id");
    }

    public override async Task OnConnectedAsync(ConnectedEventRequest request)
    {
        Console.WriteLine($"[SYSTEM] {request.ConnectionContext.UserId} joined.");
    }

    public override async ValueTask<UserEventResponse> OnMessageReceivedAsync(UserEventRequest request, CancellationToken cancellationToken)
    {
        await _serviceClient.SendToAllAsync(RequestContent.Create(
        new
        {
            from = request.ConnectionContext.UserId,
            message = request.Data.ToString()
        }),
        ContentType.ApplicationJson);

        return new UserEventResponse();
    }
}

İstemci bağlama olayını işlemek için server.js güncelleştirin:

const express = require("express");
const { WebPubSubServiceClient } = require("@azure/web-pubsub");
const { WebPubSubEventHandler } = require("@azure/web-pubsub-express");

const app = express();
const hubName = "Sample_ChatApp";

let serviceClient = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hubName);

let handler = new WebPubSubEventHandler(hubName, {
  path: "/eventhandler",
  handleConnect: async (req, res) => {
    if (req.context.query.id){
      res.success({ userId: req.context.query.id });
    } else {
      res.fail(401, "missing user id");
    }
  },
  onConnected: async (req) => {
    console.log(`${req.context.userId} connected`);
  },
  handleUserEvent: async (req, res) => {
    if (req.context.eventName === "message")
      await serviceClient.sendToAll({
        from: req.context.userId,
        message: req.data,
      });
    res.success();
  },
});
app.use(express.static("public"));
app.use(handler.getMiddleware());

app.listen(8080, () => console.log("server started"));

Şimdi bağlama olayını azure.webpubsub.sys.connectişlemek için mantığı ekleyelim:


// validation: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#protection
app.options("/eventhandler", ctx -> {
    ctx.header("WebHook-Allowed-Origin", "*");
});

// handle events: https://learn.microsoft.com/azure/azure-web-pubsub/reference-cloud-events#connect
app.post("/eventhandler", ctx -> {
    String event = ctx.header("ce-type");
    if ("azure.webpubsub.sys.connect".equals(event)) {
        String body = ctx.body();
        System.out.println("Reading from request body...");
        Gson gson = new Gson();
        JsonObject requestBody = gson.fromJson(body, JsonObject.class); // Parse JSON request body
        JsonObject query = requestBody.getAsJsonObject("query");
        if (query != null) {
            System.out.println("Reading from request body query:" + query.toString());
            JsonElement idElement = query.get("id");
            if (idElement != null) {
                JsonArray idInQuery = query.get("id").getAsJsonArray();
                if (idInQuery != null && idInQuery.size() > 0) {
                    String id = idInQuery.get(0).getAsString();
                    ctx.contentType("application/json");
                    Gson response = new Gson();
                    JsonObject jsonObject = new JsonObject();
                    jsonObject.addProperty("userId", id);
                    ctx.result(response.toJson(jsonObject));
                    return;
                }
            }
        } else {
            System.out.println("No query found from request body.");
        }
        ctx.status(401).result("missing user id");
    } else if ("azure.webpubsub.sys.connected".equals(event)) {
        String id = ctx.header("ce-userId");
        System.out.println(id + " connected.");
        ctx.status(200);
    } else if ("azure.webpubsub.user.message".equals(event)) {
        String id = ctx.header("ce-userId");
        String message = ctx.body();
        service.sendToAll(String.format("{\"from\":\"%s\",\"message\":\"%s\"}", id, message), WebPubSubContentType.APPLICATION_JSON);
        ctx.status(200);
    }
});

Şimdi üst bilgiyi ce-type olarak azure.webpubsub.sys.connectiçermesi gereken sistem connect olayını işleyelim. Kötüye kullanım korumasından sonra mantığı ekleriz:

@app.route('/eventhandler', methods=['POST', 'OPTIONS'])
def handle_event():
    if request.method == 'OPTIONS' or request.method == 'GET':
        if request.headers.get('WebHook-Request-Origin'):
            res = Response()
            res.headers['WebHook-Allowed-Origin'] = '*'
            res.status_code = 200
            return res
    elif request.method == 'POST':
        user_id = request.headers.get('ce-userid')
        type = request.headers.get('ce-type')
        print("Received event of type:", type)
        # Sample connect logic if connect event handler is configured
        if type == 'azure.webpubsub.sys.connect':
            body = request.data.decode('utf-8')
            print("Reading from connect request body...")
            query = json.loads(body)['query']
            print("Reading from request body query:", query)
            id_element = query.get('id')
            user_id = id_element[0] if id_element else None
            if user_id:
                return {'userId': user_id}, 200
            return 'missing user id', 401
        elif type == 'azure.webpubsub.sys.connected':
            return user_id + ' connected', 200
        elif type == 'azure.webpubsub.user.message':
            service.send_to_all(content_type="application/json", message={
                'from': user_id,
                'message': request.data.decode('UTF-8')
            })
            return Response(status=204, content_type='text/plain')
        else:
            return 'Bad Request', 400

Index.html doğrudan bağlanacak şekilde güncelleştirme

Şimdi Web PubSub hizmetine doğrudan bağlanmak için web sayfasını güncelleştirelim. Bahsetmeniz gereken bir nokta, tanıtım amacıyla Web PubSub hizmet uç noktasının istemci koduna sabit kodlanmış olmasıdır. Lütfen aşağıdaki html'deki hizmet ana bilgisayar adını <the host name of your service> kendi hizmetinizdeki değerle güncelleştirin. Web PubSub hizmet uç noktası değerini sunucunuzdan getirmek hala yararlı olabilir; istemcinin bağlandığı yere daha fazla esneklik ve denetlenebilirlik sağlar.

<html>
  <body>
    <h1>Azure Web PubSub Chat</h1>
    <input id="message" placeholder="Type to chat...">
    <div id="messages"></div>
    <script>
      (async function () {
        // sample host: mock.webpubsub.azure.com
        let hostname = "<the host name of your service>";
        let id = prompt('Please input your user name');
        let ws = new WebSocket(`wss://${hostname}/client/hubs/Sample_ChatApp?id=${id}`);
        ws.onopen = () => console.log('connected');

        let messages = document.querySelector('#messages');
        
        ws.onmessage = event => {
          let m = document.createElement('p');
          let data = JSON.parse(event.data);
          m.innerText = `[${data.type || ''}${data.from || ''}] ${data.message}`;
          messages.appendChild(m);
        };

        let message = document.querySelector('#message');
        message.addEventListener('keypress', e => {
          if (e.charCode !== 13) return;
          ws.send(message.value);
          message.value = '';
        });
      })();
    </script>
  </body>

</html>

Sunucuyu yeniden çalıştırma

Şimdi sunucuyu yeniden çalıştırın ve önceki yönergeleri izleyerek web sayfasını ziyaret edin. 'yi durdurduysanız awps-tunnellütfen tünel aracını da yeniden çalıştırın.

Sonraki adımlar

Bu öğretici, Azure Web PubSub hizmetinde olay sisteminin nasıl çalıştığı 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ş

Öğretici: Azure Web PubSub hizmetiyle sohbet uygulaması oluşturma

Önkoşullar

Azure Web PubSub örneği oluşturma

Kaynak grubu oluşturma

Web PubSub örneği oluşturma

Gelecekte kullanmak üzere ConnectionString'i edinin

Projeyi ayarlama

Önkoşullar

Uygulamayı oluşturma

Anlaşma uç noktası ekleme

Olayları işleme

Web sayfasını güncelleştirme

Olay işleyicisini ayarlama

Hub ayarlarını yapılandırma

awps-tunnel'ı yerel olarak çalıştırma

awps-tunnel indirme ve yükleme

Hizmet bağlantı dizesi kullanma ve çalıştırma

Web sunucusunu çalıştırma

Olay işleyicisi ile Gecikmeli `connect` Kimlik Doğrulaması

Hub ayarlarını güncelleştirme

Bağlantı olayını işlemek için yukarı akış mantığını güncelleştirme

Index.html doğrudan bağlanacak şekilde güncelleştirme

Sunucuyu yeniden çalıştırma

Sonraki adımlar

Geri Bildirim

Ek kaynaklar

Aracılığıyla paylaş

Öğretici: Azure Web PubSub hizmetiyle sohbet uygulaması oluşturma

Önkoşullar

Azure Web PubSub örneği oluşturma

Kaynak grubu oluşturma

Web PubSub örneği oluşturma

Gelecekte kullanmak üzere ConnectionString'i edinin

Projeyi ayarlama

Önkoşullar

Uygulamayı oluşturma

Anlaşma uç noktası ekleme

Olayları işleme

Web sayfasını güncelleştirme

Olay işleyicisini ayarlama

Hub ayarlarını yapılandırma

awps-tunnel'ı yerel olarak çalıştırma

awps-tunnel indirme ve yükleme

Hizmet bağlantı dizesi kullanma ve çalıştırma

Web sunucusunu çalıştırma

Olay işleyicisi ile Gecikmeli connect Kimlik Doğrulaması

Hub ayarlarını güncelleştirme

Bağlantı olayını işlemek için yukarı akış mantığını güncelleştirme

Index.html doğrudan bağlanacak şekilde güncelleştirme

Sunucuyu yeniden çalıştırma

Sonraki adımlar

Geri Bildirim

Ek kaynaklar

Olay işleyicisi ile Gecikmeli `connect` Kimlik Doğrulaması