ile ASP.NET Core kullanma SignalRBlazor

  • Makale
  • Okumak için 19 dakika

Bu öğretici ile kullanarak gerçek zamanlı bir uygulama oluşturma hakkında temel bilgileri öğretir SignalR Blazor . Aşağıdakileri nasıl yapacağınızı öğrenirsiniz:

  • Proje oluşturma Blazor
  • SignalRİstemci kitaplığını ekleme
  • Hub ekleme SignalR
  • SignalRHub için hizmetler ve uç nokta ekleme SignalR
  • RazorSohbet için bileşen kodu ekle

Bu öğreticinin sonunda, çalışan bir sohbet uygulamanız olacaktır.

Örnek kodu görüntüleme veya indirme (nasıl indirileceği)

Önkoşullar

Barındırılan uygulama oluşturma Blazor WebAssembly

Araç seçiminiz için yönergeleri izleyin:

Not

Visual Studio 2022 veya üzeri ve .NET Core SDK 6.0.0 veya üzeri gereklidir.

  1. Yeni bir proje oluşturma.

  2. Blazor WebAssembly Uygulama şablonunu seçin. İleri’yi seçin.

  3. BlazorWebAssemblySignalRApp Project adı alanına yazın. Konum girişinin doğru olduğunu onaylayın veya proje için bir konum belirtin. İleri’yi seçin.

  4. ek bilgi iletişim kutusunda ASP.NET Core barındırılan onay kutusunu seçin.

  5. Oluştur’u seçin.

SignalRİstemci kitaplığını ekleme

  1. Çözüm Gezgini, projeye sağ tıklayın BlazorWebAssemblySignalRApp.Client ve NuGet paketlerini yönet' i seçin.

  2. NuGet paketlerini yönet iletişim kutusunda, paket kaynağının olarak ayarlandığını doğrulayın nuget.org .

  3. Araştır seçiliyken, Microsoft.AspNetCore.SignalR.Client Arama kutusuna yazın.

  4. Arama sonuçlarında Microsoft.AspNetCore.SignalR.Client paketi seçin. Sürümü, uygulamanın paylaşılan çerçevesiyle eşleşecek şekilde ayarlayın. Yükle'yi seçin.

  5. Değişiklikleri Önizle iletişim kutusu görüntülenirse Tamam' ı seçin.

  6. Lisans kabulü iletişim kutusu görüntülenirse, lisans şartlarını kabul ediyorsanız kabul ediyorum ' u seçin.

Hub ekleme SignalR

BlazorWebAssemblySignalRApp.ServerProjesinde, bir Hubs (plural) klasörü oluşturun ve aşağıdaki ChatHub sınıfı ( Hubs/ChatHub.cs ) ekleyin:

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

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

Hub için hizmetler ve uç nokta ekleme SignalR

  1. BlazorWebAssemblySignalRApp.ServerProjede Program.cs dosyasını açın.

  2. Sınıfın ad alanını ChatHub dosyanın en üstüne ekleyin:

    using BlazorWebAssemblySignalRApp.Server.Hubs;

  3. SignalRSıkıştırma ara yazılım hizmetlerini ekleme ve yanıtlama Program.cs :

    builder.Services.AddSignalR();
builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();
builder.Services.AddResponseCompression(opts =>
{
    opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
        new[] { "application/octet-stream" });
});

  4. Program.cs içinde:

    • İşlem ardışık düzeninin yapılandırmasının en üstünde yanıt sıkıştırma ara yazılımı ' nı kullanın.
    • Denetleyiciler ve istemci tarafı geri dönüş uç noktaları arasında merkez için bir uç nokta ekleyin.
    app.UseResponseCompression();

if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
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.UseBlazorFrameworkFiles();
app.UseStaticFiles();

app.UseRouting();

app.MapRazorPages();
app.MapControllers();
app.MapHub<ChatHub>("/chathub");
app.MapFallbackToFile("index.html");

app.Run();

RazorSohbet için bileşen kodu ekle

  1. BlazorWebAssemblySignalRApp.ClientProjede Pages/Index.razor dosyasını açın.

  2. İşaretlemeyi aşağıdaki kodla değiştirin:

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<PageTitle>Index</PageTitle>

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection? hubConnection;
    private List<string> messages = new List<string>();
    private string? userInput;
    private string? messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    private async Task Send()
    {
        if (hubConnection is not null)
        {
            await hubConnection.SendAsync("SendMessage", userInput, messageInput);
        }
    }

    public bool IsConnected =>
        hubConnection?.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

