Öğretici: ASP.NET Core kullanmaya başlayınSignalR

Bu öğreticide, kullanarak gerçek zamanlı bir uygulama oluşturmanın temelleri öğretilir SignalR . Aşağıdakileri nasıl yapacağınızı öğrenirsiniz:

Sonunda, çalışan bir sohbet uygulamanız olacaktır:

Önkoşullar

Web uygulaması projesi oluşturma

dotnet new webapp -o SignalRChat
cd SignalRChat
code -r .

SignalRİstemci kitaplığını ekleme

SignalRsunucu kitaplığı ASP.NET Core 3,1 paylaşılan çerçevesine dahildir. JavaScript istemci kitaplığı projeye otomatik olarak dahil değildir. Bu öğreticide, istemci kitaplığını unpkg'den almak Için kitaplık Yöneticisi 'Ni (Libman) kullanacaksınız. unpkg, Node.js paket yöneticisi npm 'de bulunan her şeyi teslim edebilen bir içerik teslim ağı (CDN).

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.min.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.min.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.min.js

wwwroot/js/signalr/dist/browser/signalr.js written to disk
wwwroot/js/signalr/dist/browser/signalr.min.js written to disk
Installed library "@microsoft/signalr@latest" to "wwwroot/js/signalr"

Merkez oluşturma SignalR

Hub , istemci-sunucu iletişimini işleyen yüksek düzeyli bir işlem hattı görevi gören bir sınıftır.

• SignalRSohbet projesi klasöründe bir hub klasörü oluşturun.
• Hub 'lar klasöründe, aşağıdaki kodla bir ChatHub. cs dosyası oluşturun:

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

ChatHubSınıf sınıfından devralır SignalR Hub . HubSınıfı bağlantıları, grupları ve mesajlaşmayı yönetir.

SendMessageYöntemi, tüm istemcilere ileti göndermek için bağlı bir istemci tarafından çağrılabilir. Yöntemi çağıran JavaScript istemci kodu Öğreticinin ilerleyen kısımlarında gösterilmektedir. SignalR maksimum ölçeklenebilirlik sağlamak için kod zaman uyumsuzdur.

Yapılandırma SignalR

SignalRSunucunun istekleri geçirilecek şekilde yapılandırılması gerekir SignalR SignalR .

• Aşağıdaki Vurgulanan kodu Startup. cs dosyasına ekleyin.

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  using Microsoft.AspNetCore.Builder;
  using Microsoft.AspNetCore.Hosting;
  using Microsoft.AspNetCore.HttpsPolicy;
  using Microsoft.Extensions.Configuration;
  using Microsoft.Extensions.DependencyInjection;
  using Microsoft.Extensions.Hosting;
  using SignalRChat.Hubs;
  
  namespace SignalRChat
  {
      public class Startup
      {
          public Startup(IConfiguration configuration)
          {
              Configuration = configuration;
          }
  
          public IConfiguration Configuration { get; }
  
          // This method gets called by the runtime. Use this method to add services to the container.
          public void ConfigureServices(IServiceCollection services)
          {
              services.AddRazorPages();
              services.AddSignalR();
          }
  
          // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
          public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
          {
              if (env.IsDevelopment())
              {
                  app.UseDeveloperExceptionPage();
              }
              else
              {
                  app.UseExceptionHandler("/Error");
                  // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                  app.UseHsts();
              }
  
              app.UseHttpsRedirection();
              app.UseStaticFiles();
  
              app.UseRouting();
  
              app.UseAuthorization();
  
              app.UseEndpoints(endpoints =>
              {
                  endpoints.MapRazorPages();
                  endpoints.MapHub<ChatHub>("/chatHub");
              });
          }
      }
  }
  

  bu değişiklikler SignalR ASP.NET Core bağımlılığı ekleme ve yönlendirme sistemlerine ekler.

SignalRİstemci kodu ekle

• Pages\ındex.cshtml içindeki içeriği şu kodla değiştirin:

  @page
      <div class="container">
          <div class="row">&nbsp;</div>
          <div class="row">
              <div class="col-2">User</div>
              <div class="col-4"><input type="text" id="userInput" /></div>
          </div>
          <div class="row">
              <div class="col-2">Message</div>
              <div class="col-4"><input type="text" id="messageInput" /></div>
          </div>
          <div class="row">&nbsp;</div>
          <div class="row">
              <div class="col-6">
                  <input type="button" id="sendButton" value="Send Message" />
              </div>
          </div>
      </div>
      <div class="row">
          <div class="col-12">
              <hr />
          </div>
      </div>
      <div class="row">
          <div class="col-6">
              <ul id="messagesList"></ul>
          </div>
      </div>
  <script src="~/js/signalr/dist/browser/signalr.js"></script>
  <script src="~/js/chat.js"></script>
  

  Yukarıdaki kod:

  • Ad ve ileti metni ve Gönder düğmesi için metin kutuları oluşturur.
  • id="messagesList"Hub 'dan alınan iletileri görüntülemek için içeren bir liste oluşturur SignalR .
  • , SignalR Bir sonraki adımda oluşturduğunuz chat.js uygulama koduna ve betik başvurularını içerir.

