How to use Microsoft Signalr C# Client in Asp.Net Core 31 (Error: WithUrl() not found in Core 3 client)

Steps to Creating a Signalr Hub and Client all in C#

Step 1. Create a Class and name whatever you want but make it inherit from SignalR Hub class, this will give you an ability to implement SignalR Hub Interface classes. When you do, this ability will let you define or have functions that tell you whether the connection is established with clients (Computer Connected to Your Server)

 public class MyOwnHub : Hub
    {
//Implement your code in here
}

Step 2. Follow SignalR Documentation to be able to Send Messages or Data to Clients (Computers that will connect to your web app through Web Sockets)

Step 3. Register the Hub Url in the StartUp.cs class so that Asp.Net Core Dependency Injection knows about the URL End-Point aswell as the Hub Class.

//In the Service Container, 
 services.AddSignalR(options =>
            {
                //Options here

            }).AddMessagePackProtocol(options =>
            {
                options.FormatterResolvers = new List<MessagePack.IFormatterResolver>()
                    {
                        MessagePack.Resolvers.StandardResolver.Instance
                    };
            });

//In public void Configure
public void Configure(IApplicationBuilder app){
 app.UseEndpoints(endpoint =>
            {

                endpoint.MapHub<MyHub>("/MyHub");

            });

}

[NB] There is one famous known method of receiving data from the Server Side, and that is by using JavaScript to connect to the Hub URL on the Server Side, however, this method does not always give you a leeway to integrate C# Objects into UI Rendered Presentations in the Web/Dom. In this document, we will try to implement Client-Side by using C# code. We want to skip JavaScript Client and would like to refresh the View component when the Server tries to Send the Client some data.

Dependencies:

1. You will need to install Microsoft.AspNetCore.SignalR.Client
2. You will need to install Microsoft.AspNetCore
   
   [Important] When Microsoft.AspNet.SignalR.Client is installed, sometimes Nuget Package in Visual Studio would install the package as Microsoft.AspNetCore.SignalR.Core, you will have to remove the "Core" and replace it with "Client" in YourProject.csproj. Otherwise, you won't be able to define the Hub Connection Endpoint from the View as "connectionHub.WithUrl('https://localhost:Port/MyHub'), the code would throw an error that WithUrl() is not found
   
   

Step 4. Make sure that you are connected to the Server through Web socket protocol from the View. In your Razor View create a C# block code Section to implement code that establishes a connection to the Web Server through Web Sockets that will allow your Front-End to communicate the Server Side in a bi-directional manner Asynchronously.

[Challenge]: The challenge will be "How to refresh the View to reflect the changes made to the Property or reflect the changes received from the Hub", we have seen other Frameworks try to solve this kind of problem such as Asp.Net Blazor that combines the Logic that would have been accomplished by using JavaScript but now in C#. The mixing of JavaScript Variables and C# all together had been always a challenge. Think about a situation where you need to use a C# Object inside JavaScript that is a separate File? In Step 5, you will how to solve this problem, by at least using some javascript to notify the UI component when there is a change to a C# Variable through SignalR.

In the View

@{
        HubConnection hubconnection = new HubConnectionBuilder().WithUrl("https://Address:Port/MyHub").WithAutomaticReconnect().Build();
        await hubconnection.StartAsync().ContinueWith(task =>
        {

            if (task.IsFaulted)
            {
                Console.WriteLine("==========Error==================");

            }
            else
            {
                Console.WriteLine("==========Connected==================");
                hubconnection.On<string, string>("MyFunctionOnTheServerSide", (param1, param2) =>
                {
                  //Code Implementation
                  MyFunction(param1);


                });
            }


        });
        void MyFunction(string passedInVariable)
        {
            
            <p class="text-muted">@passedInVariable</p>

        }
    }