Uygulamayı çalıştırma

Araç kılavuzunuz için yönergeleri izleyin:

  1. Bu Çözüm Gezgini projesini BlazorWebAssemblySignalRApp.Server seçin. Uygulamayı hata ayıklama ile çalıştırmak için F5'e veya hata ayıklama olmadan çalıştırmak için Ctrl + F5'e basın.

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

  3. Tarayıcıdan birini seçin, bir ad ve ileti girin ve iletiyi göndermek için düğmeyi seçin. Ad ve ileti her iki sayfada da anında görüntülenir:

    SignalR Blazor örnek uygulama, ileti alışverişi yapılan iletileri gösteren iki tarayıcı penceresinde açılır.

    Alıntılar: Star Tipi VI: Keşfedilmemiş Ülke © 1991 Paramount

Uygulama Blazor Server oluşturma

Araç seçiminiz için yönergeleri izleyin:

Not

Visual Studio 2022 veya sonraki bir .NET Core SDK 6.0.0 veya sonrası gerekir.

  1. Yeni bir proje oluşturma.

  2. Uygulama Blazor Server şablonunu seçin. İleri’yi seçin.

  3. Project BlazorServerSignalRApp yazın. Konum girişinin doğru olduğunu onaylayın veya proje için bir konum girin. İleri’yi seçin.

  4. Oluştur’u seçin.

İstemci SignalR kitaplığını ekleme

  1. Bu Çözüm Gezgini, projeye sağ tıklayın ve Paket BlazorServerSignalRApp Yönetimi'NuGet seçin.

  2. Paket Yönetimi NuGet iletişim kutusunda Paket kaynağının olarak ayar olduğunu nuget.org onaylayın.

  3. Gözat seçiliyken Microsoft.AspNetCore.SignalR.Client arama kutusuna yazın.

  4. Arama sonuçlarında paketi Microsoft.AspNetCore.SignalR.Client seçin. Sürümü uygulamanın paylaşılan çerçevesiyle eş olacak şekilde ayarlayın. Yükle'yi seçin.

  5. Değişiklikleri Önizle iletişim kutusu görüntülenirse Tamam'ı seçin.

  6. Lisans Kabulü iletişim kutusu açılırsa, lisans koşullarını kabul ediyorsanız Kabul Ediyorum'a tıklayın.

Hub SignalR ekleme

Bir Hubs (çoğul) klasör oluşturun ve aşağıdaki sınıfı ChatHub ekleyin ( Hubs/ChatHub.cs ):

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

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

Hub için hizmet ve uç nokta SignalR ekleme

  1. Program.cs dosyasını açın.

  2. ve sınıfını Microsoft.AspNetCore.ResponseCompression ChatHub dosyanın en üstüne ad alanları ekleyin:

    using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;

  3. hizmetine Yanıt Sıkıştırma Ara Yazılımı hizmetleri Program.cs ekleyin:

    builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddResponseCompression(opts =>
{
    opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
        new[] { "application/octet-stream" });
});

  4. Program.cs içinde:

    • İşlem hattı yapılandırmasının üst kısmında Yanıt Sıkıştırma Ara Yazılımı'nın kullanın.
    • Hub'ı eşleme uç noktaları ile istemci tarafı geri dönüşleri arasında Blazor hub için bir uç nokta ekleyin.
    app.UseResponseCompression();

