SignalR .Net Client with MessagePack - AddMessagePackProtocol Method Unrecognised in IHubConnectionBuilder

Question

New user, trying to learn SignalR and Blazor Server, hoping somebody can help with this query. Struggling with getting the SignalR .NET Client to use MessagePack protocol in the Blazor Server Page.

.csproj Packages Installed

<ItemGroup>
    <PackageReference Include="Autofac" Version="5.2.0" />
    <PackageReference Include="Autofac.Extensions.DependencyInjection" Version="6.0.0" />
    <!-- <PackageReference Include="MessagePack" Version="1.9.3" /> -->
    <PackageReference Include="Microsoft.AspNetCore.SignalR" Version="1.1.0" />
    <PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="3.1.7" />
    <PackageReference Include="Microsoft.AspNetCore.SignalR.Protocols.MessagePack" Version="3.1.7" />
</ItemGroup>

Originally I had installed 3.1.8 of SingalR Client and MessagePack packages. However, I have also tried downgrading to 3.1.7 and the issue still occurs.

This segment of code:

    hubConnection = new HubConnectionBuilder()
                .WithUrl(hubUrl)
                .AddMessagePackProtocol()
                .Build();

causes a build error:

error CS1061: 'IHubConnectionBuilder' does not contain a definition for 'AddMessagePackProtocol' and no accessible extension method 'AddMessagePackProtocol' accepting a first argument of type 'IHubConnectionBuilder' could be found (are you missing a using directive or an assembly reference?).....

Can anybody help? Am I missing an assembly @using reference?

Blazor Server Page

@page "/"

@using System.Threading;
@using System.Collections.Generic;
@using Microsoft.AspNetCore.SignalR.Client;
@using WebApp.Data;

@inject NavigationManager NavigationManager


<h1>Blazor Server App</h1>

<div>Latest message is => @_latestMessage</div>

<div id="scrollbox">
    @foreach (var item in _messages)
    {
        <div>
            <div>@item</div>
        </div>
    }
    <hr />
</div>


@code {
    private HubConnection hubConnection;
    private string _latestMessage = "";
    private List<string> _messages = new List<string>();
    public bool IsConnected => hubConnection.State == HubConnectionState.Connected;

    protected override async Task OnInitializedAsync()
    {
        var hubUrl = NavigationManager.BaseUri.TrimEnd('/') + "/motionhub";
        // Uri uri = NavigationManager.ToAbsoluteUri("/motionhub");

        try
        {
            hubConnection = new HubConnectionBuilder()
                .WithUrl(hubUrl)
                .AddMessagePackProtocol()
                .Build();

            hubConnection.On<string>("SendMotionDetection", ReceiveMessage);

            await hubConnection.StartAsync();

            Console.WriteLine("Index Razor Page initialised, listening on signalR hub url => " + hubUrl.ToString());
            Console.WriteLine("Hub Connected => " + IsConnected);
        }
        catch (Exception e)
        {
            Console.WriteLine("Encountered exception => " + e);
        }
    }

    private void ReceiveMessage(string message)
    {
        try
        {
            Console.WriteLine("Hey! I received a message");
            _latestMessage = message;
            _messages.Add(_latestMessage);

            StateHasChanged();
        }
        catch (Exception ex)
        {
            Console.Error.WriteLine("An exception was encountered => " + ex.ToString());
        }
    }
}

Answer 1

Just to clarify the correct answer already given by @anon_dc3spp it should be noted that you:

1. Need to have the Microsoft.AspNetCore.SignalR.Protocols.MessagePack Nuget Package installed on both the client and server.

2. Then you would use his reference shown below on the intended razor page... or maybe add it to your imports page:

   @using Microsoft.Extensions.DependencyInjection

Answer 2

Finally, got this to compile by adding:

@using Microsoft.Extensions.DependencyInjection;

Hope this saves some time for other new users that experience similar issue.