• Wwwroot/js klasöründe, aşağıdaki kodla bir chat.js dosyası oluşturun:

  "use strict";
  
  var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
  
  //Disable send button until connection is established
  document.getElementById("sendButton").disabled = true;
  
  connection.on("ReceiveMessage", function (user, message) {
      var li = document.createElement("li");
      document.getElementById("messagesList").appendChild(li);
      // We can assign user-supplied strings to an element's textContent because it
      // is not interpreted as markup. If you're assigning in any other way, you 
      // should be aware of possible script injection concerns.
      li.textContent = `${user} says ${message}`;
  });
  
  connection.start().then(function () {
      document.getElementById("sendButton").disabled = false;
  }).catch(function (err) {
      return console.error(err.toString());
  });
  
  document.getElementById("sendButton").addEventListener("click", function (event) {
      var user = document.getElementById("userInput").value;
      var message = document.getElementById("messageInput").value;
      connection.invoke("SendMessage", user, message).catch(function (err) {
          return console.error(err.toString());
      });
      event.preventDefault();
  });
  

  Yukarıdaki kod:

  • Bir bağlantı oluşturur ve başlatır.
  • , Hub 'a ileti gönderen bir işleyiciye Gönder düğmesine ekler.
  • , Hub 'dan iletileri alan ve bunları listeye ekleyen bir işleyici olan bağlantı nesnesine ekler.

Uygulamayı çalıştırma

• Adres çubuğundan URL 'yi kopyalayın, başka bir tarayıcı örneği veya sekme açın ve adres çubuğuna URL 'YI yapıştırın.
• Tarayıcı ' yı seçin, bir ad ve ileti girin ve Ileti gönder düğmesini seçin. Ad ve ileti anında her iki sayfada da görüntülenir.

Bu öğretici, kullanarak gerçek zamanlı uygulamanın temellerini SignalR öğretir. Aşağıdakileri nasıl yapacağınızı öğrenirsiniz:

Önkoşullar

Web projesi oluşturma

İstemci SignalR kitaplığını ekleme

Sunucu SignalR kitaplığı Microsoft.AspNetCore.App meta pakete dahil edilir. JavaScript istemci kitaplığı projeye otomatik olarak dahil değildir. Bu öğreticide, unpkg'den istemci kitaplığını almak için Kitaplık Yöneticisi'ni (LibMan) kullanırsanız. unpkg, npm'de bulunan her şeyi teslim CDN bir içerik teslim ağıdır (Node.js).

Hub SignalR oluşturma

Hub, istemci-sunucu iletişimini üst düzey işlem hattı olarak görev alan bir sınıftır.

• Sohbet SignalR projesi klasöründe bir Hubs klasörü oluşturun.

• Hubs klasöründe aşağıdaki kodla bir ChatHub.cs dosyası oluşturun:

  using Microsoft.AspNetCore.SignalR;
  using System.Threading.Tasks;
  
  namespace SignalRChat.Hubs
  {
      public class ChatHub : Hub
      {
          public async Task SendMessage(string user, string message)
          {
              await Clients.All.SendAsync("ReceiveMessage", user, message);
          }
      }
  }
  

  sınıfı ChatHub sınıfından SignalR Hub devralınır. sınıfı Hub bağlantıları, grupları ve mesajlaşmayı yönetir.

  yöntemi, SendMessage bağlı bir istemci tarafından tüm istemcilere ileti göndermek için çağrılabilirsiniz. yöntemini çağıran JavaScript istemci kodu öğreticinin devamlarında gösterilir. SignalR kod, maksimum ölçeklenebilirlik sağlamak için zaman uyumsuzdur.

Yapılandırmak SignalR

Sunucunun SignalR istekleri 'ye geçecek SignalR şekilde yapılandırılması SignalR gerekir.