if (!app.Environment.IsDevelopment())
{
    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.MapBlazorHub();
app.MapHub<ChatHub>("/chathub");
app.MapFallbackToPage("/_Host");

app.Run();

RazorSohbet için bileşen kodu ekle

  1. Pages/Index.razor dosyasını açın.

  2. İşaretlemeyi aşağıdaki kodla değiştirin:

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<PageTitle>Index</PageTitle>

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection? hubConnection;
    private List<string> messages = new List<string>();
    private string? userInput;
    private string? messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    private async Task Send()
    {
        if (hubConnection is not null)
        {
            await hubConnection.SendAsync("SendMessage", userInput, messageInput);
        }
    }

    public bool IsConnected =>
        hubConnection?.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

Uygulamayı çalıştırma

Araç kılavuzunuz için yönergeleri izleyin:

  1. Uygulamayı hata ayıklama olmadan çalıştırmak için F5 tuşuna basın veya uygulamayı hata ayıklamadan çalıştırmak için CTRL + F5 tuşuna basın.

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

  3. Tarayıcı ' yı seçin, bir ad ve ileti girin ve iletiyi göndermek için düğmeyi seçin. Ad ve ileti her iki sayfada da anında görüntülenir:

    ::: No-Loc (SignalR):::::: No-Loc (Blazor)::: örnek uygulama, değiştirilen iletileri gösteren iki tarayıcı penceresinde açılır.

    Alıntılar: yıldız Trek VI: bulunan ülke © 1991 Paramount

Sonraki adımlar

Bu öğreticide, şunların nasıl yapıldığını öğrendiniz:

  • Proje oluşturma Blazor
  • SignalRİstemci kitaplığını ekleme
  • Hub ekleme SignalR
  • SignalRHub için hizmetler ve uç nokta ekleme SignalR
  • RazorSohbet için bileşen kodu ekle

Uygulama oluşturma hakkında daha fazla bilgi edinmek için Blazor Blazor belgelere bakın:

ASP.NET Core giriş Blazor IdentitySunucu, WebSockets ve Server-Sent olayları ile taşıyıcı belirteci kimlik doğrulaması

Ek kaynaklar

Bu öğretici ile kullanarak gerçek zamanlı bir uygulama oluşturma hakkında temel bilgileri öğretir SignalR Blazor . Aşağıdakileri nasıl yapacağınızı öğrenirsiniz:

  • Proje oluşturma Blazor
  • SignalRİstemci kitaplığını ekleme
  • Hub ekleme SignalR
  • SignalRHub için hizmetler ve uç nokta ekleme SignalR
  • RazorSohbet için bileşen kodu ekle

Bu öğreticinin sonunda, çalışan bir sohbet uygulamanız olacaktır.

Örnek kodu görüntüleme veya indirme (nasıl indirileceği)

Önkoşullar

Barındırılan uygulama oluşturma Blazor WebAssembly

Araç seçiminiz için yönergeleri izleyin:

Not

Visual Studio 16,10 veya üzeri ve .NET Core SDK 5.0.0 veya üzeri gerekiyor.

  1. Yeni bir proje oluşturma.

  2. Blazor WebAssembly Uygulama şablonunu seçin. İleri’yi seçin.

  3. BlazorWebAssemblySignalRApp Project adı alanına yazın. Konum girişinin doğru olduğunu onaylayın veya proje için bir konum belirtin. İleri’yi seçin.

  4. ek bilgi iletişim kutusunda ASP.NET Core barındırılan onay kutusunu seçin.

  5. Oluştur’u seçin.

İstemci SignalR kitaplığını ekleme

  1. Bu Çözüm Gezgini, projeye sağ tıklayın ve Paketleri BlazorWebAssemblySignalRApp.Client Yönet'NuGet seçin.

  2. Paket Paketlerini NuGet iletişim kutusunda Paket kaynağının olarak ayar olduğunu nuget.org onaylayın.

  3. Gözat seçiliyken Microsoft.AspNetCore.SignalR.Client arama kutusuna yazın.

  4. Arama sonuçlarında paketi Microsoft.AspNetCore.SignalR.Client seçin. Sürümü uygulamanın paylaşılan çerçevesiyle eş olacak şekilde ayarlayın. Yükle'yi seçin.

  5. Değişiklikleri Önizle iletişim kutusu görüntülenirse Tamam'ı seçin.

  6. Lisans Kabulü iletişim kutusu açılırsa, lisans koşullarını kabul ediyorsanız Kabul Ediyorum'a tıklayın.

Hub SignalR ekleme

Projede BlazorWebAssemblySignalRApp.Server bir Hubs (çoğul) klasör oluşturun ve aşağıdaki sınıfı ChatHub ekleyin ( Hubs/ChatHub.cs ):

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

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

Hub için hizmet ve uç nokta SignalR ekleme

  1. Projesinde BlazorWebAssemblySignalRApp.Server dosyasını Startup.cs açın.

  2. sınıfının ad alanını ChatHub dosyanın en üstüne ekleyin:

    using BlazorWebAssemblySignalRApp.Server.Hubs;

  3. hizmetine SignalR Sıkıştırma Ara Yazılımı hizmetleri ekleme ve Startup.ConfigureServices yanıtlama:

    public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
    services.AddControllersWithViews();
    services.AddRazorPages();
    services.AddResponseCompression(opts =>
    {
        opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
            new[] { "application/octet-stream" });
    });
}

  4. Startup.Configure içinde:

    • İşlem hattı yapılandırmasının üst kısmında Yanıt Sıkıştırma Ara Yazılımı'nın kullanın.
    • Denetleyiciler ve istemci tarafı geri dönüş uç noktaları arasında hub için bir uç nokta ekleyin.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseResponseCompression();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseWebAssemblyDebugging();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseBlazorFrameworkFiles();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
        endpoints.MapControllers();
        endpoints.MapHub<ChatHub>("/chathub");
        endpoints.MapFallbackToFile("index.html");
    });
}

