ile ASP.NET Core SignalR kullanma Blazor

  • Makale

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Bu öğretici, ile Blazorkullanarak SignalR gerçek zamanlı bir uygulama oluşturmaya yönelik temel bir çalışma deneyimi sağlar. Bu makale, zaten bilgi sahibi SignalR olan ve uygulamada Blazor nasıl kullanılacağını SignalR anlamaya çalışan geliştiriciler için kullanışlıdır. ve Blazor çerçeveleri hakkında SignalR ayrıntılı yönergeler için aşağıdaki başvuru belge kümelerine ve API belgelerine bakın:

Şunları nasıl yapacağınızı öğrenin:

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

Bu öğreticinin sonunda çalışan bir sohbet uygulamasına sahip olacaksınız.

Önkoşullar

ASP.NET ve web geliştirme iş yüküyle Visual Studio 2022 veya üzeri

Örnek uygulama

Bu öğretici için öğreticinin örnek sohbet uygulamasını indirmeniz gerekmez. Örnek uygulama, bu öğreticinin adımları izlenerek oluşturulan son çalışan uygulamadır.

Örnek kodu görüntüleme veya indirme (indirme)

Blazor Web Uygulaması oluşturma

Seçtiğiniz araçlar için yönergeleri izleyin:

Not

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

Yeni bir proje oluşturma.

Blazor Web Uygulaması şablonunu seçin. İleri'yi seçin.

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

Framework'ün .NET 8 veya üzeri olduğunu onaylayın. Oluştur'u belirleyin.

İstemci kitaplığını SignalR ekleme

Çözüm Gezgini'da projeye sağ tıklayın BlazorSignalRApp ve NuGet Paketlerini Yönet'i seçin.

NuGet Paketlerini Yönet iletişim kutusunda Paket kaynağının olarak nuget.orgayarlandığını onaylayın.

Gözat seçili durumdayken, arama kutusuna yazınMicrosoft.AspNetCore.SignalR.Client.

Arama sonuçlarında paketin en son sürümünü Microsoft.AspNetCore.SignalR.Client seçin. Yükle'yi seçin.

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

Lisans Kabulü iletişim kutusu görüntülenirse, lisans koşullarını kabul ediyorsanız Kabul Ediyorum'ı seçin.

SignalR Hub ekleme

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

using Microsoft.AspNetCore.SignalR;

namespace BlazorSignalRApp.Hubs;

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

Hub için SignalR hizmetler ve uç nokta ekleme

Program dosyasını açın.

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

using Microsoft.AspNetCore.ResponseCompression;
using BlazorSignalRApp.Hubs;

Yanıt Sıkıştırma Ara Yazılımı hizmetleri ekleme:

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

İşlem hattı yapılandırmasının üst kısmında Yanıt Sıkıştırma Ara Yazılımı kullanın:

app.UseResponseCompression();

Bileşenleri eşleyen Razor satırın hemen arkasına hub için bir uç nokta ekleyin (app.MapRazorComponents<T>()):

app.MapHub<ChatHub>("/chathub");

Sohbet için bileşen kodu ekleme Razor

Components/Pages/Home.razor dosyasını açın.

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

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

<PageTitle>Home</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(Navigation.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            InvokeAsync(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();
        }
    }
}

Not

Çalışırken Yeniden Yükleme kullanırken ortamda Yanıt Sıkıştırma Ara Yazılımını Development devre dışı bırakın. Daha fazla bilgi için bkz . ASP.NET Temel BlazorSignalR kılavuzu.

Uygulamayı çalıştırma

Araçlarınız için yönergeleri izleyin:

Uygulamayı hata ayıklama ile çalıştırmak için F5 tuşuna veya Ctrl+F5 (Windows)/⌘+F5 (macOS) tuşlarına basarak uygulamayı hata ayıklamadan çalıştırın.

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ılardan 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:

SignalRBlazor örnek uygulama, değiştirilen iletileri gösteren iki tarayıcı penceresinde açılır.

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

Barındırılan Blazor WebAssembly deneyim

Uygulamayı oluşturma

Barındırılan Blazor WebAssembly uygulama oluşturmak için seçtiğiniz araç kılavuzu izleyin:

Not

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

Yeni bir proje oluşturma.

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

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

Ek bilgi iletişim kutusunda, ASP.NET Temel Barındırılan onay kutusunu seçin.

Oluştur'u belirleyin.

