Hızlı başlangıç: SignalR hizmetini kullanarak sohbet odası oluşturmaQuickstart: Create a chat room by using SignalR Service

Azure SignalR Hizmeti, geliştiricilerin gerçek zamanlı özelliklerle web uygulamalarını kolayca derlemesine yardımcı olan bir Azure hizmetidir.Azure SignalR Service is an Azure service that helps developers easily build web applications with real-time features. Bu hizmet ASP.NET Core 2,1 Için SignalRtabanlıdır, ancak ASP.NET Core 3,0 için SignalR'yi de destekler.This service is based on SignalR for ASP.NET Core 2.1, but also supports SignalR for ASP.NET Core 3.0.

Bu makalede Azure SignalR Hizmeti ile çalışmaya başlama işlemi gösterilmektedir.This article shows you how to get started with the Azure SignalR Service. Bu hızlı başlangıçta, bir ASP.NET Core MVC web uygulaması kullanarak bir sohbet uygulaması oluşturacaksınız.In this quickstart, you'll create a chat application by using an ASP.NET Core MVC web app. Bu uygulama, gerçek zamanlı içerik güncelleştirmelerini etkinleştirmek üzere Azure SignalR Hizmeti kaynağınızla bağlantı kuracaktır.This app will make a connection with your Azure SignalR Service resource to enable real-time content updates. Web uygulamasını yerel olarak barındıracak ve birden çok tarayıcı istemcisine bağlanırsınız.You'll host the web application locally and connect with multiple browser clients. Her istemci, diğer tüm istemcilere içerik güncelleştirmeleri gönderebilecektir.Each client will be able to push content updates to all other clients.

Bu hızlı başlangıçtaki adımları tamamlamak için herhangi bir kod düzenleyicisini kullanabilirsiniz.You can use any code editor to complete the steps in this quickstart. Bir seçenek, Windows, macOS ve Linux platformlarında kullanılabilen Visual Studio Code.One option is Visual Studio Code, which is available on the Windows, macOS, and Linux platforms.

Bu öğreticinin kodu AzureSignalR-samples GitHub deposundan indirilebilir.The code for this tutorial is available for download in the AzureSignalR-samples GitHub repository. Ayrıca, bu hızlı başlangıçta kullanılan Azure kaynaklarını bir SignalR Hizmet betiği oluştur' u izleyerek oluşturabilirsiniz.Also, you can create the Azure resources used in this quickstart by following Create a SignalR Service script.

Azure aboneliğinizyoksa başlamadan önce ücretsiz bir hesap oluşturun.If you don't have an Azure subscription, create a free account before you begin.

ÖnkoşullarPrerequisites