Sohbet Razor için bileşen kodu ekleme

  1. Projesinde BlazorWebAssemblySignalRApp.Client dosyasını Pages/Index.razor açın.

  2. işaretlemesini aşağıdaki kodla değiştirin:

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection hubConnection;
    private List<string> messages = new List<string>();
    private string userInput;
    private string messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    async Task Send() =>
        await hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

Uygulamayı çalıştırma

Aracınız için yönergeleri izleyin:

  1. Bu Çözüm Gezgini projesini BlazorWebAssemblySignalRApp.Server seçin. Uygulamayı hata ayıklama ile çalıştırmak için F5'e veya hata ayıklama olmadan çalıştırmak için Ctrl + F5'e basın.

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

  3. Tarayıcıdan birini seçin, bir ad ve ileti girin ve iletiyi göndermek için düğmeyi seçin. Ad ve ileti her iki sayfada da anında görüntülenir:

    SignalR Blazor örnek uygulama, ileti alışverişi yapılan iletileri gösteren iki tarayıcı penceresinde açılır.

    Alıntılar: Star Tipi VI: Keşfedilmemiş Ülke © 1991 Paramount

Uygulama Blazor Server oluşturma

Araç seçiminiz için yönergeleri izleyin:

Not

Visual Studio 16.10 veya sonraki bir .NET Core SDK 5.0.0 veya sonrası gerekir.

  1. Yeni bir proje oluşturma.

  2. Uygulama Blazor Server şablonunu seçin. İleri’yi seçin.

  3. Project BlazorServerSignalRApp yazın. Konum girişinin doğru olduğunu onaylayın veya proje için bir konum girin. İleri’yi seçin.

  4. Oluştur’u seçin.

SignalRİstemci kitaplığını ekleme

  1. Çözüm Gezgini, projeye sağ tıklayın BlazorServerSignalRApp ve NuGet paketlerini yönet' i seçin.

  2. NuGet paketlerini yönet iletişim kutusunda, paket kaynağının olarak ayarlandığını doğrulayın nuget.org .

  3. Araştır seçiliyken, Microsoft.AspNetCore.SignalR.Client Arama kutusuna yazın.

  4. Arama sonuçlarında Microsoft.AspNetCore.SignalR.Client paketi seçin. Sürümü, uygulamanın paylaşılan çerçevesiyle eşleşecek şekilde ayarlayın. Yükle'yi seçin.

  5. Değişiklikleri Önizle iletişim kutusu görüntülenirse Tamam' ı seçin.

  6. Lisans kabulü iletişim kutusu görüntülenirse, lisans şartlarını kabul ediyorsanız kabul ediyorum ' u seçin.

Hub ekleme SignalR

Hubs(Plural) bir klasör oluşturun ve şu ChatHub sınıfı () ekleyin Hubs/ChatHub.cs :

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

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

Hub için hizmetler ve uç nokta ekleme SignalR

  1. Startup.cs dosyasını açın.

  2. Ve sınıfının ad alanlarını Microsoft.AspNetCore.ResponseCompression ChatHub dosyanın en üstüne ekleyin:

    using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;

  3. Yanıt sıkıştırma ara yazılım hizmetlerini şu şekilde ekleyin Startup.ConfigureServices :

    public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSingleton<WeatherForecastService>();
    services.AddResponseCompression(opts =>
    {
        opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
            new[] { "application/octet-stream" });
    });
}

  4. Startup.Configure içinde:

    • İşlem ardışık düzeninin yapılandırmasının en üstünde yanıt sıkıştırma ara yazılımı ' nı kullanın.
    • BlazorHub ve istemci tarafı geri dönüşü eşlemek için uç noktalar arasında merkez için bir uç nokta ekleyin.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseResponseCompression();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
        endpoints.MapHub<ChatHub>("/chathub");
        endpoints.MapFallbackToPage("/_Host");
    });
}