Barındırılan Blazor WebAssembly bir uygulamanın oluşturulduğunu onaylayın: Çözüm Gezgini bir projenin ve Server projenin varlığını Client onaylayın. İki proje yoksa, yeniden başlayın ve Oluştur'u seçmeden önce ASP.NET Temel Barındırılan onay kutusunun seçilmesini onaylayın.

İstemci kitaplığını SignalR ekleme

Çözüm Gezgini'da projeye sağ tıklayın BlazorWebAssemblySignalRApp.Client ve NuGet Paketlerini Yönet'i seçin.

NuGet Paketlerini Yönet iletişim kutusunda Paket kaynağının olarak nuget.orgayarlandığını onaylayın.

Gözat seçili durumdayken, arama kutusuna yazınMicrosoft.AspNetCore.SignalR.Client.

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

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

Lisans Kabulü iletişim kutusu görüntülenirse, lisans koşullarını kabul ediyorsanız Kabul Ediyorum'ı seçin.

SignalR Hub ekleme

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

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);
    }
}

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);
    }
}

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);
        }
    }
}

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 SignalR hizmetler ve uç nokta ekleme

Projede BlazorWebAssemblySignalRApp.Server dosyasını açın Program.cs .

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

using BlazorWebAssemblySignalRApp.Server.Hubs;

Ekleme SignalR ve Yanıt Sıkıştırma Ara Yazılımı hizmetleri:

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

Uygulamayı oluşturan satırdan hemen sonra işleme işlem hattının yapılandırmasının üst kısmındaki Yanıt Sıkıştırma Ara Yazılımı'nı kullanın:

app.UseResponseCompression();

Denetleyiciler için uç noktalar ile istemci tarafı geri dönüşü arasında hub için bir uç nokta ekleyin. satırından app.MapControllers();hemen sonra aşağıdaki satırı ekleyin:

app.MapHub<ChatHub>("/chathub");

Projede BlazorWebAssemblySignalRApp.Server dosyasını açın Startup.cs .

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

using BlazorWebAssemblySignalRApp.Server.Hubs;

Ekleme SignalR ve Yanıt Sıkıştırma Ara Yazılımı hizmetleri:

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

İşlem hattı yapılandırmasının üst kısmında Yanıt Sıkıştırma Ara Yazılımı kullanın:

app.UseResponseCompression();

Denetleyiciler için uç noktalar ile istemci tarafı geri dönüşü arasında, satırından endpoints.MapControllers();hemen sonra hub için bir uç nokta ekleyin:

endpoints.MapHub<ChatHub>("/chathub");

Sohbet için bileşen kodu ekleme Razor

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

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

@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@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(Navigation.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();
        }
    }
}

@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@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(Navigation.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();
        }
    }
}

@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();
        }
    }
}

@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();
    }
}

Not

Çalışırken Yeniden Yükleme kullanırken ortamda Yanıt Sıkıştırma Ara Yazılımını Development devre dışı bırakın. Daha fazla bilgi için bkz . ASP.NET Temel BlazorSignalR kılavuzu.

Uygulamayı çalıştırma

Araçlarınız için yönergeleri izleyin:

Çözüm Gezgini'da projeyi seçinBlazorWebAssemblySignalRApp.Server. Uygulamayı hata ayıklama ile çalıştırmak için F5 tuşuna veya Ctrl+F5 (Windows)/⌘+F5 (macOS) tuşlarına basarak uygulamayı hata ayıklamadan çalıştırın.

Önemli

Barındırılan Blazor WebAssembly bir uygulamayı yürütürken çözümün Server projesinden uygulamayı çalıştırın.

Hata ayıklama oturumu için seçilen tarayıcı Google Chrome veya Microsoft Edge olmalıdır.

Uygulama tarayıcıda başlatılamazsa:

  • .NET konsolunda çözümün "Server" projesinden çalıştığını onaylayın.
  • Tarayıcının yeniden yükle düğmesini kullanarak tarayıcıyı yenileyin.

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ılardan 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:

SignalRBlazor örnek uygulama, değiştirilen iletileri gösteren iki tarayıcı penceresinde açılır.

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

Blazor Server Deneyim

Uygulamayı oluşturma

Uygulama oluşturmak Blazor Server için seçtiğiniz araçlarla ilgili yönergeleri izleyin:

Not

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

Yeni bir proje oluşturma.

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

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

Oluştur'u belirleyin.

İstemci kitaplığını SignalR ekleme