• Startup.cs dosyasına aşağıdaki vurgulanmış kodu ekleyin.

  using Microsoft.AspNetCore.Builder;
  using Microsoft.AspNetCore.Hosting;
  using Microsoft.AspNetCore.Http;
  using Microsoft.AspNetCore.Mvc;
  using Microsoft.Extensions.Configuration;
  using Microsoft.Extensions.DependencyInjection;
  using SignalRChat.Hubs;
  
  namespace SignalRChat
  {
      public class Startup
      {
          public Startup(IConfiguration configuration)
          {
              Configuration = configuration;
          }
  
          public IConfiguration Configuration { get; }
  
          // This method gets called by the runtime. Use this method to add services to the container.
          public void ConfigureServices(IServiceCollection services)
          {
              services.Configure<CookiePolicyOptions>(options =>
              {
                  // This lambda determines whether user consent for non-essential cookies is needed for a given request.
                  options.CheckConsentNeeded = context => true;
                  options.MinimumSameSitePolicy = SameSiteMode.None;
              });
  
  
              services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
  
              services.AddSignalR();
          }
  
          // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
          public void Configure(IApplicationBuilder app, IHostingEnvironment env)
          {
              if (env.IsDevelopment())
              {
                  app.UseDeveloperExceptionPage();
              }
              else
              {
                  app.UseExceptionHandler("/Error");
                  app.UseHsts();
              }
  
              app.UseHttpsRedirection();
              app.UseStaticFiles();
              app.UseCookiePolicy();
              app.UseSignalR(routes =>
              {
                  routes.MapHub<ChatHub>("/chathub");
              });
              app.UseMvc();
          }
      }
  }
  

  Bu SignalR değişiklikler, ASP.NET Core ekleme sistemi ve ara yazılım işlem hattına ek olarak kullanılır.

İstemci SignalR kodu ekleme

• Pages\Index.cshtml içeriğini aşağıdaki kodla değiştirin:

  @page
  <div class="container">
      <div class="row">&nbsp;</div>
      <div class="row">
          <div class="col-6">&nbsp;</div>
          <div class="col-6">
              User..........<input type="text" id="userInput" />
              <br />
              Message...<input type="text" id="messageInput" />
              <input type="button" id="sendButton" value="Send Message" />
          </div>
      </div>
      <div class="row">
          <div class="col-12">
              <hr />
          </div>
      </div>
      <div class="row">
          <div class="col-6">&nbsp;</div>
          <div class="col-6">
              <ul id="messagesList"></ul>
          </div>
      </div>
  </div>
  <script src="~/lib/signalr/dist/browser/signalr.js"></script>
  <script src="~/js/chat.js"></script>
  

  Yukarıdaki kod:

  • Ad ve ileti metni için metin kutuları ve gönder düğmesi oluşturur.
  • Hub'dan id="messagesList" alınan iletileri görüntülemek için ile bir liste SignalR oluşturur.
  • ve için betik SignalR başvurularınıchat.js sonraki adımda oluştur kodunu içerir.

• wwwroot/js klasöründe aşağıdaki kodla chat.js bir dosya oluşturun:

  "use strict";
  
  var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
  
  //Disable send button until connection is established
  document.getElementById("sendButton").disabled = true;
  
  connection.on("ReceiveMessage", function (user, message) {
      var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
      var encodedMsg = user + " says " + msg;
      var li = document.createElement("li");
      li.textContent = encodedMsg;
      document.getElementById("messagesList").appendChild(li);
  });
  
  connection.start().then(function(){
      document.getElementById("sendButton").disabled = false;
  }).catch(function (err) {
      return console.error(err.toString());
  });
  
  document.getElementById("sendButton").addEventListener("click", function (event) {
      var user = document.getElementById("userInput").value;
      var message = document.getElementById("messageInput").value;
      connection.invoke("SendMessage", user, message).catch(function (err) {
          return console.error(err.toString());
      });
      event.preventDefault();
  });
  

  Yukarıdaki kod:

  • Bir bağlantı oluşturur ve başlatır.
  • Gönder düğmesine hub'a ileti gönderen bir işleyici ekler.
  • Bağlantı nesnesine hub'dan ileti alan ve bunları listeye ekleyen bir işleyici ekler.

Uygulamayı çalıştırma

• Adres çubuğundan URL'yi kopyalayın, başka bir tarayıcı örneği veya sekmesi açın ve URL'yi adres çubuğuna yapıştırın.

• Tarayıcıdan birini seçin, bir ad ve ileti girin ve İleti Gönder düğmesini seçin.

  Ad ve ileti her iki sayfada da anında görüntülenir.

  

Ek kaynaklar

• Bu öğreticininTube sürümü