RazorSohbet için bileşen kodu ekle

  1. Pages/Index.razor dosyasını açın.

  2. İşaretlemeyi aşağıdaki kodla değiştirin:

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection hubConnection;
    private List<string> messages = new List<string>();
    private string userInput;
    private string messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    async Task Send() =>
        await hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

Uygulamayı çalıştırma

Araç kılavuzunuz için yönergeleri izleyin:

  1. Uygulamayı hata ayıklama olmadan çalıştırmak için F5 tuşuna basın veya uygulamayı hata ayıklamadan çalıştırmak için CTRL + F5 tuşuna basın.

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

  3. Tarayıcı ' yı seçin, bir ad ve ileti girin ve iletiyi göndermek için düğmeyi seçin. Ad ve ileti her iki sayfada da anında görüntülenir:

    ::: No-Loc (SignalR):::::: No-Loc (Blazor)::: örnek uygulama, değiştirilen iletileri gösteren iki tarayıcı penceresinde açılır.

    Alıntılar: yıldız Trek VI: bulunan ülke © 1991 Paramount

Sonraki adımlar

Bu öğreticide, şunların nasıl yapıldığını öğrendiniz:

  • Proje oluşturma Blazor
  • SignalRİstemci kitaplığını ekleme
  • Hub ekleme SignalR
  • SignalRHub için hizmetler ve uç nokta ekleme SignalR
  • RazorSohbet için bileşen kodu ekle

Uygulama oluşturma hakkında daha fazla bilgi edinmek için Blazor Blazor belgelere bakın:

ASP.NET Core giriş Blazor IdentitySunucu, WebSockets ve Server-Sent olayları ile taşıyıcı belirteci kimlik doğrulaması

Ek kaynaklar

Bu öğretici ile kullanarak gerçek zamanlı bir uygulama oluşturma hakkında temel bilgileri öğretir SignalR Blazor . Aşağıdakileri nasıl yapacağınızı öğrenirsiniz:

  • Proje oluşturma Blazor
  • SignalRİstemci kitaplığını ekleme
  • Hub ekleme SignalR
  • SignalRHub için hizmetler ve uç nokta ekleme SignalR
  • RazorSohbet için bileşen kodu ekle

Bu öğreticinin sonunda, çalışan bir sohbet uygulamanız olacaktır.

Örnek kodu görüntüleme veya indirme (nasıl indirileceği)

Önkoşullar

Barındırılan uygulama Blazor WebAssembly oluşturma

Araç seçiminiz için yönergeleri izleyin:

Not

Visual Studio 16.6 veya sonraki bir .NET Core SDK 3.1.300 veya sonraki bir yıl gereklidir.

  1. Yeni bir proje oluşturma.

  2. Uygulama Blazor WebAssembly şablonunu seçin. İleri’yi seçin.

  3. Ad BlazorWebAssemblySignalRApp alanına Project yazın. Konum girişinin doğru olduğunu onaylayın veya proje için bir konum girin. İleri’yi seçin.

  4. Ek bilgiler iletişim kutusunda, Barındırılan ASP.NET Core onay kutusunu seçin.

  5. Oluştur’u seçin.

İstemci SignalR kitaplığını ekleme

  1. Bu Çözüm Gezgini, projeye sağ tıklayın ve Paketleri BlazorWebAssemblySignalRApp.Client Yönet'NuGet seçin.

  2. Paket Paketlerini NuGet iletişim kutusunda Paket kaynağının olarak ayar olduğunu nuget.org onaylayın.

  3. Gözat seçiliyken Microsoft.AspNetCore.SignalR.Client arama kutusuna yazın.

  4. Arama sonuçlarında paketi Microsoft.AspNetCore.SignalR.Client seçin. Sürümü uygulamanın paylaşılan çerçevesiyle eş olacak şekilde ayarlayın. Yükle'yi seçin.

  5. Değişiklikleri Önizle iletişim kutusu görüntülenirse Tamam'ı seçin.

  6. Lisans Kabulü iletişim kutusu açılırsa, lisans koşullarını kabul ediyorsanız Kabul Ediyorum'a tıklayın.

