SignalR using blazor server app – does not hit Hub.OnConnectedAsync function upon new client connection

I’m following this tutorial to create signalR feature in Blazor Server app. Here is the full code

    _hubConnection = new HubConnectionBuilder()
        .WithUrl(url)
        .Build();

I’m supposing when above code executes, it should hit OnConnectedAsync function in Hub class. At least that happens in the sample code given here. But surprisingly that is not happening with my code. I’m feeling there is something not right in the Program.cs where MapHub is called. Looks like blazor server app template has changed since the tutorial sample was made. It no longer has Startup.cs file. So I’ve changed the configuration code a bit.

In tutorial it is

app.UseEndpoints(endpoints =>
{
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
    endpoints.MapHub<BlazorChatSampleHub>(BlazorChatSampleHub.HubUrl);
});

and I have only

app.MapHub<TapDeviceHub>(TapDeviceHub.HubUrl);

because I already have

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

TapDevice.razor file

@page "/TapDevice"
@using Microsoft.AspNetCore.SignalR.Client;
@inject NavigationManager NavigationManager

<h3>SignalR</h3>
<div class="container-fluid">
    <div style="background-color:#d8e2dc;border-radius:20px;" class="p-3">
        <div class="row mt-3">
            <div class="col-md-5">
                <InputText id="device" @bind-Value="DeviceName" class="form-control" />
                <button type="button" class="btn btn-warning btn-sm" @onclick="@DeivceTap">Listen To Tap</button>
                @userid
            </div>
        </div>
    </div>
</div>
@code {
    private string DeviceName = "TestDevice";
    private string userid = "";
    private string _hubUrl;
    private HubConnection _hubConnection;


    private async Task DeivceTap()
    {
        string baseUrl = NavigationManager.BaseUri;
        _hubUrl = baseUrl.TrimEnd("https://stackoverflow.com/") + TapDeviceHub.HubUrl;
        //string url = $"{_hubUrl}?deviceName={DeviceName}";
        string url = $"{_hubUrl}";
        _hubConnection = new HubConnectionBuilder()
            .WithUrl(url)
            .Build();
        _hubConnection.On<string, string>("OnTap", (deviceName, userID) =>
        {
            if (DeviceName == deviceName)
            {
                this.userid = userID;
            }
            InvokeAsync(StateHasChanged);
        });
    }
}

TapDeviceHub.cs
using Microsoft.AspNetCore.SignalR;

public class TapDeviceHub : Hub
{
    public const string HubUrl = "/scanning";

    public override Task OnConnectedAsync()
    {
        Console.WriteLine($"#########################{Context.ConnectionId}connected");
        return base.OnConnectedAsync();
    }

    public override async Task OnDisconnectedAsync(Exception e)
    {
        await base.OnDisconnectedAsync(e);
    }

    public async Task OnTap(string deviceName, string userID)
    {
        string connectionID = "sdfsaf"; //getconnectin ID
        await Clients.Client(connectionID).SendAsync("OnTap", deviceName, "userID");
    }
}

Program.cs

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapHub<TapDeviceHub>(TapDeviceHub.HubUrl); //Hub configured here
app.MapFallbackToPage("/_Host");
app.Run();

Leave a Comment