Hızlı Başlangıç: SignalR Hizmeti kullanarak sohbet odası oluşturma

Azure SignalR Hizmeti, geliştiricilerin gerçek zamanlı özelliklerle web uygulamalarını kolayca derlemesine yardımcı olan bir Azure hizmetidir.

Bu makalede Azure SignalR Hizmeti ile çalışmaya başlama işlemi gösterilmektedir. Bu hızlı başlangıçta, ASP.NET Core web uygulamasını kullanarak bir sohbet uygulaması oluşturacaksınız. Bu uygulama, gerçek zamanlı içerik güncelleştirmelerini etkinleştirmek üzere Azure SignalR Hizmeti kaynağınızla bağlantı kuracaktır. Web uygulamasını yerel olarak barındıracak ve birden çok tarayıcı istemcisiyle bağlanacaksınız. Her istemci, diğer tüm istemcilere içerik güncelleştirmeleri gönderebilecektir.

Bu hızlı başlangıçtaki adımları tamamlamak için herhangi bir kod düzenleyicisini kullanabilirsiniz. Seçeneklerden biri, Windows, macOS ve Linux platformlarında kullanılabilen Visual Studio Code'dur.

Bu öğreticinin kodu AzureSignalR-samples GitHub deposundan indirilebilir. Bu hızlı başlangıçta kullanılan Azure kaynaklarını oluşturmak için SignalR Hizmeti betiği oluşturma adımlarını izleyebilirsiniz.

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

Başlamaya hazır mısınız?

Ön koşullar

• En son .NET Core SDK'sını yükleyin.
• AzureSignalR örneği GitHub deposunu indirin veya kopyalayın.

Sorun mu yaşıyorsunuz? Sorun giderme kılavuzunu deneyin veya bize bildirin.

Azure SignalR kaynağı oluşturma

Bu bölümde, uygulamanız için kullanılacak temel bir Azure SignalR örneği oluşturacaksınız. Aşağıdaki adımlarda yeni bir örnek oluşturmak için Azure portalı kullanılır, ancak Azure CLI'yı da kullanabilirsiniz. Daha fazla bilgi için Azure SignalR Hizmeti CLI Başvurusu'ndaki az signalr create komutuna bakın.

1. Azure Portal oturum açın.
2. Sayfanın sol üst kısmında + Kaynak oluştur'u seçin.
3. Kaynak oluştur sayfasında, Arama hizmeti s ve market metin kutusuna signalr yazın ve listeden SignalR Hizmeti seçin.
4. SignalR Hizmeti sayfasında Oluştur'u seçin.
5. Temel Bilgiler sekmesinde, yeni SignalR Hizmeti örneğinin temel bilgilerini girersiniz. Aşağıdaki değerleri girin:

SignalR öğreticileri için Ağ ve Etiketler sekmelerindeki ayarları değiştirmeniz gerekmez.

6. Temel Bilgiler sekmesinin en altındaki Gözden Geçir + oluştur düğmesini seçin.
7. Gözden geçir ve oluştur sekmesinde değerleri gözden geçirin ve Oluştur'u seçin. Dağıtımın tamamlanması birkaç dakika sürer.
8. Dağıtım tamamlandığında Kaynağa git düğmesini seçin.
9. SignalR kaynağı sayfasında, soldaki menüden Ayarlar altında Anahtarlar'ı seçin.
10. Birincil anahtar için Bağlan ion dizesini kopyalayın. Bu öğreticinin ilerleyen bölümlerinde uygulamanızı yapılandırmak için bu bağlantı dizesi gerekir.

ASP.NET Core web uygulaması oluşturma

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. .NET Core CLI'yı Visual Studio yerine kullanmanın avantajı, Windows, macOS ve Linux platformları arasında kullanılabilir olmasıdır.

1. Projeniz için bir klasör oluşturun. Bu hızlı başlangıçta chattest klasörü kullanılır.

2. Yeni klasörde aşağıdaki komutu çalıştırarak projeyi oluşturun:

   dotnet new web
   

Projeye Gizli Dizi Yöneticisi ekleme

Bu bölümde, gizli dizi yöneticisi aracını projenize ekleyeceksiniz. Gizli Dizi Yöneticisi aracı, geliştirme çalışmaları için hassas verileri proje ağacınızın dışında depolar. Bu yaklaşım, uygulama gizli dizilerinin kaynak kodda yanlışlıkla paylaşılmasını önlemeye yardımcı olur.

