Step by Step Guide to SignalR and Blazor Integration

Real-time web applications have become highly important today for providing interactive and dynamic user experiences. Thanks to the integration of SignalR and Blazor, you can develop interactive web applications on the browser and quickly achieve instant data transmission and updates. In this article, we will explain step by step how to integrate SignalR technology with Blazor.

What are SignalR and Blazor?

SignalR is a library that comes with ASP.NET infrastructure and allows you to easily provide bi-directional, real-time communication between clients and the server. Blazor is a framework used to write modern web applications with .NET, and it works both based on WebAssembly (Blazor WebAssembly) and server-based (Blazor Server). With the integration of SignalR and Blazor, you can easily include real-time services in your projects such as chat applications, live notifications, or games.

How to Integrate SignalR and Blazor?

1. Creating a SignalR Hub on the Server Side

First, you need to define a SignalR Hub class. Below you can see an example of a SignalR Hub code:

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

2. Setting Up Server StartUp Settings

In your Startup.cs file, you need to add SignalR services and define the endpoint:

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ... other settings
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
        endpoints.MapHub<ChatHub>("/chathub");
        endpoints.MapFallbackToPage("/_Host");
    });
}

3. Establishing SignalR Connection in Blazor Component

To communicate with SignalR on the Blazor component, you can initiate a connection as shown below:

@page "/chat"
@using Microsoft.AspNetCore.SignalR.Client

<input @bind="user" placeholder="Username" maxlength="20" />
<input @bind="message" placeholder="Your message" maxlength="100" />
<button @onclick="SendMessageAsync">Send</button>

<ul>
    @foreach (var msg in messages)
    {
        <li>@msg</li>
    }
</ul>

@code {
    HubConnection hubConnection;
    string user;
    string message;
    List<string> messages = new List<string>();

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

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

        await hubConnection.StartAsync();
    }

    async Task SendMessageAsync()
    {
        if (!string.IsNullOrEmpty(user) && !string.IsNullOrEmpty(message))
        {
            await hubConnection.SendAsync("SendMessage", user, message);
            message = string.Empty;
        }
    }
}

What Can Be Done with SignalR and Blazor Integration?

With this integration, you can direct real-time data both on the server and client side and develop functional applications such as chat, instant notification, live scores, and many more. The integration of SignalR and Blazor offers a powerful combination for modern, fast, and scalable web applications in the .NET world.

Conclusion

Thanks to the integration of SignalR and Blazor, you can confidently develop high-performance, interactive, and scalable applications by utilizing all the advantages offered by the .NET ecosystem. This guide covers steps to help you add real-time features to your projects. Don't forget to check the documentation for more!