Hub SignalR ekleme

Projede BlazorWebAssemblySignalRApp.Server bir Hubs (çoğul) klasör oluşturun ve aşağıdaki sınıfı ChatHub ekleyin ( Hubs/ChatHub.cs ):

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

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

Hub için hizmet ve uç nokta SignalR ekleme

  1. Projesinde BlazorWebAssemblySignalRApp.Server dosyasını Startup.cs açın.

  2. sınıfının ad alanını ChatHub dosyanın en üstüne ekleyin:

    using BlazorWebAssemblySignalRApp.Server.Hubs;

  3. hizmetine SignalR Sıkıştırma Ara Yazılımı hizmetleri ekleme ve Startup.ConfigureServices yanıtlama:

    public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
    services.AddControllersWithViews();
    services.AddResponseCompression(opts =>
    {
        opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
            new[] { "application/octet-stream" });
    });
}

  4. Startup.Configure içinde:

    • İşlem hattı yapılandırmasının üst kısmında Yanıt Sıkıştırma Ara Yazılımı'nın kullanın.
    • Denetleyiciler ve istemci tarafı geri dönüş uç noktaları arasında hub için bir uç nokta ekleyin.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseResponseCompression();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseWebAssemblyDebugging();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseBlazorFrameworkFiles();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapHub<ChatHub>("/chathub");
        endpoints.MapFallbackToFile("index.html");
    });
}

Sohbet Razor için bileşen kodu ekleme

  1. Projesinde BlazorWebAssemblySignalRApp.Client dosyasını Pages/Index.razor açın.

  2. işaretlemesini aşağıdaki kodla değiştirin:

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IDisposable

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection hubConnection;
    private List<string> messages = new List<string>();
    private string userInput;
    private string messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    async Task Send() =>
        await hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;

    public void Dispose()
    {
        _ = hubConnection?.DisposeAsync();
    }
}

Uygulamayı çalıştırma

Aracınız için yönergeleri izleyin:

  1. Bu Çözüm Gezgini projesini BlazorWebAssemblySignalRApp.Server seçin. Uygulamayı hata ayıklama ile çalıştırmak için F5'e veya hata ayıklama olmadan çalıştırmak için Ctrl + F5'e basın.

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

  3. Tarayıcıdan birini seçin, bir ad ve ileti girin ve iletiyi göndermek için düğmeyi seçin. Ad ve ileti her iki sayfada da anında görüntülenir:

    SignalR Blazor örnek uygulama, ileti alışverişi yapılan iletileri gösteren iki tarayıcı penceresinde açılır.

    Alıntılar: Star Tipi VI: Keşfedilmemiş Ülke © 1991 Paramount

Uygulama Blazor Server oluşturma

Araç seçiminiz için yönergeleri izleyin:

Not

Visual Studio 16.6 veya sonraki bir .NET Core SDK 3.1.300 veya sonraki bir yıl gereklidir.

  1. Yeni bir proje oluşturma.

  2. Uygulama Blazor Server şablonunu seçin. İleri’yi seçin.

  3. Ad BlazorServerSignalRApp alanına Project yazın. Konum girişinin doğru olduğunu onaylayın veya proje için bir konum girin. İleri’yi seçin.

  4. Oluştur’u seçin.

İstemci SignalR kitaplığını ekleme

  1. Bu Çözüm Gezgini, projeye sağ tıklayın ve Paketleri BlazorServerSignalRApp Yönet'NuGet seçin.

  2. Paket Yönetimi NuGet iletişim kutusunda Paket kaynağının olarak ayar olduğunu nuget.org onaylayın.

  3. Gözat seçiliyken Microsoft.AspNetCore.SignalR.Client arama kutusuna yazın.

  4. Arama sonuçlarında paketi Microsoft.AspNetCore.SignalR.Client seçin. Sürümü uygulamanın paylaşılan çerçevesiyle eş olacak şekilde ayarlayın. Yükle'yi seçin.

  5. Değişiklikleri Önizle iletişim kutusu görüntülenirse Tamam'ı seçin.

  6. Lisans Kabulü iletişim kutusu açılırsa, lisans koşullarını kabul ediyorsanız Kabul Ediyorum'a tıklayın.

System.Text.Encodings.Web paketini ekleme

Bu bölüm yalnızca 3.x ASP.NET Core uygulamalar için geçerlidir.