1. klasöründe, UserSecretsId aşağıdaki komutu çalıştırarak başlatın:

   dotnet user-secrets init
   

2. Gizli Dizi Yöneticisi’ne Azure:SignalR:ConnectionString adlı bir gizli dizi ekleyin.

   Bu gizli dizi, SignalR Hizmetinizin kaynağına erişmeye yarayan bağlantı dizesini içerir. Azure:SignalR:Bağlan ionString, SignalR'nin bağlantı kurmak için arayabilecekleri varsayılan yapılandırma anahtarıdır. Aşağıdaki komuttaki değeri SignalR Hizmeti kaynağınızın bağlantı dizesi değiştirin.

   Bu komutu dosyayla aynı dizinde csproj çalıştırmanız gerekir.

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

   Gizli Dizi Yöneticisi yalnızca web uygulaması yerel olarak barındırılırken test için kullanılır. Sonraki bir öğreticide sohbet web uygulamasını Azure'a dağıtacaksınız. Web uygulaması Azure'a dağıtıldıktan sonra, bağlantı dizesi Gizli Dizi Yöneticisi ile depolamak yerine bir uygulama ayarı kullanacaksınız.

   Bu gizli diziye Yapılandırma API'siyle erişilir. İki nokta üst üste (:) tüm desteklenen platformlarda Yapılandırma API'siyle yapılandırma adında çalışır. Bkz . Ortama göre yapılandırma.

Web uygulamasına Azure SignalR ekleme

1. Aşağıdaki komutu çalıştırarak NuGet paketine başvuru Microsoft.Azure.SignalR ekleyin:

   dotnet add package Microsoft.Azure.SignalR
   

2. Program.cs dosyasını açın ve kodu aşağıdaki şekilde güncelleştirin; Azure SignalR Hizmeti kullanmak için ve AddAzureSignalR() yöntemlerini çağırırAddSignalR():

   var builder = WebApplication.CreateBuilder(args);
   builder.Services.AddSignalR().AddAzureSignalR();
   var app = builder.Build();
   
   app.UseDefaultFiles();
   app.UseRouting();
   app.UseStaticFiles();
   app.MapHub<ChatSampleHub>("/chat");
   app.Run();
   

   parametresinin AddAzureSignalR() geçirilmemesi, SignalR Hizmeti kaynak bağlantı dizesi için varsayılan yapılandırma anahtarını kullandığı anlamına gelir. Varsayılan yapılandırma anahtarı Azure:SignalR:Bağlan ionString'dir. Ayrıca, aşağıdaki bölümde oluşturacağımız da kullanılır ChatSampleHub .

Hub sınıfı ekleme

SignalR'de merkez, istemci tarafından çağrılabilen bir dizi yöntemi kullanıma sunan temel bir bileşendir. Bu bölümde, iki yöntemle bir hub sınıf tanımlayacaksınız:

• BroadcastMessage: Bu yöntem bir iletiyi tüm istemcilere yayınlar.
• Echo: Bu yöntem bir iletiyi çağırana geri gönderir.

Her iki yöntem de ASP.NET Core SignalR SDK'sının sağladığı arabirimi kullanır Clients . Bu arabirim, tüm bağlı istemcilere erişmenizi sağlar, böylece istemcilerinize içerik gönderebilirsiniz.

1. Proje dizininizde Hub adlı yeni bir klasör ekleyin. Yeni klasöre ChatSampleHub.cs adlı yeni bir hub kodu dosyası ekleyin.

2. Hub sınıfınızı tanımlamak ve dosyayı kaydetmek için ChatSampleHub.cs dosyasına aşağıdaki kodu ekleyin.

   using Microsoft.AspNetCore.SignalR;
   
   public class ChatSampleHub : Hub
   {
       public Task BroadcastMessage(string name, string message) =>
           Clients.All.SendAsync("broadcastMessage", name, message);
   
       public Task Echo(string name, string message) =>
           Clients.Client(Context.ConnectionId)
                   .SendAsync("echo", name, $"{message} (echo from server)");
   }
   

Web uygulaması için istemci arabirimini ekleme