Azure SignalR kaynağı oluşturmaCreate an Azure SignalR resource

  1. Azure SignalR hizmeti kaynak oluşturmak için ilk kez oturum için Azure portalında.To create an Azure SignalR Service resource, first sign in to the Azure portal. Sayfanın sol tarafındaki seçin + kaynak Oluştur.In the upper-left side of the page, select + Create a resource. İçinde markette Ara metin kutusuna SignalR hizmeti.In the Search the Marketplace text box, enter SignalR Service.

  2. Seçin SignalR hizmeti seçin ve sonuçları Oluştur.Select SignalR Service in the results, and select Create.

  3. Yeni SignalR Ayarları sayfasında, yeni SignalR kaynağınız için aşağıdaki ayarları ekleyin:On the new SignalR settings page, add the following settings for your new SignalR resource:

    AdName Önerilen değerRecommended value AçıklamaDescription
    Kaynak adıResource name testsignalrtestsignalr SignalR kaynağı için kullanılacak benzersiz kaynak adını girin.Enter a unique resource name to use for the SignalR resource. Adı 1 ila 63 karakter dizesi olması ve yalnızca sayı, harf ve kısa çizgi içermelidir (-) karakter.The name must be a string of 1 to 63 characters and contain only numbers, letters, and the hyphen (-) character. Adı başlayamaz veya kısa çizgi karakteri ile bitemez ve art arda tire karakterler geçerli değildir.The name cannot start or end with the hyphen character, and consecutive hyphen characters are not valid.
    AbonelikSubscription Aboneliğinizi seçinChoose your subscription SignalR testi için kullanmak istediğiniz Azure aboneliğini seçin.Select the Azure subscription that you want to use to test SignalR. Hesabınızda yalnızca bir aboneliğiniz varsa, otomatik olarak seçilir ve abonelik açılan görüntülenmiyorsa.If your account has only one subscription, it's automatically selected and the Subscription drop-down isn't displayed.
    Kaynak grubuResource group Adlı bir kaynak grubu oluşturma SignalRTestResourcesCreate a resource group named SignalRTestResources SignalR kaynağınız için bir kaynak grubu seçin veya oluşturun.Select or create a resource group for your SignalR resource. Bu grup, kaynak grubunu silerek aynı anda silmek isteyebilirsiniz birden fazla kaynak düzenlemek için kullanışlıdır.This group is useful for organizing multiple resources that you might want to delete at the same time by deleting the resource group. Daha fazla bilgi için bkz. Azure kaynaklarınızı yönetmek için kaynak gruplarını kullanma.For more information, see Using resource groups to manage your Azure resources.
    LocationLocation Doğu ABDEast US SignalR kaynağınızın barındırılacağı coğrafi konumu belirtmek için Konum’u kullanın.Use Location to specify the geographic location in which your SignalR resource is hosted. En iyi performans için kaynağınızı uygulamanızın diğer bileşenleriyle aynı bölgede oluşturmanızı öneririz.For the best performance, we recommend that you create the resource in the same region as other components of your application.
    Fiyatlandırma katmanıPricing tier ÜcretsizFree Şu anda ücretsiz ve standart seçenekleri kullanılabilir.Currently, Free and Standard options are available.
    Panoya sabitlePin to dashboard Daha kolay bulmak için bu nedenle, panoya sabitlenmiş kaynak için bu kutuyu seçin.Select this box to have the resource pinned to your dashboard so it's easier to find.
  4. Oluştur’u seçin.Select Create. Dağıtımın tamamlanması birkaç dakika sürebilir.The deployment might take a few minutes to complete.

  5. Dağıtım tamamlandıktan sonra seçin anahtarları altında ayarları.After the deployment is complete, select Keys under SETTINGS. Birincil anahtar bağlantı dizesini kopyalayın.Copy your connection string for the primary key. Azure SignalR hizmeti kaynağı kullanacak şekilde yapılandırmak için bu dize daha sonra kullanacaksınız.You'll use this string later to configure your app to use the Azure SignalR Service resource.

    Bağlantı dizesi aşağıdaki şekildedir:The connection string will have the following form:

     Endpoint=<service_endpoint>;AccessKey=<access_key>;
    

ASP.NET Core web uygulaması oluşturmaCreate an ASP.NET Core web app

Bu bölümde, bir ASP.NET Core MVC web uygulaması projesi oluşturmak için .NET Core komut satırı arabirimini (CLI) kullanacaksınız.In this section, you use the .NET Core command-line interface (CLI) to create an ASP.NET Core MVC web app project. Visual Studio üzerinden .NET Core CLI kullanmanın avantajı, Windows, macOS ve Linux platformları genelinde kullanılabilir hale gelir.The advantage of using the .NET Core CLI over Visual Studio is that it's available across the Windows, macOS, and Linux platforms.

  1. Projeniz için bir klasör oluşturun.Create a folder for your project. Bu hızlı başlangıç, E:\Testing\chattest klasörünü kullanır.This quickstart uses the E:\Testing\chattest folder.

  2. Yeni klasörde, projeyi oluşturmak için aşağıdaki komutu çalıştırın:In the new folder, run the following command to create the project:

     dotnet new mvc
    

Projeye Gizli Dizi Yöneticisi eklemeAdd Secret Manager to the project

