How to Implement Real-Time Features in Blazor PWAs Using SignalR

 

Real-time functionality is a game-changer for modern web applications. From collaborative tools to live notifications, real-time updates elevate user experience by ensuring data is always fresh and interactions feel instantaneous.

Blazor, combined with SignalR, provides a seamless way to build Progressive Web Apps (PWAs) with real-time capabilities. SignalR simplifies the complexity of real-time communication, allowing your app to push updates directly from the server to the client without the need for constant polling.

In this post, we’ll guide you through integrating SignalR into a Blazor PWA with practical examples like live collaboration and notifications.

---

Why SignalR for Real-Time Features?

SignalR is a real-time communication library for ASP.NET Core that supports multiple transport protocols, such as:

• WebSockets (preferred for its low latency).
• Server-Sent Events (SSE).
• Long Polling.

SignalR automatically selects the best available protocol, making it both flexible and reliable for building real-time features.

---

Setting Up SignalR in a Blazor PWA

1. Create a Blazor PWA

Start by creating a Blazor WebAssembly project with PWA support:

dotnet new blazorwasm -o BlazorRealTimePWA --pwa
cd BlazorRealTimePWA

2. Add SignalR Client

Add the SignalR client package to your Blazor project:

dotnet add package Microsoft.AspNetCore.SignalR.Client

3. Create a SignalR Hub

On the server side, create a SignalR hub that will handle real-time communication.

Example: Notification Hub

using Microsoft.AspNetCore.SignalR;

public class NotificationHub : Hub
{
    public async Task SendNotification(string message)
    {
        await Clients.All.SendAsync("ReceiveNotification", message);
    }
}

4. Register the Hub

Configure your ASP.NET Core backend to use the SignalR hub. Update Program.cs:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapHub<NotificationHub>("/notificationHub");

app.Run();

---

Integrating SignalR in Blazor

1. Create a SignalR Service

Add a new service to manage the SignalR connection.

SignalRService.cs

using Microsoft.AspNetCore.SignalR.Client;

public class SignalRService
{
    private HubConnection _hubConnection;

    public event Action<string> NotificationReceived;

    public async Task StartConnection(string hubUrl)
    {
        _hubConnection = new HubConnectionBuilder()
            .WithUrl(hubUrl)
            .Build();

        _hubConnection.On<string>("ReceiveNotification", (message) =>
        {
            NotificationReceived?.Invoke(message);
        });

        await _hubConnection.StartAsync();
    }

    public async Task SendNotification(string message)
    {
        if (_hubConnection.State == HubConnectionState.Connected)
        {
            await _hubConnection.InvokeAsync("SendNotification", message);
        }
    }
}

2. Register the Service

Register the service in Program.cs:

builder.Services.AddSingleton<SignalRService>();

3. Create a Real-Time Notification Component

Add a new Razor component for notifications.

RealTimeNotifications.razor

@inject SignalRService SignalRService

<h3>Real-Time Notifications</h3>

<ul>
    @foreach (var notification in notifications)
    {
        <li>@notification</li>
    }
</ul>

<input @bind="message" placeholder="Send a notification" />
<button @onclick="SendNotification">Send</button>

@code {
    private List<string> notifications = new();
    private string message;

    protected override async Task OnInitializedAsync()
    {
        SignalRService.NotificationReceived += (notification) =>
        {
            InvokeAsync(() =>
            {
                notifications.Add(notification);
                StateHasChanged();
            });
        };

        await SignalRService.StartConnection("https://your-backend-url/notificationHub");
    }

    private async Task SendNotification()
    {
        await SignalRService.SendNotification(message);
        message = string.Empty;
    }
}

---

Real-World Use Cases

1. Live Collaboration

For tools like collaborative document editors or task boards:

• Broadcast updates to all connected users when a task is updated or a document is edited.
• Example: Update a Kanban board in real-time as users move cards between columns.

2. Live Dashboards

For real-time analytics or IoT monitoring:

• Use SignalR to push new data points to connected clients.
• Example: A stock trading app that updates stock prices live.

3. Notifications

For apps requiring user alerts:

• Push notifications to users when new messages, tasks, or updates are available.
• Example: Notify users of new orders in an e-commerce app.

---

Best Practices for SignalR in Blazor PWAs

1. Handle Connection State
   Monitor the SignalR connection state and attempt reconnection if it drops:

   
   _hubConnection.Closed += async (error) =>
   {
       await Task.Delay(5000);
       await _hubConnection.StartAsync();
   };
   

2. Optimize Bandwidth Usage
   Avoid sending large payloads over SignalR. Compress data or only send updates that have changed.

3. Secure Your Hubs
   Use authentication and authorization to restrict access to sensitive data.

4. Test Scalability
   SignalR hubs should handle many simultaneous connections. Use Azure SignalR Service for scaling.

---

Conclusion

Real-time features powered by SignalR can transform your Blazor PWA into a truly interactive and engaging application. By following the steps outlined above, you can implement notifications, live dashboards, or collaborative tools with ease.

SignalR’s flexibility and seamless integration with Blazor make it the perfect choice for building modern web applications. Ready to take your PWA to the next level? Check out my book, Building Progressive Web Apps with Blazor, for more advanced techniques and insights.

Let’s build something amazing—together! 🚀