I ❤️ .NET

Table of Contents

1. What we gonna do?
2. Why we gonna do?
3. How we gonna do?
4. Summary

What we gonna do?

In this article, let's learn about types of SignalR clients.

Note: If you have not done so already, I recommend you read the article on Fundamentals of SignalR in .NET.

In our previous article, we learnt the fundamentals of SignalR. Today in this article lets dive deep into the server and client features available in SignalR in .NET. One among them is the types of clients available in SignalR.

SignalR will use WebSockets when it's available, and gracefully falls back on other technologies when it isn't, while your application code stays the same.

Why we gonna do?

SignalR is not limited to browser-based applications. Your server hub can speak to Blazor WASM components, console applications, desktop clients, or JavaScript front-ends — all at the same time. Without knowing what client types and libraries are available, developers often assume SignalR is browser-only and miss opportunities to build cross-platform real-time solutions.

Understanding the different client types and their respective SDK setup steps means you can connect any application to your SignalR hub, regardless of the platform or technology stack it uses.

How we gonna do?

Connect from Everywhere

SignalR isn't just for browsers. Your clients can be all sorts of applications - desktop, web, or mobile, and they don't even have to match. Mix and match to your heart's content!

Plus, you're not limited to any specific tech stack. Whether it's React, Angular, WPF, .NET MAUI, or Blazor, they can all hop on the SignalR train. The only thing to watch for is having the right client libraries. Luckily, there are JavaScript, .NET, and Java libraries available, so as long as your app's using one of those, you're good to go.

Steps

1. Add Microsoft.AspNetCore.SignalR.Client Nuget Package to Client.
2. Create HubConnection.
3. Configure Handler to be invoked.
4. Start the HubConnection.
5. Finally close it on Component Dispose.

Blazor Client

public class NotificationBase : ComponentBase, IAsyncDisposable
{
    private readonly CancellationTokenSource _cancellationTokenSource = new();
    private HubConnection? _hubConnection;
    
    protected override async Task OnInitializedAsync()
    {
            _hubConnection = new HubConnectionBuilder()
                .WithUrl("https://ilovedotnet.org/notifications", options => 
                {
                    //options.Transports = Microsoft.AspNetCore.Http.Connections.HttpTransportType.WebSockets;
                    //options.SkipNegotiation = true;
                })
                .Build();
                
            _hubConnection.On<string>("ReceiveNewArticle", article =>
            {
                Console.WriteLine(article.Title);
                InvokeAsync(StateHasChanged);
            });

            await _hubConnection.StartAsync(_cancellationTokenSource.Token);
    }
    
    public async ValueTask DisposeAsync()
    {
            if (_hubConnection is not null)
            {
                await _hubConnection.DisposeAsync();
            }
        
            _cancellationTokenSource.Cancel();
            _cancellationTokenSource.Dispose();
    }
}
            

Console Client

using var httpClient = new HttpClient();
httpClient.BaseAddress = new Uri("https://ilovedotnet.org");
var response = await httpClient.GetAsync("/notifications");
var articles = await response.Content.ReadFromJsonAsync<Article[]>();

if (articles == null)
    return;

foreach (var article in articles)
{
    Console.WriteLine($"{article.Title}");
}

var connection = new HubConnectionBuilder()
    .WithUrl("https://ilovedotnet.org/notifications")
    .Build();

connection.On("ReceiveNewArticle", (Article article) => {
    Console.WriteLine(article.Title);
});

try
{
    await connection.StartAsync();
}
catch (Exception ex)
{
    Console.WriteLine(ex.Message);
}
            

JavaScript Client

//import <script src="~/js/signalr/dist/browser/signalr.min.js"></script>

var connection = new signalR.HubConnectionBuilder()
                            .withUrl("https://ilovedotnet.org/notifications")
                            .build();

connection.on("ReceiveNewArticle", (article) => {
    console.log(article.Title);
});

connection.start()
          .catch((err) => {
    return console.error(err.toString());
});
            

Summary

In this article, we learnt about different types of SignalR clients. We also saw how to create a blazor client, console client, javascript client and connect to the SignalR hub. In the next article, we will learn about IHubContext and Caller in SignalR.