Bu bölümde, projenize gizli yönetici aracını ekleyeceksiniz.In this section, you'll add the Secret Manager tool to your project. Gizli dizi Yöneticisi Aracı, geliştirme çalışması için hassas verileri proje ağacınızdaki dışında depolar.The Secret Manager tool stores sensitive data for development work outside your project tree. Bu yaklaşım, kaynak kodundaki uygulama gizli anahtarlarının yanlışlıkla paylaşılmasını önlemeye yardımcı olur.This approach helps prevent the accidental sharing of app secrets in source code.

  1. .csproj dosyanızı açın.Open your .csproj file. DotNetCliToolReferenceMicrosoft.Extensions.SecretManager.Toolsöğesini dahil etmek için bir öğesi ekleyin.Add a DotNetCliToolReference element to include Microsoft.Extensions.SecretManager.Tools. Ayrıca, chattest. csprojiçin aşağıdaki kodda gösterildiği gibi bir UserSecretsId öğesi ekleyin ve dosyayı kaydedin.Also add a UserSecretsId element as shown in the following code for chattest.csproj, and save the file.

    <Project Sdk="Microsoft.NET.Sdk.Web">
    <PropertyGroup>
        <TargetFramework>netcoreapp2.0</TargetFramework>
        <UserSecretsId>SignalRChatRoomEx</UserSecretsId>
    </PropertyGroup>
    <ItemGroup>
        <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
    </ItemGroup>
    <ItemGroup>
        <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
        <DotNetCliToolReference Include="Microsoft.Extensions.SecretManager.Tools" Version="2.0.0" />
    </ItemGroup>
    </Project>    
    

Web uygulamasına Azure SignalR eklemeAdd Azure SignalR to the web app

  1. Aşağıdaki komutu çalıştırarak Microsoft.Azure.SignalR NuGet paketine bir başvuru ekleyin:Add a reference to the Microsoft.Azure.SignalR NuGet package by running the following command:

     dotnet add package Microsoft.Azure.SignalR
    
  2. Projenizin paketlerini geri yüklemek için aşağıdaki komutu çalıştırın:Run the following command to restore packages for your project:

     dotnet restore
    
  3. Gizli Dizi Yöneticisi’ne Azure:SignalR:ConnectionString adlı bir gizli dizi ekleyin.Add a secret named Azure:SignalR:ConnectionString to Secret Manager.

    Bu gizli dizi, SignalR Hizmetinizin kaynağına erişmeye yarayan bağlantı dizesini içerir.This secret will contain the connection string to access your SignalR Service resource. Azure: SignalR: ConnectionString , bir bağlantı kurmak Için SignalR 'nin aradığı varsayılan yapılandırma anahtarıdır.Azure:SignalR:ConnectionString is the default configuration key that SignalR looks for to establish a connection. Aşağıdaki komutta bulunan değeri, SignalR hizmet kaynağınızın bağlantı dizesiyle değiştirin.Replace the value in the following command with the connection string for your SignalR Service resource.

    Bu komutu . csproj dosyasıyla aynı dizinde çalıştırmalısınız.You must run this command in the same directory as the .csproj file.

    dotnet user-secrets set Azure:SignalR:ConnectionString "<Your connection string>"    
    

    Gizli dizi Yöneticisi, yalnızca yerel olarak barındırılırken Web uygulamasını test etmek için kullanılacaktır.Secret Manager will be used only for testing the web app while it's hosted locally. Daha sonraki bir öğreticide, sohbet web uygulamasını Azure 'a dağıtırsınız.In a later tutorial, you'll deploy the chat web app to Azure. Web uygulaması Azure 'a dağıtıldıktan sonra, bağlantı dizesini gizli yönetici ile depolamak yerine bir uygulama ayarı kullanırsınız.After the web app is deployed to Azure, you'll use an application setting instead of storing the connection string with Secret Manager.

    Bu gizli dizi Yapılandırma API 'siyle erişilir.This secret is accessed with the Configuration API. İki nokta (:) yapılandırma adında, desteklenen tüm platformlarda Yapılandırma API 'SI ile birlikte kullanılır.A colon (:) works in the configuration name with the Configuration API on all supported platforms. Bkz. ortama göre yapılandırma.See Configuration by environment.

  4. Startup.cs 'i açın ve yalnızca ASP.NET Core 2 için services.AddSignalR().AddAzureSignalR() metodunu çağırarak Azure SignalR hizmetini kullanmak üzere ConfigureServices yöntemini güncelleştirin:Open Startup.cs and update the ConfigureServices method to use Azure SignalR Service by calling the services.AddSignalR().AddAzureSignalR() method for ASP.NET Core 2 only:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
        services.AddSignalR().AddAzureSignalR();
    }
    

    ASP.NET Core 3 + için, ConfigureServices yöntemi için gereken bir değişiklik yoktur.For ASP.NET Core 3+, there is no change needed for ConfigureServices method.

    AddAzureSignalR()bir parametre geçirilmeyen Bu kod, SignalR hizmeti kaynak bağlantı dizesinin varsayılan yapılandırma anahtarını kullanır.By not passing a parameter to AddAzureSignalR(), this code uses the default configuration key for the SignalR Service resource connection string. Varsayılan yapılandırma anahtarı Azure: SignalR: ConnectionString.The default configuration key is Azure:SignalR:ConnectionString.

  5. Ayrıca Startup.csiçinde, aşağıdaki kodla app.UseStaticFiles() çağrısını değiştirerek Configure yöntemi güncelleştirin ve dosyayı yalnızca ASP.NET Core 2 için kaydedin.Also in Startup.cs, update the Configure method by replacing the call to app.UseStaticFiles() with the following code and save the file, for ASP.NET Core 2 only.

    app.UseFileServer();
    app.UseAzureSignalR(routes =>
    {
        routes.MapHub<Chat>("/chat");
    });
    

    ASP.NET Core 3 + için yukarıdaki kodu ile değiştirin:For ASP.NET Core 3+, replace the above code with:

    app.UseFileServer();
    app.UseRouting();
    app.UseAuthorization();
    
    app.UseEndpoints(routes =>
    {
        routes.MapHub<Chat>("/chat");
    });
    