Çözüm Gezgini'da projeye sağ tıklayın BlazorServerSignalRApp ve NuGet Paketlerini Yönet'i seçin.

NuGet Paketlerini Yönet iletişim kutusunda Paket kaynağının olarak nuget.orgayarlandığını onaylayın.

Gözat seçili durumdayken, arama kutusuna yazınMicrosoft.AspNetCore.SignalR.Client.

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

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

Lisans Kabulü iletişim kutusu görüntülenirse, lisans koşullarını kabul ediyorsanız Kabul Ediyorum'ı seçin.

System.Text.Encodings.Web paketini ekleme

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

bir ASP.NET Core 3.x uygulamasında 5.x kullanırken System.Text.Json paket çözümleme sorunu nedeniyle, proje için System.Text.Encodings.Webbir paket başvurusu gerektirir. Temel alınan sorun bir düzeltme eki sürümünde çözüldü ve ASP.NET Core 5.0'a geri aktarıldı. Daha fazla bilgi için bkz . System.Text.Json, bağımlılık olmadan netcoreapp3.0'ı tanımlar (dotnet/runtime #45560).

Projeye eklemek System.Text.Encodings.Web için, seçtiğiniz araçlarla ilgili yönergeleri izleyin:

Çözüm Gezgini'da projeye sağ tıklayın BlazorServerSignalRApp ve NuGet Paketlerini Yönet'i seçin.

NuGet Paketlerini Yönet iletişim kutusunda Paket kaynağının olarak nuget.orgayarlandığını onaylayın.

Gözat seçili durumdayken, arama kutusuna yazınSystem.Text.Encodings.Web.

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

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

Lisans Kabulü iletişim kutusu görüntülenirse, lisans koşullarını kabul ediyorsanız Kabul Ediyorum'ı seçin.

SignalR Hub ekleme

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

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);
    }
}

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);
    }
}

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);
        }
    }
}

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 SignalR hizmetler ve uç nokta ekleme

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

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

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

Yanıt Sıkıştırma Ara Yazılımı hizmetleri ekleme:

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

İşlem hattı yapılandırmasının üst kısmında Yanıt Sıkıştırma Ara Yazılımı kullanın:

app.UseResponseCompression();

Hub'ı eşlemek Blazor için uç noktalar ile istemci tarafı geri dönüşü arasında, satırından app.MapBlazorHub();hemen sonra hub için bir uç nokta ekleyin:

app.MapHub<ChatHub>("/chathub");

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

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

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

Yanıt Sıkıştırma Ara Yazılımı hizmetleri ekleme:

services.AddResponseCompression(opts =>
{
   opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
         new[] { "application/octet-stream" });
});

İşlem hattı yapılandırmasının üst kısmında Yanıt Sıkıştırma Ara Yazılımı kullanın:

app.UseResponseCompression();

Hub'ı eşlemek Blazor için uç noktalar ile istemci tarafı geri dönüşü arasında, satırından endpoints.MapBlazorHub();hemen sonra hub için bir uç nokta ekleyin:

endpoints.MapHub<ChatHub>("/chathub");

Sohbet için bileşen kodu ekleme Razor

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

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

@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@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(Navigation.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            InvokeAsync(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();
        }
    }
}

@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@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(Navigation.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            InvokeAsync(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();
        }
    }
}

@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);
            InvokeAsync(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();
        }
    }
}

@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);
            InvokeAsync(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();
    }
}

Not

Çalışırken Yeniden Yükleme kullanırken ortamda Yanıt Sıkıştırma Ara Yazılımını Development devre dışı bırakın. Daha fazla bilgi için bkz . ASP.NET Temel BlazorSignalR kılavuzu.

Uygulamayı çalıştırma

Araçlarınız için yönergeleri izleyin:

Uygulamayı hata ayıklama ile çalıştırmak için F5 tuşuna veya Ctrl+F5 (Windows)/⌘+F5 (macOS) tuşlarına basarak uygulamayı hata ayıklamadan çalıştırın.

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ılardan 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:

SignalRBlazor örnek uygulama, değiştirilen iletileri gösteren iki tarayıcı penceresinde açılır.

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

Sonraki adımlar

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

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

ve Blazor çerçeveleri hakkında SignalR ayrıntılı yönergeler için aşağıdaki başvuru belge kümelerine bakın:

ASP.NET Core SignalRASP.NET Core'a genel bakış Blazor

Ek kaynaklar