Building Real-Time Web Apps with SignalR, WebAssembly, and ASP.NET Core API

Have you ever worked on a chat application that needs to display messages in real time or reflect changes based on backend updates? One common method used previously is to poll the backend for changes at specific intervals. However, this approach is not ideal as it slows down the client-side application and increases traffic on the backend. One solution to this problem is Signal R.

In this blog, we’ll look at how to build real-time web applications using three cutting-edge technologies. Signal R, WebAssemblyand ASP.NET Core API. SignalR simplifies the process of adding real-time web functionality, WebAssembly provides near-native performance for web apps, and ASP.NET Core API provides a powerful and scalable backend. Combining these technologies allows you to create responsive and performant web applications.

Signal R A library for ASP.NET that enables real-time web functionality. This allows server-side code to push content to connected clients as soon as it becomes available. SignalR supports multiple communication protocols, including WebSockets, and automatically falls back to other compatible protocols for older browsers. This makes it an excellent choice for applications that require frequent updates, such as chat applications, games, or live data feeds.

Create a new ASP.NET Core project

First, create a new ASP.NET Core Web API project. Open a terminal or command prompt and run the following command:

dotnet new webapi -n RealTimeApp

This command creates a new ASP.NET Core Web API project as follows: RealTimeApp.

Signal R installation

Next, navigate to your project directory and install the SignalR package.

cd RealTimeApp
dotnet add package Microsoft.AspNetCore.SignalR

SignalR Configuration program.cs

opening program.cs Create a file and configure SignalR. your program.cs The file should look like this:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

builder.Services.AddCors(options =>
{
    options.AddPolicy("CorsPolicy", builder =>
    {
        builder.WithOrigins("http://localhost:5051")
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials();
    });
});

builder.Services.AddControllers();

// Adding SignalR
builder.Services.AddSignalR();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseCors("CorsPolicy");
app.UseRouting();

// Adding the endpoint for the ChatHub
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapHub("/chatHub");
});


app.Run();

Create a SignalR hub

Create a new class called ChatHub.cs in project SendMessage method:

using Microsoft.AspNetCore.SignalR;

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

Create a new Blazor WebAssembly project

First, create a new Blazor WebAssembly project. Open a terminal or command prompt and run the following command:

dotnet new blazorwasm -n RealTimeApp.Client

This command creates a new Blazor WebAssembly project as follows: RealTimeApp.Client.

Add SignalR client library

Go to your project directory and add the SignalR client library.

cd RealTimeApp.Client
dotnet add package Microsoft.AspNetCore.SignalR.Client

Create Blazor components

Create a new Razor component for the chat interface. Just give it a name. Chat.razor.

Add the following: Chat.razor:

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

@inject NavigationManager NavigationManager

Chat



 { if (e.Key == "Enter") Send().GetAwaiter().GetResult(); })" class="form-control" />

    Send



    @foreach (var message in messages)
    {
        
@message
    }


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

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl("http://localhost:5258/chathub")
            .Build();

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

        await hubConnection.StartAsync();
    }

    private async Task Send()
    {
        await hubConnection.SendAsync("SendMessage", userInput, messageInput);
        messageInput = string.Empty;
    }
}

Add navigation Chat.razor

your Chat.razor You can access components through navigation. Please update NavMenu.razor The file that will contain the link to the chat component:

dotnet run --project RealTimeApp

dotnet run --project RealTimeApp.Client