Hub sınıfı eklemeAdd a hub class

SignalR 'de, bir hub, istemciden çağrılabilen bir yöntemler kümesini kullanıma sunan bir çekirdek bileşendir.In SignalR, a hub is a core component that exposes a set of methods that can be called from the client. Bu bölümde, iki yöntemle bir hub sınıf tanımlayacaksınız:In this section, you define a hub class with two methods:

  • Broadcast: Bu yöntem bir iletiyi tüm istemcilere yayınlar.Broadcast: This method broadcasts a message to all clients.
  • Echo: Bu yöntem bir iletiyi çağırana geri gönderir.Echo: This method sends a message back to the caller.

Her iki yöntem de ASP.NET Core SignalR SDK 'nın sağladığı Clients arabirimini kullanır.Both methods use the Clients interface that the ASP.NET Core SignalR SDK provides. Bu arabirim, istemcilere içerik gönderebilmeniz için tüm bağlı istemcilere erişmenizi sağlar.This interface gives you access to all connected clients, so you can push content to your clients.

  1. Proje dizininizde Hub adlı yeni bir klasör ekleyin.In your project directory, add a new folder named Hub. Yeni klasöre Chat.cs adlı yeni bir hub kod dosyası ekleyin.Add a new hub code file named Chat.cs to the new folder.

  2. Hub sınıfınızı tanımlamak ve dosyayı kaydetmek için chat.cs 'e aşağıdaki kodu ekleyin.Add the following code to Chat.cs to define your hub class and save the file.

    Chattest dışında bir proje adı kullandıysanız bu sınıfın ad alanını güncelleştirin.Update the namespace for this class if you used a project name that differs from chattest.

    using Microsoft.AspNetCore.SignalR;
    
    namespace chattest
    {
    
        public class Chat : Hub
        {
            public void BroadcastMessage(string name, string message)
            {
                Clients.All.SendAsync("broadcastMessage", name, message);
            }
    
            public void Echo(string name, string message)
            {
                Clients.Client(Context.ConnectionId).SendAsync("echo", name, message + " (echo from server)");
            }
        }
    }
    

