How To Receive Real-Time Data In .NET 6 Client Application Using SignalR

connection = new HubConnectionBuilder().WithUrl("http://localhost:39823/events-hub", options => {
    options.Transports = HttpTransportType.WebSockets;
}).WithAutomaticReconnect().Build();
await connection.StartAsync();

Let’s go to the project and create a connection with the Server and receive the message. For simplicity, I will use the Privacy Action Controller. In a real application, you can keep the connection and data receive code in your service class and call it in wherever you need it.

For simplicity, let’s go to the Privacy Action of HomeController and create a connection with the SignalR server.

Here is the code of my HomeController Privacy.

public async Task < IActionResult > PrivacyAsync() {
    var connection = new HubConnectionBuilder().WithUrl("http://localhost:39823/events-hub", options => {
        options.Transports = HttpTransportType.WebSockets;
    }).WithAutomaticReconnect().Build();
    await connection.StartAsync();
    return View();
}

using Microsoft.AspNetCore.Http.Connections;
using Microsoft.AspNetCore.SignalR.Client; 

Note: The above should be included in the controller, and the HubConnection connection should be defined in the Home Controller.

Now, we need to change the default Privacy ActionResult to the Async as well.

Up until now, we have created the connection to the Server. Now we will move to receiving data in the client application.

To receive the data, write the following code just below the connection code in the same controller action.

public async Task < IActionResult > PrivacyAsync() {
    var connection = new HubConnectionBuilder().WithUrl("http://localhost:39823/events-hub", options => {
        options.Transports = HttpTransportType.WebSockets;
    }).WithAutomaticReconnect().Build();
    await connection.StartAsync();
    string newMessage1;
    connection.On < object > ("receiveEvent", (message) => {
        Console.WriteLine(message);
        var newMessage = JsonConvert.DeserializeObject < dynamic > (message.ToString());
        newMessage1 = $ "{newMessage.chainTip}";
    });
    return View();
}

In my case, the server will send data to the client with the name receiveEvent. In the chat application, it can appear as ReceiveMessage. You can check your server code for your own case.

I have deserialized the data.

The complete code can be found below.

using DemoSignalRClientApp.Models;
using Microsoft.AspNetCore.Http.Connections;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR.Client;
using Newtonsoft.Json;
using System.Diagnostics;
namespace DemoSignalRClientApp.Controllers {
    public class HomeController: Controller {
        private readonly ILogger < HomeController > _logger;
        HubConnection connection;
        public HomeController(ILogger < HomeController > logger) {
            _logger = logger;
        }
        public IActionResult Index() {
            return View();
        }
        public async Task < IActionResult > PrivacyAsync() {
                var connection = new HubConnectionBuilder().WithUrl("http://localhost:39823/events-hub", options => {
                    options.Transports = HttpTransportType.WebSockets;
                }).WithAutomaticReconnect().Build();
                await connection.StartAsync();
                string newMessage1;
                connection.On < object > ("receiveEvent", (message) => {
                    Console.WriteLine(message); //write in the debug console
                    var newMessage = JsonConvert.DeserializeObject < dynamic > (message.ToString());
                    newMessage1 = $ "{newMessage.chainTip}";
                });
                return View();
            }
            [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error() {
            return View(new ErrorViewModel {
                RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier
            });
        }
    }
}

So, our client application is ready now. We can run client and server applications at once and test whether the client app is able to receive data from the server or not.

Below is the result of my Client application successfully receiving the data from the server.

Conclusion

In this article, we have learned to how get the data in a client application from the server application using SignalR .Net client in ASP.NET Core web application.

As Microsoft has provided different ways to connect with the SignalR Server application from a client application, using various client libraries such as .NET Client, JavaScript Client, Java Client, and so on. In the next part of this series, we will learn how to use a JavaScript client library for the same purpose. If you have any queries, concerns, or feedback, please feel free to write them in the comment section.

References

• Microsost Docs
• Rijsat.com