Bir System.Text.Json ASP.NET Core 3.x uygulamasında 5.x kullanırken paket çözümleme sorunu nedeniyle proje için bir paket başvurusu System.Text.Encodings.Web gerektirir. Temel alınan sorun gelecekteki bir .NET 5 düzeltme eki sürümüyle çözülecek. Daha fazla bilgi için bkz. System.Text.Json, bağımlılıkları (dotnet/runtime #45560) ile netcoreapp3.0'ı tanımlar.

Projeye System.Text.Encodings.Web eklemek için, araç seçiminize yönelik yönergeleri izleyin:

  1. Bu Çözüm Gezgini, projeye sağ tıklayın ve Paketleri BlazorServerSignalRApp Yönet'NuGet seçin.

  2. Paket Yönetimi NuGet iletişim kutusunda Paket kaynağının olarak ayar olduğunu nuget.org onaylayın.

  3. Gözat seçiliyken System.Text.Encodings.Web arama kutusuna yazın.

  4. Arama sonuçlarında paketi System.Text.Encodings.Web seçin. Paketin, kullanımda paylaşılan çerçeveyle eşleşen sürümünü seçin. Yükle'yi seçin.

  5. Değişiklikleri Önizle iletişim kutusu görüntülenirse Tamam'ı seçin.

  6. Lisans Kabulü iletişim kutusu açılırsa, lisans koşullarını kabul ediyorsanız Kabul Ediyorum'a tıklayın.

Hub SignalR ekleme

Bir Hubs (çoğul) klasör oluşturun ve aşağıdaki sınıfı ChatHub ekleyin ( Hubs/ChatHub.cs ):

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

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

Hub için hizmet ve uç nokta SignalR ekleme

  1. Startup.cs dosyasını açın.

  2. ve sınıfını Microsoft.AspNetCore.ResponseCompression için ad ChatHub alanlarını dosyanın en üstüne ekleyin:

    using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;

  3. hizmetine Yanıt Sıkıştırma Ara Yazılımı hizmetleri Startup.ConfigureServices ekleyin:

    public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSingleton<WeatherForecastService>();
    services.AddResponseCompression(opts =>
    {
        opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
            new[] { "application/octet-stream" });
    });
}

  4. Startup.Configure içinde:

    • İşlem hattı yapılandırmasının üst kısmında Yanıt Sıkıştırma Ara Yazılımı'nın kullanın.
    • Hub'ı eşleme uç noktaları ile istemci tarafı geri dönüşleri arasında Blazor hub için bir uç nokta ekleyin.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseResponseCompression();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
        endpoints.MapHub<ChatHub>("/chathub");
        endpoints.MapFallbackToPage("/_Host");
    });
}

Sohbet Razor için bileşen kodu ekleme

  1. Pages/Index.razor dosyasını açın.

  2. işaretlemesini aşağıdaki kodla değiştirin:

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection hubConnection;
    private List<string> messages = new List<string>();
    private string userInput;
    private string messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    async Task Send() =>
        await hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        await hubConnection?.DisposeAsync();
    }
}

Uygulamayı çalıştırma

Aracınız için yönergeleri izleyin:

  1. Uygulamayı hata ayıklama ile çalıştırmak için F5'e veya hata ayıklama olmadan çalıştırmak için Ctrl + F5'e basın.

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

  3. Tarayıcıdan birini seçin, bir ad ve ileti girin ve iletiyi göndermek için düğmeyi seçin. Ad ve ileti her iki sayfada da anında görüntülenir:

    SignalR Blazor örnek uygulama, ileti alışverişi yapılan iletileri gösteren iki tarayıcı penceresinde açılır.

    Alıntılar: Star Tipi VI: Keşfedilmemiş Ülke © 1991 Paramount

Sonraki adımlar

Bu öğreticide, şunların nasıl yapıldığını öğrendiniz:

  • Proje Blazor oluşturma
  • İstemci SignalR kitaplığını ekleme
  • Hub SignalR ekleme
  • Hub SignalR için hizmet ve uç nokta SignalR ekleme
  • Sohbet Razor için bileşen kodu ekleme

Uygulama bina hakkında daha fazla Blazor bilgi edinmek için şu belgelere Blazor bakın:

ASP.NET Core giriş Blazor IdentitySunucu, WebSockets ve Server-Sent Olayları ile taşıyıcı belirteç kimlik doğrulaması

Ek kaynaklar