Web uygulaması için istemci arabirimini eklemeAdd the client interface for the web app

Bu sohbet odası uygulamasının istemci kullanıcı arabirimi, Wwwroot dizinindeki index. html adlı bir dosyadaki HTML ve JavaScript 'ten oluşur.The client user interface for this chat room app will consist of HTML and JavaScript in a file named index.html in the wwwroot directory.

Samples deposunun Wwwroot klasöründen index. html dosyasını, CSS klasörünü ve Scripts klasörünü kopyalayın.Copy the index.html file, the css folder, and the scripts folder from the wwwroot folder of the samples repository. Bunları projenizin Wwwroot klasörüne yapıştırın.Paste them into your project's wwwroot folder.

İndex. html' in ana kodu aşağıda verilmiştir:Here's the main code of index.html:

var connection = new signalR.HubConnectionBuilder()
                            .withUrl('/chat')
                            .build();
bindConnectionMessage(connection);
connection.start()
    .then(function () {
        onConnected(connection);
    })
    .catch(function (error) {
        console.error(error.message);
    });

İndex. html dosyasındaki kod, Azure SignalR kaynağına http bağlantısı kurmak için HubConnectionBuilder.build() çağırır.The code in index.html calls HubConnectionBuilder.build() to make an HTTP connection to the Azure SignalR resource.

Bağlantı başarılı olursa, o bağlantı bindConnectionMessage konumuna geçirilir ve istemciye gönderilen gelen içerik için olay işleyicileri ekler.If the connection is successful, that connection is passed to bindConnectionMessage, which adds event handlers for incoming content pushes to the client.

HubConnection.start(), hub ile iletişim başlatır.HubConnection.start() starts communication with the hub. Sonra, onConnected() düğme olay işleyicilerini ekler.Then, onConnected() adds the button event handlers. Bu işleyiciler, bağlantıyı kullanarak bu istemcinin tüm bağlı istemcilere içerik güncelleştirmeleri göndermesine olanak tanır.These handlers use the connection to allow this client to push content updates to all connected clients.

Geliştirme çalışma zamanı profili eklemeAdd a development runtime profile

Bu bölümde, ASP.NET Core için bir geliştirme çalışma zamanı ortamı ekleyeceksiniz.In this section, you'll add a development runtime environment for ASP.NET Core. Daha fazla bilgi için bkz. ASP.NET Core birden çok ortamla çalışma.For more information, see Work with multiple environments in ASP.NET Core.

  1. Projenizde Özellikler adlı bir klasör oluşturun.Create a folder named Properties in your project.

  2. Aşağıdaki içerikle, Launchsettings. JSON adlı yeni bir dosyayı klasöre ekleyin ve dosyayı kaydedin.Add a new file named launchSettings.json to the folder, with the following content, and save the file.

    {
        "profiles" : 
        {
            "ChatRoom": 
            {
                "commandName": "Project",
                "launchBrowser": true,
                "environmentVariables": 
                {
                    "ASPNETCORE_ENVIRONMENT": "Development"
                },
                "applicationUrl": "http://localhost:5000/"
            }
        }
    }
    