Bu sohbet odası uygulamasının istemci kullanıcı arabirimi, wwwroot dizininde index.html adlı bir dosyada HTML ve JavaScript'den oluşur.

Css/site.css dosyasını örnek deposunun wwwroot klasöründen kopyalayın. Projenizin css/site.css dosyasını kopyaladığınız projeyle değiştirin.

wwwroot dizininde index.html adlı yeni bir dosya oluşturun, aşağıdaki HTML'yi kopyalayıp yeni oluşturulan dosyaya yapıştırın.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="css/site.css" rel="stylesheet" />
  <title>Azure SignalR Group Chat</title>
</head>
<body>
  <h2 class="text-center" style="margin-top: 0; padding-top: 30px; padding-bottom: 30px;">Azure SignalR Group Chat</h2>
  <div class="container" style="height: calc(100% - 110px);">
    <div id="messages" style="background-color: whitesmoke; "></div>
    <div style="width: 100%; border-left-style: ridge; border-right-style: ridge;">
      <textarea id="message" style="width: 100%; padding: 5px 10px; border-style: hidden;"
        placeholder="Type message and press Enter to send..."></textarea>
    </div>
    <div style="overflow: auto; border-style: ridge; border-top-style: hidden;">
      <button class="btn-warning pull-right" id="echo">Echo</button>
      <button class="btn-success pull-right" id="sendmessage">Send</button>
    </div>
  </div>
  <div class="modal alert alert-danger fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <div>Connection Error...</div>
          <div><strong style="font-size: 1.5em;">Hit Refresh/F5</strong> to rejoin. ;)</div>
        </div>
      </div>
    </div>
  </div>

  <!--Reference the SignalR library. -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js"></script>

  <!--Add script to update the page and send messages.-->
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
      function getUserName() {
        function generateRandomName() {
          return Math.random().toString(36).substring(2, 10);
        }

        // Get the user name and store it to prepend to messages.
        var username = generateRandomName();
        var promptMessage = "Enter your name:";
        do {
          username = prompt(promptMessage, username);
          if (!username || username.startsWith("_") || username.indexOf("<") > -1 || username.indexOf(">") > -1) {
            username = "";
            promptMessage = "Invalid input. Enter your name:";
          }
        } while (!username)
        return username;
      }

      username = getUserName();
      // Set initial focus to message input box.
      var messageInput = document.getElementById("message");
      messageInput.focus();

      function createMessageEntry(encodedName, encodedMsg) {
        var entry = document.createElement("div");
        entry.classList.add("message-entry");
        if (encodedName === "_SYSTEM_") {
          entry.innerHTML = encodedMsg;
          entry.classList.add("text-center");
          entry.classList.add("system-message");
        } else if (encodedName === "_BROADCAST_") {
          entry.classList.add("text-center");
          entry.innerHTML = `<div class="text-center broadcast-message">${encodedMsg}</div>`;
        } else if (encodedName === username) {
          entry.innerHTML = `<div class="message-avatar pull-right">${encodedName}</div>` +
            `<div class="message-content pull-right">${encodedMsg}<div>`;
        } else {
          entry.innerHTML = `<div class="message-avatar pull-left">${encodedName}</div>` +
            `<div class="message-content pull-left">${encodedMsg}<div>`;
        }
        return entry;
      }

      function appendMessage(encodedName, encodedMsg) {
        var messageEntry = createMessageEntry(encodedName, encodedMsg);
        var messageBox = document.getElementById("messages");
        messageBox.appendChild(messageEntry);
        messageBox.scrollTop = messageBox.scrollHeight;
      }

      function bindConnectionMessage(connection) {
        var messageCallback = function (name, message) {
          if (!message) return;
          // Html encode display name and message.
          var encodedName = name;
          var encodedMsg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
          appendMessage(encodedName, encodedMsg);
        };
        // Create a function that the hub can call to broadcast messages.
        connection.on("broadcastMessage", messageCallback);
        connection.on("echo", messageCallback);
        connection.onclose(onConnectionError);
      }

      function onConnected(connection) {
        console.log("connection started");
        connection.send("broadcastMessage", "_SYSTEM_", username + " JOINED");
        document.getElementById("sendmessage").addEventListener("click", function (event) {
          // Call the broadcastMessage method on the hub.
          if (messageInput.value) {
            connection.send("broadcastMessage", username, messageInput.value)
              .catch((e) => appendMessage("_BROADCAST_", e.message));
          }

          // Clear text box and reset focus for next comment.
          messageInput.value = "";
          messageInput.focus();
          event.preventDefault();
        });
        document.getElementById("message").addEventListener("keypress", function (event) {
          if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("sendmessage").click();
            return false;
          }
        });
        document.getElementById("echo").addEventListener("click", function (event) {
          // Call the echo method on the hub.
          connection.send("echo", username, messageInput.value);

          // Clear text box and reset focus for next comment.
          messageInput.value = "";
          messageInput.focus();
          event.preventDefault();
        });
      }

      function onConnectionError(error) {
        if (error && error.message) {
          console.error(error.message);
        }
        var modal = document.getElementById("myModal");
        modal.classList.add("in");
        modal.style = "display: block;";
      }

      var connection = new signalR.HubConnectionBuilder()
        .withUrl("/chat")
        .build();
      bindConnectionMessage(connection);
      connection.start()
        .then(function () {
          onConnected(connection);
        })
        .catch(function (error) {
          console.error(error.message);
        });
    });
  </script>