Uygulamayı yerel olarak derleyin ve çalıştırınBuild and run the app locally

  1. .NET Core CLI kullanarak uygulamayı derlemek için komut kabuğu 'nda aşağıdaki komutu çalıştırın:To build the app by using the .NET Core CLI, run the following command in the command shell:

     dotnet build
    
  2. Oluşturma başarıyla tamamlandıktan sonra, Web uygulamasını yerel olarak çalıştırmak için aşağıdaki komutu çalıştırın:After the build successfully finishes, run the following command to run the web app locally:

     dotnet run
    

    Uygulama, geliştirme çalışma zamanı profilinizde yapılandırıldığı şekilde 5000 numaralı bağlantı noktasında yerel olarak barındırılır:The app will be hosted locally on port 5000, as configured in our development runtime profile:

     E:\Testing\chattest>dotnet run
     Hosting environment: Development
     Content root path: E:\Testing\chattest
     Now listening on: http://localhost:5000
     Application started. Press Ctrl+C to shut down.    
    
  3. İki tarayıcı penceresi açın.Open two browser windows. Her tarayıcıda http://localhost:5000' a gidin.In each browser, go to http://localhost:5000. Adınızı girmeniz istenir.You're prompted to enter your name. Her iki istemci için bir istemci adı girin ve Gönder düğmesini kullanarak ileti içeriğini her iki istemci arasında iletme sınamasını yapın.Enter a client name for both clients and test pushing message content between both clients by using the Send button.

    Azure SignalR grup sohbeti örneği

Kaynakları temizlemeClean up resources

Sonraki öğreticiye devam ederseniz, bu hızlı başlangıçta oluşturulan kaynakları tutabilir ve yeniden kullanabilirsiniz.If you'll continue to the next tutorial, you can keep the resources created in this quickstart and reuse them.

Hızlı Başlangıç örnek uygulamasıyla işiniz bittiğinde, ücretlerden kaçınmak için bu hızlı başlangıçta oluşturulan Azure kaynaklarını silebilirsiniz.If you're finished with the quickstart sample application, you can delete the Azure resources created in this quickstart to avoid charges.

Önemli

Bir kaynak grubunun silinmesi geri alınamaz ve bu gruptaki tüm kaynakları içerir.Deleting a resource group is irreversible and includes all the resources in that group. Yanlış kaynak grubunu veya kaynakları yanlışlıkla silmediğinizden emin olun.Make sure that you don't accidentally delete the wrong resource group or resources. Bu örneği tutmak istediğiniz kaynakları içeren mevcut bir kaynak grubunda barındırmak için kaynaklar oluşturduysanız, kaynak grubunu silmek yerine her kaynağı dikey penceresinden ayrı ayrı silebilirsiniz.If you created the resources for hosting this sample in an existing resource group that contains resources you want to keep, you can delete each resource individually from its blade instead of deleting the resource group.

Azure portalda oturum açın ve Kaynak grupları’nı seçin.Sign in to the Azure portal and select Resource groups.

Ada göre filtrele metin kutusuna kaynak grubunuzun adını yazın.In the Filter by name text box, type the name of your resource group. Bu hızlı başlangıçtaki yönergelerde SignalRTestResources adlı bir kaynak grubu kullanılmıştır.The instructions for this quickstart used a resource group named SignalRTestResources. Sonuç listesindeki kaynak grubunuzda, kaynak grubunu silmek> üç nokta ( ... ) simgesini seçin.On your resource group in the result list, select the ellipsis (...) > Delete resource group.

Kaynak grubunu silmeye yönelik seçimler

Kaynak grubunun silinmesini onaylamanız istenir.You're asked to confirm the deletion of the resource group. Onaylamak için kaynak grubunuzun adını girin ve Sil' i seçin.Enter the name of your resource group to confirm, and select Delete.

Birkaç dakika sonra kaynak grubu ve bu gruptaki kaynakların tümü silinir.After a few moments, the resource group and all of its resources are deleted.

Sonraki adımlarNext steps

Bu hızlı başlangıçta yeni bir Azure SignalR hizmeti kaynağı oluşturdunuz.In this quickstart, you created a new Azure SignalR Service resource. Daha sonra, içerik güncelleştirmelerini gerçek zamanlı olarak birden çok bağlı istemciye göndermek için bir ASP.NET Core Web uygulamasıyla kullandınız.You then used it with an ASP.NET Core web app to push content updates in real time to multiple connected clients. Azure SignalR hizmetini kullanma hakkında daha fazla bilgi edinmek için, kimlik doğrulamasını gösteren öğreticiye geçin.To learn more about using Azure SignalR Service, continue to the tutorial that demonstrates authentication.