</body>
</html>

Index.html dosyasındaki kod, Azure SignalR kaynağına HTTP bağlantısı oluşturmak için çağrı yaparHubConnectionBuilder.build().

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.

HubConnection.start(), hub ile iletişim başlatır. Ardından düğme onConnected() olay işleyicilerini ekler. Bu işleyiciler, bağlantıyı kullanarak bu istemcinin tüm bağlı istemcilere içerik güncelleştirmeleri göndermesine olanak tanır.

Uygulamayı yerel olarak derleme ve çalıştırma

1. Web uygulamasını yerel olarak çalıştırmak için aşağıdaki komutu çalıştırın:

   dotnet run
   

   Uygulama, localhost URL'sini içeren çıkışla yerel olarak barındırılır, örneğin, aşağıdaki gibi:

   Building...
   info: Microsoft.Hosting.Lifetime[14]
         Now listening on: http://localhost:5000
   info: Microsoft.Hosting.Lifetime[0]
         Application started. Press Ctrl+C to shut down.
   info: Microsoft.Hosting.Lifetime[0]
         Hosting environment: Development
   

2. İki tarayıcı penceresi açın. Her tarayıcıda, yukarıdaki çıkış penceresinde gösterildiği gibi çıkış http://localhost:5000/ penceresinde gösterilen localhost URL'sine gidin. Adınızı girmeniz istenir. Her iki istemci için de bir istemci adı girin ve Gönder düğmesini kullanarak her iki istemci arasında ileti göndermeyi test edin.

   

Kaynakları temizleme

Sonraki öğreticiye devam ederseniz, bu hızlı başlangıçta oluşturulan kaynakları tutabilir ve yeniden kullanabilirsiniz.

Hızlı başlangıç örnek uygulamasıyla işiniz bittiyse ücret ödememek için bu hızlı başlangıçta oluşturulan Azure kaynaklarını silebilirsiniz.

Azure portalında oturum açın ve Kaynak grupları’nı seçin.

Ada göre filtrele metin kutusuna kaynak grubunuzun adını yazın. Bu hızlı başlangıçtaki yönergelerde SignalRTestResources adlı bir kaynak grubu kullanılmıştır. Sonuç listesindeki kaynak grubunuzda üç noktayı (...) > seçinKaynak grubunu silin.

Kaynak grubunun silinmesini onaylamanız istenir. Onaylamak için kaynak grubunuzun adını girin ve Sil'i seçin.

Birkaç dakika sonra kaynak grubu ve bu gruptaki kaynakların tümü silinir.

Sorun mu yaşıyorsunuz? Sorun giderme kılavuzunu deneyin veya bize bildirin.

Sonraki adımlar

Bu hızlı başlangıçta yeni bir Azure SignalR Hizmeti kaynağı oluşturdunuz. Ardından bunu bir ASP.NET Core web uygulamasıyla kullanarak içerik güncelleştirmelerini birden çok bağlı istemciye gerçek zamanlı olarak gönderebilirsiniz. Azure SignalR Hizmeti kullanma hakkında daha fazla bilgi edinmek için kimlik doğrulamasını gösteren öğreticiye geçin.